Cascading Stylesheets in Agile Toolkit

Cascading Stylesheets are quite powerful tool to change the look of your application. If you know CSS well you can implement many tweaks with no or very minor changes to HTML template files. This section will explain CSS structure of Agile Toolkit.

Default CSS file locations

You should probably know by now, that Agile Toolkit has a concept of "skins". By switching between different skins you can change set of template files. By default skin is set to "default" (although it used to be "jui" by default in 4.0 version). Skin can be changed inside index.php file as 2nd argument to "new Frontend(..)" constructor. By default this argument is omitted. If you wish to use another bundled skin called "elephant" you should have this in your index.php file:

$api=new Frontend('sample_project','elephant');   // Use something unique instead of sample_project

By default Agile Toolkit looks for templates inside the following directories:

  • templates/default/ (or templates/elephant/)
  • atk4/templates/default/ (or atk4/templates/elephant)
  • atk4/templates/shared/
Note: Never change files inside atk4 folder. Copy only the files you want to change into templates/ and then change there.

CSS files included by default

File which contains CSS includes is called "shared.html". It is also referred to as Application Template, because it applies to all the pages in your application. Initially atk4/templates/shared/shared.html is used.

Application template is using tag <?template?> to look up files and substitute with proper location. This technique allows your application to find files in the right directory and insert them right into outputted HTML.

  • css/jquery-ui.css — This file is compatible with jQuery UI Themeroller. You can use it to generate a new file for you (along with icons) and replace it completely with your own style.
  • css/atk-main.css — Here you can find CSS "reset" (removes browser-specific styles), Grid System 12 (allowing you to split your page horizontally into 12 columns), as well as many other elements typically used by Agile Toolkit layout. It's generally a good idea to keep this one unchanged and included, you can override some of the CSS properties later on
  • css/atk-visuals.css — Another portion of Agile Toolkit related stylesheets dealing with how things are presented in general
  • css/atk-icons.css — Agile Toolkit includes 128 great icons. Those are also used by several elements. To improve loading speed you can copy this file locally and clean up icon colors you don't need.
  • css/atk-gs10.css — Contains implementation of Grid System 10. This requires class "gs-10" on your document body to function and is highly recommended. This also defines form layouts
  • css/atk-gs10-fluid.css — Contains implementation of Fluid Grid System 10. It's very similar to GS-10 but will resize your layout relatively to screen size. This layout implementation is entirely built on CSS and therefore displays very high performance to layouts implemented by JavaScript frameworks.
  • css/atk-custom.css — This file is where your own customizations will go. Copy file into your templates/default and edit it there.

If you wish you can add additional stylesheet files here, just remember to properly enclose paths into "template" tag.