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.
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
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;
Our grid-classes make developing a responsive website even easier, they are based on percentages and not
<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
| || ||Amount of columns|
| || ||Base design width. Used for converting rem to grid size and min/max grid|
| || ||Maximum row width, will be set as max-width for rows.|
| || ||Breakpoints used for the grid. All classes will be automatically generated based on|
| ||1/1 : |
|Extra breakpoints automatically generates percentages. More can be added easily.|