Gridr System

Gridr System

Gridr System is the core of positioning in Simplr. It uses a 20 Grid system in order to position elements.

If you had a page with a column with a width of 10 units in the middle of the page, Grindr would have a structure shown below;

<div class="row">
    <div class="col col-10 mv-5" />
</div>

The columns created also has a 1.5% of pages width as a gap between them to create a easily readable structure.

col-* Class

col-* class is used to define width of the column. The number is defined by the 20 grid system. NOTE: Including "col-*" class requires "col" class to be included aswell. This is mandatory.

mv-* Class

mv-* class is used to move element from left by defined grid unit. This class is especially usefull when centering a column.