Layout


Agile CSS allows you to create a wide varietty of page layouts by combining some of its atk-layout-* classes as explained below.

Layout components explained

<div class="atk-layout"> is the first tag which must appear after <body> inside your HTML when you are coding with Agile CSS. The immediate children of this class can only be <div class="atk-layout-row">. Agile CSS layout system is using display:table that can offer great support for responsive layouts and a reliable way of laying out your layout sections.

<div class="atk-layout-row"> can similarly only contain <div class="atk-layout-cell">. atk-layout-row defines a horizontal section of your page layout. Normally you would add at least 3 rows: header(menu), content and footer. For the content with a variable width, use additional class atk-layout-expand. Without this class all of your rows will expand proportionally to fill 100% of browser window height.

Basic layout

Start with this example code below and create as many rows as you would require in your layout. Toolkit's layout element always covers 100% of available browser space. Decide which of the rows will expand to scale. Any rows you define after atk-layout-expander will stick to the bottom of your browser.

<div class="atk-layout">
<div class="atk-layout-row">
<div class="atk-layout-cell">Header</div>
</div>
<div class="atk-layout-row atk-layout-expand">
<div class="atk-layout-cell">Content</div>
</div>
<div class="atk-layout-row">
<div class="atk-layout-cell">Sticky Footer</div>
</div>
</div>

Wrappers

While the layout row will always take 100% width of your browser window, adding <div class="atk-wrapper"> inside of your content will automatically adjust width in a responsive way to fit properly on the device screen. It's recommended to always use wrappers inside the cell like this:

<div class="atk-layout">
<div class="atk-layout-row">
<div class="atk-layout-cell">
<div class="atk-wrapper">Header</div>
</div>
</div>
<div class="atk-layout-row atk-layout-expand">
<div class="atk-layout-cell">
<div class="atk-wrapper">Content</div>
</div>
</div>
<div class="atk-layout-row">
<div class="atk-layout-cell">
<div class="atk-wrapper">Footer</div>
</div>
</div>
</div>

Columns and Sidebars

It is possible to break your atk-layout-cell into multiple columns by adding atk-layout class on that div and inserting multiple divs with atk-layout-column as direct children like the next example demonstrates. Again, use of atk-layout-expand defines which column will expand but this time horizontally:

<div class="atk-layout">
<div class="atk-layout-row">
<div class="atk-layout-cell">
<div class="atk-wrapper">Header</div>
</div>
</div>
<div class="atk-layout-row atk-layout-expand">
<div class="atk-layout-cell atk-layout">
<div class="atk-layout-column">Left Sidebar</div>
<div class="atk-layout-column atk-layout-expand">
<div class="atk-wrapper">Content</div>
</div>
<div class="atk-layout-column">Right Sidebar</div>
</div>
</div>
<div class="atk-layout-row">
<div class="atk-layout-cell">
<div class="atk-wrapper">Footer</div>
</div>
</div>
</div>

Vertical alignment of content

Layout system in Agile CSS allows you to easily align column content vertically and display it in the middle of the screen by using one of atk-align-top, atk-align-middle and atk-align-bottom classes. This is a perfect approach to center your log-in box.

<div class="atk-layout">
<div class="atk-layout-row">
<div class="atk-layout-cell">Header</div>
</div>
<div class="atk-layout-row atk-layout-expand">
<div class="atk-layout-cell atk-layout">
<div class="atk-layout-column atk-layout-expand atk-valign-middle">
Centered Content
</div>
</div>
</div>
<div class="atk-layout-row">
<div class="atk-layout-cell">Footer</div>
</div>
</div>

Nesting Layouts

Once you have defined your layout, if your UI requirements consist of multiple nested rows and columns, you can include atk-layout yet again with a new set of rows, however be sure to repeat the whole layout correctly.