General
mixins
container
@mixin container($definition) { ... }Description
Create a grid container defining the width of the main content and its edges
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$definition | A single container structure definition | Map | — none |
Example
Simple container: input
.grid {
.grid__container {
@include chaestli.container((edge: 16px, width: 800px));
}
}Output
.grid .grid__container { max-width: 800px; margin-left: auto; margin-left: auto; padding-left: 16px; margin-left: 16px; }
Requires
- [function]
create-container-config
grid
@mixin grid($definition) { ... }Description
Enable the display: grid; on a container element. Notice that you can define the amount of columns your grid will have and the vertical and horizontal gaps of its items
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$definition | A single grid structure definition | Map | — none |
Example
Simple 12 columns grid with rows and cols gutter: input
.grid {
.grid__row {
@include chaestli.grid((gutter: (16px, 24px), num-cols: 12));
}
}Output
.grid .grid__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(100% / 12 - 16px), 1fr)); column-gap: 16px; row-gap: 24px; }
Requires
- [function]
create-grid-config - [function]
get-grid-gaps
column
@mixin column($start, $end) { ... }Description
Just as syntax sugar aliasing the grid-column rule
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$start | column start | List or Number | — none |
$end | column end | List or Number | — none |
Example
Simple column 3 span over 12 columns: input
.grid {
.grid__three-col {
@include chaestli.column(3 span, 12 span);
}
}Output
.grid .grid__three-col { grid-column: 3 span / 12 span; }
functions
create-container-config
@function create-container-config($cfg) { ... }Description
Create a definitions object for containers
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$cfg | The config map | Map | — none |
Returns
Map —The merge result
Used by
- [mixin]
container
create-grid-config
@function create-grid-config($cfg) { ... }Description
Create a definitions object for grids
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$cfg | The config map | Map | — none |
Returns
Map —The merge result
Used by
- [mixin]
grid
get-grid-gaps
@function get-grid-gaps($gutter) { ... }Description
Extract the grid gutters from the user options
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$gutter | Gutter value provided by the user | List or Number | — none |
Returns
Map —A map containing the column and row gutters
Used by
- [mixin]
grid