Grid

Content wrappers

Fullwidth and paddings left and right.

Maximum width of 1200px and paddings left and right.

Fullwidth and paddings left and right.

Maximum width of 1200px and paddings left and right.

Auto adjustable elements

We have a standard grid without a measured size based on flexbox, with this type of grid we can build complex layouts like this header for example, we have a full width search that automatically adapts to the space available. We have a .row with nested elements, in this case we have a nested form width the class col which applies the rule to adapt the element to the available space.

Controlled adjustable elements

This means we can define a row with nested col elements that have a min and max width defined, these elements will adjust the width between the given values fitting the maximum elements in the row.

Vertical alignement
Horizontal alignement
Space between
Columns

Columns work exactly like in bootstrap, we also have push, pull and offset available, but these have to be enabled in the project.

.col__xs--1
.col__xs--11
.col__xs--2
.col__xs--10
.col__xs--3
.col__xs--9
.col__xs--4
.col__xs--8
.col__xs--5
.col__xs--7
.col__xs--6
.col__xs--6
.col__xs--7
.col__xs--5
.col__xs--8
.col__xs--4
.col__xs--9
.col__xs--3
.col__xs--10
.col__xs--2
.col__xs--11
.col__xs--1
.col__xs--12