Image-grid

Jump To:

Demos

Basic Image Grid

A flex-based grid for displaying a collection of images that automatically reflows.

<ul class="image-grid">
  <li class="image-grid__item">
    <img src="https://picsum.photos/id/10/400/300" alt="Image 1">
  </li>
  <li class="image-grid__item">
    <img src="https://picsum.photos/id/11/400/300" alt="Image 2">
  </li>
  <li class="image-grid__item">
    <img src="https://picsum.photos/id/12/400/300" alt="Image 3">
  </li>
  <li class="image-grid__item">
    <img src="https://picsum.photos/id/13/400/300" alt="Image 4">
  </li>
  <li class="image-grid__item">
    <img src="https://picsum.photos/id/14/400/300" alt="Image 5">
  </li>
  <li class="image-grid__item">
    <img src="https://picsum.photos/id/15/400/300" alt="Image 6">
  </li>
</ul>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "breakpoint": "small",
  "gap":        3px,
  "min-width":  math.div(100%, 3)
);

File Information

File: _image-grid.scss
Group: image-grid
Type: variable
Lines (comments): 13-17
Lines (code): 19-23

Map Properties

Name	Type	Default	Description
breakpoint	String	"small"	Sets the min breakpoint for the grid to print. This uses breakpoint.scss, so the value of this option should be a breakpoint variable from breakpoint.scss.
gap	Dimension	3px	The gap between images in the grid.
min-width	Dimension	math.div(100%, 3)	The min-width of the images in the grid.

Mixins

set()

Mixin

Change modules $config

File Information

File: _image-grid.scss
Group: image-grid
Type: mixin
Lines (comments): 25-28
Lines (code): 30-32

Examples

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

Parameters

Name	Type	Description
$changes	`Map`	Map of changes

Require

$config

styles()

Mixin

Prints component styles

File Information

File: _image-grid.scss
Group: image-grid
Type: mixin
Lines (comments): 43-45
Lines (code): 47-71

Examples

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

Require

get()

Functions

get()

Function

Get a config option

File Information

File: _image-grid.scss
Group: image-grid
Type: function
Lines (comments): 34-37
Lines (code): 39-41

Examples

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

Parameters

Name	Type	Description
$name	`Map`	Name of property

Require

$config