Grid & layout

Grid system is a good old 12 column layout, bootstrap-style. Main building blocks are sections inside which grid components or simple blocks could be inserted. Sections already have paddings so that they have some spacing between them if placed one after another.

There are a few modifications to grid components that wold allow for flexibility when creating different layouts.

Default grid

Below is a default grid configuration. The main elements of a grid are grid rows, inside of which there are columns. Each column has paddings on all sides and each row has negative left and right margins to make content line up with the base grid edges. This allows to wrap columns inside rows when necessary without the need to worry about columns being too close to each other.

Default column element grows if possible so you can just put as many similarly sized columns as necessary, they won't wrap. For customization of column width we use additional classes that specify what part of the row this column should take. Sizes are all in relative units.

By default each column stays the same from the widest to the narrowest breakpoints. Special classes ensure their responsive behaviour on different screen width. Classes we use make columns span either 50% of the row width or 100% on any breakpoint (tablet, mobile landscape, and mobile portrait). Below are examples of using such classes. First we make our columns just fill 100% of the width on certain breakpoints:

Now we make our columns first fill 50% of the width and then 100%.

Components grid

In some instances our layout grid may be a bit too spacey for the inner components of our interface. For such occasions we have a special sort of grid — grid for components. It can be modified to be tighter than layout grid but otherwise has the same behaviour and the same classes that modify our default grid apply to this grid as well.

Full width grid

Sometimes we need our section to span the whole width of the page and our elements inside the grid to not have paddings or margins. In such cases we use special sections without paddings, grid rows without negative margins, and columns themselves without paddings.

Limiting content span

We use special classes that limit our content and center it like the blocks of text we have on this page. There are two types of limiters — one is limiting our content but allows for wide enough width like here.

And then we have another than is limiting our content in width even more. It is useful for longer text blocks when we want to make sure the reading experience is optimized.

Columns offset

When the column needs to be placed not at the beginnig of the row but offset we use special offset classes that shift our columns where we want them.

Modifying classes

Below is a selection of classes that modify grid and layout. The ones responsible for column width, offset, layout margins, etc.

Flex modifiers

Below is a selection of possible flex parent combinations. We name it by using first letters of flex properties (as seen in Webflow designer). These classes can be used to quickly modify layout of the blocks of content.