Card-grid
Lightweight CSS Grid setup for card components
Variables
$config
Variable Type: Map
Module Settings
$config: (
"gap" : 2rem,
"template-columns" : 1fr 1fr,
"compact-gap" : 1rem,
"compact-template-columns" : 1fr 1fr 1fr,
);
File Information
- File: _card-grid.scss
- Group: card-grid
- Type: variable
- Lines (comments): 12-17
- Lines (code): 19-24
Map Properties
Name | Type | Default | Description |
---|---|---|---|
compact-template-columns | CssValue | 1fr 1fr 1fr | The template-columns of the card-grid--compact. |
compact-gap | Dimension | 1rem | The grid gap of the card-grid--compact. |
gap | Dimension | 2rem | The grid gap of the card-grid. |
template-columns | CssValue | 1fr 1fr | The template-columns of the card-grid. |
Mixins
set()
Mixin
Change modules $config
File Information
- File: _card-grid.scss
- Group: card-grid
- Type: mixin
- Lines (comments): 26-29
- Lines (code): 31-33
Examples
@include ulu.component-card-grid-set(( "property" : value ));
Parameters
Name | Type | Description |
---|---|---|
$changes | Map |
Map of changes |
Require
styles()
Mixin
Prints component styles
File Information
- File: _card-grid.scss
- Group: card-grid
- Type: mixin
- Lines (comments): 44-46
- Lines (code): 48-75
Examples
@include ulu.component-card-grid-styles();
Require
Functions
get()
Function
Get a config option
File Information
- File: _card-grid.scss
- Group: card-grid
- Type: function
- Lines (comments): 35-38
- Lines (code): 40-42
Examples
@include ulu.component-card-grid-get("property");
Parameters
Name | Type | Description |
---|---|---|
$name | Map |
Name of property |