Grid system


Need to change this text — outlines benefits. Meet our fluid grid system. Responsive. No need in any extra classes to make it responsive. Unlimited viewports. Adjustable columns for every viewport. Clean HTML markup.

Basic grid

Our grid is percentage based so width of the columns depends on the size of the container. It is recommended to keep grids under.atk-wrapper in order to have responsive features enabled.

<div class="atk-row">
<div class="atk-col-5">.atk-col-5</div>
<div class="atk-col-3">.atk-col-3</div>
<div class="atk-col-4">.atk-col-4</div>
</div>
.atk-col-5
.atk-col-3
.atk-col-4

Nested grids

To have a nested set of columns create a new.atk-row within an existing.atk-col-*.

<div class="atk-row">
<div class="atk-col-7">
.atk-col-7
<div class="atk-row">
<div class="atk-col-4">.atk-col-4</div>
<div class="atk-col-4">.atk-col-4</div>
<div class="atk-col-4">.atk-col-4</div>
</div>
</div>
<div class="atk-col-5">
.atk-col-5
<div class="atk-row">
<div class="atk-col-6">.atk-col-6</div>
<div class="atk-col-6">.atk-col-6</div>
</div>
</div>
</div>
.atk-col-7
.atk-col-4
.atk-col-4
.atk-col-4
.atk-col-5
.atk-col-6
.atk-col-6

Grid adjustments

To make adjustments to the grid system, opentheme-default.less file and find.createViewport() function under 'Layout' section.

.createViewport(
@cols: 12, /* Number of columns in this particular viewport. */
@colsGutter: 20px, /* Spacing between columns in this particular viewport. */
@viewportMinWidth: 0px /* Viewport target area is from 0px to infinity. */
);