Getting started with Agile CSS

Sometimes all the PHP goodness just needs to step away and give way to a skillful designer. Inside the copy of your Agile Toolkit create folder templates/default/page. Create file myplayground.html in there and put some text inside. Immediately this file should be accessible on http://localhost?page=myplayground. If you have installed under a different URL, add '?page=myplayground' at the end and you should see contents of your myplayground.html file.

For your reference, you can open atk4/templates/shared/page/playground.html which contains the testing page for Agile Toolkit standard styles. Throughout this documentation you will learn how to write efficient and clean HTML relying on Agile CSS

Grid Layouts

Grid layouts is a modern way of splitting your page into equally sized columns. Sometimes you would want to have 2 equal columns with different content, sometimes more. The Grid System explains and demonstrates what Grid System is. You don't need to download it, because Agile Toolkit has a built-in grid system support.

Let's start by creating two columns:

<div class="atk-row">
  <div class="span6">Left Column</div>
  <div class="span6">Right Column</div>

By default the whole width of the page is separated into 12 equal widths. Code above creates two columns each equal to 6 widths. You can create any combinations and as long as you have 12 widths in total, the columns should stay on the same row. You can also use the fact that they will wrap to display large amount of blocks on your page (such as images).


By placing template tags into your template, you will allow developer to substitute tag contents with dynamic content. Let's create a page containing a sidebar:

<div class="atk-row">
  <div class="span3"><?Sidebar?></div>
  <div class="span6"><?Content?></div>

You can also use the tags such as <?Sidebar> .... default sidebar HTML ....<?/?>. This way you don't need to clean pieces of your sample HTML code and the page will look consistent until dynamic content is implemented.


The goal of Agile Toolkit is to make User Interface manageable through PHP. Therefore columns can also be created and manipulated through PHP:

$left =$c->addColumn();
$left ->add('Text')->set('Left Column here');
$right->add('Text')->set('Right Column here');

The column object assumes that you are using 12-columns in total and will use 6/6 values. You can also specify percents to addColumn() in which case it will use "atk-flexy" class.

<div class="atk-flexy">
  <div style="width: 20%"><?Sidebar?></div>
  <div style="width: 80%"><?Content?></div>