components/ui/_grid.scss

A simple and cascadable grid that is based on CSS Flexbox that supports multiple HTML tags.

In all the following examples on this page:

• Flexbox items have red border
• Fexbox containers have double solid light gray border

Multiple grids

Cascading

You can include as mush as grids as you wish into a single item.

Auto grow

Modifier class name for items .mod-grow allows to fill the blank space.

Responsive wrapping

By default grid items automatically wrap when there is no enough space. For each screen size or globally, it is possible to force items to stay into their axis with .mod-nowrap[-screenSizeName] modifier.

Inline

By default flexbox container behaves like a block, spreading over all the available width. It is possible to switch to an inline mode by using modifier .mod-inline

Example of a grid with mod-nowrap:

Horizontal alignment

• .mod-left Items are pushed towards the start of the container’s main axis.
• .mod-center Items are centered along the container’s main axis.
• .mod-right Items are pushed towards the end of the container’s main axis.
• .mod-space-between The remaining space is distributed between the items.
• .mod-space-evenly Distribute items evenly. Items have equal space around them.
• .mod-space-around Items are evenly distributed with equal space around them.

Vertical alignment

• .mod-top Items are aligned at the start of the cross axis.
• .mod-middle Items are centered vertically along the container’s cross axis.
• .mod-bottom Items are aligned at the end of the cross axis.
• .mod-baseline Items are aligned at the baseline of the cross axis.

Alignments combinations

Here follows examples of combinations between main and cross axis alignment.

Column

By default, flex flow is set to rows. It can be set to columns with the modifier .mod-column

Responsive reverse

Rows and columns flows can be reversed responsively with modifier .mod-reverse[-screenName]

Responsive order

It is possible to set a specific flex item at first place globally or on specified screen size with the responsive modifier .mod-order--1[-screenName]

Sets order:-1 to the specified grid item.

Relative width

Modifier class name format .mod-w-[number]

Sets the relative width of items in percentage with 1/12 steps.

• .mod-w-12 Sets the width of the item to 100% (12/12).
• .mod-w-11 Sets the width of the item to 91.6666% (11/12).
• .mod-w-10 Sets the width of the item to 83.3333% (5/6).
• .mod-w-9 Sets the width of the item to 75% (3/4).
• .mod-w-8 Sets the width of the item to 66.6666% (2/3).
• .mod-w-7 Sets the width of the item to 58.3333% (7/12).
• .mod-w-6 Sets the width of the item to 50% (1/2).
• .mod-w-5 Sets the width of the item to 41.6666% (5/12).
• .mod-w-4 Sets the width of the item to 33.3333% (1/3).
• .mod-w-3 Sets the width of the item to 25% (1/4).
• .mod-w-2 Sets the width of the item to 16.6666% (1/6).
• .mod-w-1 Sets the width of the item to 8.3333% (1/12).
• .mod-w-0 Sets the width of the item to 0% (0/12).

Responsive width

Same usage as global width but modifiers contain screen size name .mod-w-[number]-[screenSizeName]. Thus, the more amount of screen sizes you have, the more you get responsive width modifiers.

Current screen sizes settings are:

$ds-screen-sizes: (
    sm: 768,
    md: 1024,
    lg: 1440,
    xl: infinite
);

Here are some of the responsive classes you get:

Responsive playgroud

Responsive fixed width

Modifier class name format .mod-fw-[fixedWidthName].

Assign fixed width according to grid settings $grid-items-fixed-widths. Fixed widths override relative widths.

Max widths

Grid allows custom max width for items through the modifier .mod-mw-[maxWidthName].

Gutter

Gutter modifer .mod-gutter simply applies a spacing around the items based on SASS variable $grid-gutter

Responsive gutter

$grid-gutter-default is the default margin for gutter.

It is possible to override the default gutter for each screen size:

$grid-gutter-responsive: (
    sm: 5px //5px gutter for *sm* screen size.
);

Responsive gutter shadow

$grid-gutter-box-shadow-default is the default shadow applied on every item.

It is possible to override the default gutter shadow for each screen size:

$grid-gutter-box-shadow-responsive: (
    sm: my-shadow(1-soft) // Shadow called "1-soft" for "sm" screen size
);

No gutter shadow

It is possible to disable shadow on gutter items with modifier .mod-noshadow on flex parent. It is also possible to add shadow on specific gutter items even if noshadow modifier is set on its parent:

Aspect ratio

It is possible to force items into a custom aspect ratio with the modifier .mod-ar-[aspectRatioName]

On container

On specific items, you must add a vertical alignment modifier on container to get proper aspect ratio.