Jump To:

  1. Variables
    1. $config
  2. Mixins
    1. set()
    2. styles()
  3. Functions
    1. get()

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

Require