This is a CSS library made up of classes compiled from SASS mixins. The mixins work inside of the functions.scss taking values from maps in variables.scss. If the user wishes to have specific breakpoints, spacers or add values to their project, they would make changes in variables.scss. By linking to style.min.css the user gets access to the library of classes.

Applying the classes to the html tags gives the elements predefined values. The naming system: [property shorthand]-[breakpoint]-[value], if no breakpoint is given to the class [property shorthand]--[value] the class won't work responsively and use the same value for every screen size. Giving the class a breakpoint of "xs" meaning that the property working from a screen width of 0px.

By giving the parent element a class of grid gives it a property of display: grid and grid-template-columns: repeat(12, 1fr). The child element is given the class of col--[amount of columns to span] and the property of grid-column-end: span [amount of columns to span], see the example below.

Make the grid responsive by adding a breakpoint between the two hyphens. This adds the property to a media query with a min-width: (breakpoint).

Offsetting the columns to start at a desired part of If the default column count of 12 isn't desired, the user can responsively change the number of columns. Add the class row-[breakpoint]-[columns] to the parent element. Offset the grid by adding the class of offset-[breakpoint]-[starting column].

An alternative to adding padding to desired grid elements the user can add a class of gap to the parent element.

Make the gaps responsive by adding a class of gap-[breakpoint]-[size] to the parent element.

If the default column count of 12 isn't desired, the user can responsively change the number of columns. Add the class row-[breakpoint]-[columns] to the parent element.

To give the parent element the property of display: flex simply add the class flex-[breakpoint]-parent. To make the child boxes grow and shrink the entire width of the container add flex-[breakpoint]-child.

Change the order of the boxes by adding the class order-[breakpoint]-[number].

A flex grid makes itself better in a vertical layout on mobile. This is easily done by changing the property value on a certain breakpoint. This example makes the switch while the screen crosses the breakpoint large.

In this instance, we can switch the positioning of the flex items. Adding a new class with the structure flex-[breakpoint]-justify-[position] substituting (position) with center, end or even. Adding no position justifies the item at the start of the parent.

Simply make the items wrap by adding the class flex-[breakpoint]-wrap.

Padding is added to the element with the property shorthand "p". The shorthand is followed by the breakpoint, which side to display the padding and by the size of the padding.

To specify on which side of the element the user wants padding
t: top,
b: bottom,
l: left,
r: right,
h: (horizontal) left and right,
v: (vertical) top and bottom,

Adding no specific side gives the element padding all around the element.

Margin is added to the element with the property shorthand "m". The shorthand is followed by the breakpoint, which side to display the margin and by the size of the margin.

To specify on which side of the element the user wants the margin
t: top,
b: bottom,
l: left,
r: right,
h: (horizontal) left and right,
v: (vertical) top and bottom,

Adding no specific side gives the element margin all around the element.

Z-index is given to the elements by adding the class zindex-[breakpoint]-[layer]. The layers go from n, which is the base level and up to the last index of the map.

The display property can also easily be changed with classes. See the example below.

The same goes for the position property.

The max-width of the element can be applied like this: