Jump To:

  1. Variables
    1. $config
    2. $containers
  2. Mixins
    1. set()
    2. set-containers()
    3. match-container-padding()
    4. match-container-margin()
    5. container-padding()
    6. container-styles()
    7. clearfix()
    8. remove-scrollbar()
    9. absolute-fill()
  3. Functions
    1. get()
    2. get-container()
    3. get-container-padding()
    4. get-container-padding-x()
    5. get-container-padding-y()

Layout

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "margin":            2rem,
  "max-width":         90rem,
  "z-index-above":     450,
  "z-index-fixed":     1000,
  "z-index-sticky":    100,
);
File Information
  • File: _layout.scss
  • Group: layout
  • Type: variable
  • Lines (comments): 13-19
  • Lines (code): 21-27

Map Properties

Name Type Default Description
margin Number 2rem Common margin for site
max-width Number 90rem Common max-width for site
z-index-above Number 1000 Common z-index, below sticky
z-index-fixed Number 100 Common z-index, above everything
z-index-sticky Number 450 Common z-index for sticky or stuck items

$containers

Variable Type: Map

Containers Lookup (use set-containers)

$containers: (
  "container" : (
    "width" : 100%,
    "max-width" : get("max-width"),
    "padding" : (get("margin") get("margin")),
    "breakpoints" : null,
    "responsive" : false,
    "responsive-amount" : 3vw
  )
);
File Information
  • File: _layout.scss
  • Group: layout
  • Type: variable
  • Lines (comments): 44-46
  • Lines (code): 48-57

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _layout.scss
  • Group: layout
  • Type: mixin
  • Lines (comments): 29-31
  • Lines (code): 33-35

Parameters

Name Type Description
$changes Map Map of changes
@include ulu.layout-set(( "property" : value ));

Require

set-containers()

Mixin

Set layout containers

  • See the $containers variable for example of container properties
File Information
  • File: _layout.scss
  • Group: layout
  • Type: mixin
  • Lines (comments): 59-62
  • Lines (code): 64-66

Parameters

Name Type Description
$changes Map Map of changes
$merge-mode String Merge mode see utils.map-merge() [null

Require

match-container-padding()

Mixin

Returns padding to another property including breakpoints ie. { top: $containers-padding; }

File Information
  • File: _layout.scss
  • Group: layout
  • Type: mixin
  • Lines (comments): 100-104
  • Lines (code): 106-118

Parameters

Name Type Description Default
$property String Property name to apply the padding value to
$name String The container name
$sides Boolean Match the container padding for the sides (left/right), false will match the containers end padding (top/bottom) true

Require

match-container-margin()

Mixin

For a given property for every breakpoint in a given container creates a css calc value that will match the containers side margin The margin is created via empty space when the container hits the max-width If passing include padding it would be the containers side (x) + the padding. This accounts for the containers max-width to give an absolute value

File Information
  • File: _layout.scss
  • Group: layout
  • Type: mixin
  • Lines (comments): 120-127
  • Lines (code): 129-150

Parameters

Name Type Description Default
$property String Property name to apply the margin value to
$name String The container name
$include-padding Boolean Include the containers padding in the margin calculation true

Require

container-padding()

Mixin

Print the containers padding properties

File Information
  • File: _layout.scss
  • Group: layout
  • Type: mixin
  • Lines (comments): 168-171
  • Lines (code): 173-199

Parameters

Name Type Description Default
$name String The container name
$sides Boolean Sides by default, false is ends true
$specific-breakpoint Boolean Only for a specific breakpoint false

Require

container-styles()

Mixin

Print all container styles for a given container

File Information
  • File: _layout.scss
  • Group: layout
  • Type: mixin
  • Lines (comments): 217-219
  • Lines (code): 221-246

Parameters

Name Type Description
$name String Container name
$specific-breakpoint Boolean Only for a specific breakpoint (else includes both the base styles and breakpoint styles)

Require

clearfix()

Mixin

Prints clearfix styles

File Information
  • File: _layout.scss
  • Group: layout
  • Type: mixin
  • Lines (comments): 248-248
  • Lines (code): 250-261

remove-scrollbar()

Mixin

Removes scrollbar with CSS

File Information
  • File: _layout.scss
  • Group: layout
  • Type: mixin
  • Lines (comments): 263-263
  • Lines (code): 264-270

absolute-fill()

Mixin

Layout utility for absolute (zero on all sides)

  • Probably helpful for gzip if we use this when these exact styles are needed so they are identical for compression
File Information
  • File: _layout.scss
  • Group: layout
  • Type: mixin
  • Lines (comments): 272-275
  • Lines (code): 276-287

Parameters

Name Type Default Description
$set-size Boolean false Whether or not to use sizes to fill the space (height/width 100%) versus setting bottom and right to 0)

Functions

get()

Function

Get a config option

File Information
  • File: _layout.scss
  • Group: layout
  • Type: function
  • Lines (comments): 37-39
  • Lines (code): 40-42

Parameters

Name Type Description
$name Map Name of property
@include ulu.layout-get("property");

Require

get-container()

Function

Get a container map

File Information
  • File: _layout.scss
  • Group: layout
  • Type: function
  • Lines (comments): 68-70
  • Lines (code): 72-98

Parameters

Name Type Description
$name Map Container name
$breakpoint String Return only the properties for a specific breakpoint for the container

Throw

  • ULU: No container breakpoints for container

Require

get-container-padding()

Function

Get a containers padding value

File Information
  • File: _layout.scss
  • Group: layout
  • Type: function
  • Lines (comments): 152-155
  • Lines (code): 157-166

Parameters

Name Type Description Default
$name String Container name
$sides Boolean Get the left/right value, false return top/bottom true
$specific-breakpoint String Get the value for a specific breakpoint false

Require

get-container-padding-x()

Function

Get containers padding X value (side)

File Information
  • File: _layout.scss
  • Group: layout
  • Type: function
  • Lines (comments): 201-203
  • Lines (code): 205-207

Parameters

Name Type Description
$name String Container name
$specific-breakpoint Boolean For a specific breakpoint

Require

get-container-padding-y()

Function

Get containers padding Y value (ends)

File Information
  • File: _layout.scss
  • Group: layout
  • Type: function
  • Lines (comments): 209-211
  • Lines (code): 213-215

Parameters

Name Type Description
$name String Container name
$specific-breakpoint Boolean For a specific breakpoint

Require