Using the theme built-in grid system

When editing a page or article content, you can become quickly limited by formatting. For instance, you cannot easily create a two columns layout that adapts on mobile easily. Hopefully, our themes contains a built-in grid system that allows you to easily create such columns.

In order to do that, while editing a page, article or product description, click on the "<>" icon to display the HTML code:

You will then need to create custom HTML. For instance, here is the basic code to create a two-columns layout:

When you create a page, you need to modify the HTML and follow this code to create a two columns for instance:

<div class="grid">
  <div class="grid__cell 1/2--handheld-and-up">
    YOUR CONTENT ON LEFT PART
  </div>

  <div class="grid__cell 1/2--handheld-and-up">
    YOUR CONTENT ON RIGHT PART
  </div>
</div>

There are quite a lot of classes and the framework comes with much more feature, but this is the basic.

First you need to wrap all the content by a div with the  grid class. Then, all your cell should have the grid__cell class. Finally, the dimensions of the cell is defined by the class 1/2--handheld-and-up. This reads like English: if the device is handheld (other word for tablet) and up, it displays half (1/2) of the screen. If it's mobile it displays the full width.

Here is a more complex example:

<div class="grid">
  <div class="grid__cell 1/2--handheld 3/4--lap-and-up">
    YOUR CONTENT ON LEFT PART
  </div>

  <div class="grid__cell 1/2--handheld 1/4--lap-and-up">
    YOUR CONTENT ON RIGHT PART
  </div>
</div>

As you can see the  1/2--handheld-and-up has been changed to simply 1/2--handheld which means that this rule now only applies for tablet. Then, starting from laptop size and up, it displays a different size (3/4 of the total screen for left part and 1/4 of the total screen for right part).