Using the theme built-in grid system

This feature is only available for our theme Focal (starting from version 5), our theme Kagami (starting from version 4) and our theme Trademark (all versions).

This is an advanced tutorial that requires basic knowledge of HTML and CSS. If you are unsure about it, we would recommend you to use a service like TaskHusky to do it for you.

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).

Alternatively, you can use an app such as Shogun to make the creation of complex pages much easier by using a drag&drop interface.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.