Jump To:

  1. Variables
    1. $config
    2. $sizes
    3. $static-sizes
  2. Mixins
    1. set()
    2. set-static()
    3. set-sizes()
    4. styles()
  3. Functions
    1. get()

Tile-grid

Creates a CSS grid with items that have matching aspect ratios. Reflows to fit as many items as can be fit withing current grid's width by default. Allows passing static styles to create fixed number of columns per row. Static styles are set adaptively and can adjust the number of columns at different breakpoints.

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "aspect-ratio" : list.slash(4, 3),
  "gap" : 1rem,
  "width" : 10em,
);
File Information
  • File: _tile-grid.scss
  • Group: tile-grid
  • Type: variable
  • Lines (comments): 14-18
  • Lines (code): 20-24

Map Properties

Name Type Default Description
aspect-ratio CssValue list.slash(4, 3)
gap Number 1rem The gap for the tile grid.
width Number 10em

$sizes

Variable Type: Map

Alternate Sizes for reflowable grid

  • Map of preferred width for columns and optional aspect-ratio for item
$sizes: (
  "large" : (
    "width" : 20em,
  )
);
File Information
  • File: _tile-grid.scss
  • Group: tile-grid
  • Type: variable
  • Lines (comments): 26-28
  • Lines (code): 30-34

$static-sizes

Variable Type: Map

Static grid width styles

$static-sizes: (
  "static" : (
    "default" : (
      "columns" : 1,
      "gap" : null,
      "aspect-ratio" : list.slash(4, 3)
    ),
    "small" : (
      "direction" : "min",
      "columns" : 2,
      "gap" : null,
    ),
    "medium" : (
      "direction" : "min",
      "columns" : 3,
      "gap" : null,
    ),
  ),
  "static-wide" : (
    "default" : (
      "columns" : 1,
      "gap" : null,
      "aspect-ratio" : list.slash(4, 3)
    ),
    "small" : (
      "direction" : "min",
      "columns" : 2,
      "gap" : null,
    ),
  )
);
File Information
  • File: _tile-grid.scss
  • Group: tile-grid
  • Type: variable
  • Lines (comments): 36-37
  • Lines (code): 39-69

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _tile-grid.scss
  • Group: tile-grid
  • Type: mixin
  • Lines (comments): 71-74
  • Lines (code): 76-78

Examples

@include ulu.component-tile-grid-set(( "property" : value ));

Parameters

Name Type Description
$changes Map Map of changes

Require

set-static()

Mixin

Set fixed sizes map

File Information
  • File: _tile-grid.scss
  • Group: tile-grid
  • Type: mixin
  • Lines (comments): 80-82
  • Lines (code): 84-86

Parameters

Name Type Description
$changes Map Map of changes
$merge-mode String Merge mode see utils.map-merge() [null

Require

set-sizes()

Mixin

Set sizes map

File Information
  • File: _tile-grid.scss
  • Group: tile-grid
  • Type: mixin
  • Lines (comments): 88-90
  • Lines (code): 92-94

Parameters

Name Type Description
$changes Map Map of changes
$merge-mode String Merge mode see utils.map-merge() [null

Require

styles()

Mixin

Output component stylesheet

File Information
  • File: _tile-grid.scss
  • Group: tile-grid
  • Type: mixin
  • Lines (comments): 105-107
  • Lines (code): 109-171

Examples

@include ulu.component-tile-grid-styles();

Require

Functions

get()

Function

Get a config option

File Information
  • File: _tile-grid.scss
  • Group: tile-grid
  • Type: function
  • Lines (comments): 96-99
  • Lines (code): 101-103

Examples

@include ulu.component-tile-grid-get("property");

Parameters

Name Type Description
$name Map Name of property

Require