Writing theme files (Plate Grid system)

The Plate Grid system

When you add the {% include "content_for_head" %} Plate also loads a grid system that is utilized by the nested layout structure to build the layout. You can use this grid system in your own theme. The grid works much like Bootstrap’s grid.

Example:

<div class="plate--container">
  <div class="plate--row">
    <div class="plate--column sm-4">
      ...
    </div>
    <div class="plate--column sm-4">
      ...
    </div>
    <div class="plate--column sm-4">
      ...
    </div>
  </div>
</div>

The default responsive grid sizes are:

xs (max 767px)
sm (max 991px)
md (max 1200px)
lg (> 1200px)

The plate--container div has the same max width as the current grid size. plate--container-fluidalways has 100% width.

The maximum amount of column units inside plate--row is 12.

plate--column has a gutter width of 30px (15px on each side). Columns are initially horizontally aligned, but break to vertically if the screen size is smaller than the named grid-size. E.g. sm-4 breaks off to vertical aligning if the screen size is smaller than 992px (sm is max 991px).

Of course you are not required to use Plate’s grid system. If you like another grid system better, you are free to use that one.