CSS Framework

CSS classes helping you to arrange your content on the page are referred to as "layout helpers". In addition to Grid System you might expect from CSS framework - Agile Toolkit CSS offers you a variety of other ways to layout your content.

It's important to understand, which is the most appropriate mechanics and use them properly.

Page Layouts

Start your new page by picking an appropriate layout. There are a few layouts you can use provided by Agile Toolkit itself. Additional layouts can be provided by a "Theme" you have selected and the templates would be located in folder "layouts".

Layouts are built up from some of the basic components and may or may not offer mobile responsiveness support. We require all template designers to always consider mobile devices and if layout is not responsive, it must appear consistently on the small devices.

Class .atk-layout

The general widget structure for .atk-layout is the following:

.atk-layout
    .atk-layout-row
    .atk-layout-row.atk-layout-fluid
    .atk-layout-row

With .atk-layout-fluid you may specify which row of your layout will flexibly stretch to consume all the vertical space. You may have multiple stretching rows.

Additionally you can apply more classes on the row div such as swatch.

The alternative use of .atk-layout is by inserting .atk-layout-column inside it. You should use only one or another.

.atk-layout
    .atk-layout-column
    .atk-layout-column.atk-layout-fluid
    .atk-layout-column

Nesting layouts

As a rule - you can nest layouts. You can add one more .atk-layout inside your .atk-layout-row and so forth. The layout inside will take up available space and can allow you to build layouts of any complexity.

Grid System

Agile Toolkit bundles Gridpack component by default configured to support 12-columns. If you prefer to use another layout configuration, go to gridpack.com and create your own grid system which you can use instead inside Agile Toolkit.

Gridpack additionally offers you to configure grid behavior for mobile devices which is a great help for creating responsive designs. A typical grid layout:

.row
    .span_8.col
    .span_4.col

Grid system will stretch proportionally to its container.

Responsive Layouts