Predefined grid classes

Use to build organic layouts with predefined grid classes for fast prototyping.

Description

To get started you need to add the wrapper class .col-[s/m/l/xl]-wrapper to make your inner divs into columns and have proper alignment and padding between them (only one class is needed, so if you use .col-s-wrapper the others are not required). If you only add .col-xl-wrapper, it means that it will create your grid system only starting from extra large devices onwards.

Inside the wrapper class specify the desired proportion of the column with classes .col-[s/m/l/xl]-[1-8] (e.g. .col-m-3 will apply a proportion of 3 on the column from medium screen onwards). The approach is mobile-first, where the small columns will be applied across all resolutions unless another class for a bigger breakpoint is applied.

The available proportions are between 1 and 8 (1 is the smallest proportion, 8 is the biggest). Each column proportion is dependent on the siblings proportions. For example, two elements with class .col-s-1 will display two equal columns.

The predefined grid classes are split into 4 categories:

  • [.col]-s-[proportion] : small device width < 480px
  • [.col]-m-[proportion] : medium device width >= 480px
  • [.col]-l-[proportion] : large device width >= 800px
  • [.col]-xl-[proportion] : extra large device width >= 1200px

Usage

Usage example

1
2
3
4

Code example

<div class="col-s-wrapper">
  <div class="col-s-1 col-m-2 col-l-3 col-xl-4 colors__sample--purple-light">1</div>
  <div class="col-s-2 col-m-3 col-l-4 col-xl-1 colors__sample--orange-light">2</div>
  <div class="col-s-3 col-m-4 col-l-1 col-xl-2 colors__sample--green-light">3</div>
  <div class="col-s-4 col-m-1 col-l-2 col-xl-3 colors__sample--red-light">4</div>
</div>