Agile CSS can be used out-of-the-box without any additional dependencies. Simply download and unpack anywhere on your hard-drive.Download Agile CSS
Agile CSS differs from other frameworks by focusing on flexibility and reusability of its design elements. The most basic components in Agile CSS bring a lot of utility into HTML.
The sample box on the right was entirely composed out of standard classes without the need to write even a single line of CSS code:
<div class="atk-box atk-move-right atk-col-3 atk-swatch-ink">
Hello from Agile CSS
Inside this short snippet of HTML we definedpalette, shape, position, sizeandspacingof our element.
As a first step working with Agile Toolkit, you need to learn about all the existing components and use them for their purpose.
The benefit of using standard styling tools is that Agile CSS makes sure that any combination of components works reliably and that your element interacts properly with surrounding elements. For example, you could have used dark background yourself, but you would have to also think about font color. Agile Toolkit automatically comes up with a best text color for your selected background.
With a wide varietty of different devices it's no longer optimal to adopt your design for specific screen sizes. In Agile CSS you define viewports based around your content.
Fill your page with content, and measure what's the smallest device width that can display your content reliably. Use the break point to define appearance on a narrower devices or configure stretching for larger devices. Agile CSS can easily shift your content between fixed and fluid layouts.
Agile CSS layouts are not based on Grid System, instead they will adopt different characteristics based on size of the viewport. Grid system is then used to arrange content inside areas of your layout.
You will find a familiar 12-column grid inside Agile Toolkit. The grid is responsive and can be switched to 6, 4, 3 or 2 columns on smaller devices.
In addition to Grid system, Agile CSS also offers you cell-based flexible sizing. Your cells will automatically adopt the necessary width to hold your content.
Both cell layouts and grid layouts are used in navigation bars, menus, forms, footers and side-bars.
Agile CSS contains an extensive library of HTML widgets you can easily use on your page. Unlike other frameworks, each widget does not come with a thick set of styles, instead widgets rely on base components.
A theme designer for Agile CSS will be introducing new widgets but when those are developed correctly, two characteristics will apply:
That means that aVertical Menucomponent can be placed inside left side-bar, top-menu pull-down or inisde grid column in the center of your page.