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): 12-18
  • Lines (code): 20-26

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): 43-45
  • Lines (code): 47-56

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _layout.scss
  • Group: layout
  • Type: mixin
  • Lines (comments): 28-30
  • Lines (code): 32-34

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): 58-61
  • Lines (code): 63-65

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): 99-103
  • Lines (code): 105-117

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): 119-126
  • Lines (code): 128-143

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): 161-164
  • Lines (code): 166-192

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): 210-212
  • Lines (code): 214-239

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): 241-241
  • Lines (code): 243-254

remove-scrollbar()

Mixin

Removes scrollbar with CSS

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

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): 265-268
  • Lines (code): 269-280

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): 36-38
  • Lines (code): 39-41

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): 67-69
  • Lines (code): 71-97

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): 145-148
  • Lines (code): 150-159

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): 194-196
  • Lines (code): 198-200

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): 202-204
  • Lines (code): 206-208

Parameters

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

Require