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 |
$widths
Variable Type: Map
System widths
$widths: (
"small-x": (
"value": 6rem,
"helper-class": true
),
"small": (
"value": 8rem,
"helper-class": true
),
"medium": (
"value": 16rem,
"helper-class": true
),
"large": (
"value": 32rem,
"helper-class": true
)
);File Information
- File: _layout.scss
- Group: layout
- Type: variable
- Lines (comments): 44-50
- Lines (code): 52-69
Map Properties
| Name | Type | Description |
|---|---|---|
| [name] | Map | The width definition |
| [name].value | String | Number |
| [name].helper-class | Boolean | Output a helper class for this width |
| [name].match-font-size | Boolean | If enabled will set font size equal to width for font based icon fonts (only output with helper class) |
| [name].breakpoints | Map | Responsive breakpoints (optional) |
$max-widths
Variable Type: Map
System max-widths
$max-widths: (
"small": (
"value": 20rem,
"helper-class": true
),
"medium": (
"value": 40rem,
"helper-class": true
),
"large": (
"value": 60rem,
"helper-class": true
)
);File Information
- File: _layout.scss
- Group: layout
- Type: variable
- Lines (comments): 87-92
- Lines (code): 94-107
Map Properties
| Name | Type | Description |
|---|---|---|
| [name] | Map | The max-width definition |
| [name].value | String | Number |
| [name].helper-class | Boolean | Output a helper class for this max-width |
| [name].breakpoints | Map | Responsive breakpoints (optional) |
$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): 125-127
- Lines (code): 129-139
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-widths()
Mixin
Change widths config
File Information
- File: _layout.scss
- Group: layout
- Type: mixin
- Lines (comments): 71-73
- Lines (code): 75-77
Parameters
| Name | Type | Description |
|---|---|---|
| $changes | Map |
Map of changes |
| $merge-mode | String |
Merge mode see utils.map-merge() [null |
Require
- map-merge()
- $widths
set-max-widths()
Mixin
Change max-widths config
File Information
- File: _layout.scss
- Group: layout
- Type: mixin
- Lines (comments): 109-111
- Lines (code): 113-115
Parameters
| Name | Type | Description |
|---|---|---|
| $changes | Map |
Map of changes |
| $merge-mode | String |
Merge mode see utils.map-merge() [null |
Require
- map-merge()
- $max-widths
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): 141-144
- Lines (code): 146-148
Parameters
| Name | Type | Description |
|---|---|---|
| $changes | Map |
Map of changes |
| $merge-mode | String |
Merge mode see utils.map-merge() [null |
Require
- map-merge()
- $containers
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): 182-186
- Lines (code): 188-200
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): 202-209
- Lines (code): 211-232
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): 250-253
- Lines (code): 255-281
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): 299-301
- Lines (code): 303-328
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): 330-330
- Lines (code): 332-343
remove-scrollbar()
Mixin
Removes scrollbar with CSS
File Information
- File: _layout.scss
- Group: layout
- Type: mixin
- Lines (comments): 345-345
- Lines (code): 346-352
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): 354-357
- Lines (code): 358-369
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
- require-map-get()
- $config
get-width()
Function
Get a width config by name
File Information
- File: _layout.scss
- Group: layout
- Type: function
- Lines (comments): 79-81
- Lines (code): 83-85
Parameters
| Name | Type | Description |
|---|---|---|
| $name | String |
Name of width |
Returns
| Type | Description |
|---|---|
| Map | The width configuration object |
Require
- require-map-get()
- $widths
get-max-width()
Function
Get a max-width config by name
File Information
- File: _layout.scss
- Group: layout
- Type: function
- Lines (comments): 117-119
- Lines (code): 121-123
Parameters
| Name | Type | Description |
|---|---|---|
| $name | String |
Name of max-width |
Returns
| Type | Description |
|---|---|
| Map | The max-width configuration object |
Require
- require-map-get()
- $max-widths
get-container()
Function
Get a container map
File Information
- File: _layout.scss
- Group: layout
- Type: function
- Lines (comments): 150-152
- Lines (code): 154-180
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
- require-map-get()
- get()
- $containers
get-container-padding()
Function
Get a containers padding value
File Information
- File: _layout.scss
- Group: layout
- Type: function
- Lines (comments): 234-237
- Lines (code): 239-248
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()
- get()
- when()
get-container-padding-x()
Function
Get containers padding X value (side)
File Information
- File: _layout.scss
- Group: layout
- Type: function
- Lines (comments): 283-285
- Lines (code): 287-289
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): 291-293
- Lines (code): 295-297
Parameters
| Name | Type | Description |
|---|---|---|
| $name | String |
Container name |
| $specific-breakpoint | Boolean |
For a specific breakpoint |