Grid

The philosophy

Making websites responsive shouldn't be such a tedious task, but it is. We try to make things easier, with our Henri's grid. We have a function and classes you can use.

An important thing to mention is that the designers at Matise design on a 24 column grid layout, it's important that designers and developers are on the same page.

The function

Since our grid is based on 24 columns we divide the view-width of a page by 24 for our grid-function. This means grid(24) is equal to 100vw and grid(12) is equal to 50vw. It's also possible to add decimals to the grid value.

height: grid(24); // outputs: height: 100vw;

height: grid(1); // outputs: height: 4.1666666667vw;

The classes

Our grid-classes make developing a responsive website even easier, they are based on percentages and not vw.

<div class="column column-12">
	<!-- This div will be 50% of the width of its container element. -->
</div>
<!-- It is also possible to add screen sizes to the classes. -->
<div class="column medium-12 small-full">
	<!-- This div will be 50% of the width of its container element on screens that are medium or larger and 100% of the width on small screens. -->
</div>

The element has to have a .column class.

Settings

Variable Default value Description
$grid-columns 24 Amount of columns
$grid-design-width 1920px Base design width. Used for converting rem to grid size and min/max grid
$grid-row-width 4096px Maximum row width, will be set as max-width for rows.
$grid-breakpoints small : 750
medium : 960
large : 1280
xlarge : 1920
xxlarge : 9999
Breakpoints used for the grid. All classes will be automatically generated based on
$grid-parts 1/1 : full
1/2 : half
1/3 : third
2/3 : two-third
1/4 : quarter
3/4 : three-quarter
1/5 : fifth
2/5 : two-fifth
3/5 : three-fifth
4/5 : four-fifth
1/6 : sixth
5/6 : five-sixth
Extra breakpoints automatically generates percentages. More can be added easily.