Flexible, Extensible, Modern and Independent Web User Interface CSS framework focused on simplicity, aesthetic and consistency.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Agile CSS

Agile CSS is a modern web framework specifically designed for building extensible and flexible Web UI for applications.

Here are some of the items which make Agile CSS stand out from other CSS Frameworks:

  • Customization through LESS (CSS Extension)
    • define color swatches through LESS
    • define responsive viewports through Mixins
    • define sizing parameters through LESS
    • define base variables to control UI

Note: Once the above settings are defined, framework makes use of your settings by applying them on all the CSS elements. You also get to decide which units you want to use, if your layout will be flexible and how many columns you want in your grid system for each viewport (mobile, tablet, etc)

  • Extensibility through LESS

    • add more of your LESS code to define your own mix-ins
    • integrate with other frameworks
  • Strong implementation of various form styles

    • horizontal, vertical, stacked or minimal forms
    • combined form styles
    • field extensions
  • jQuery UI support

    • supports all 3rd party jQuery plugins which use jQuery UI styles
  • Integration with Agile Toolkit PHP

    • Add PHP code for your back-end that matches your theme
    • Your theme will work with all existing Agile Toolkit PHP apps

More information on Agile CSS

Where is everything?

We are supplying you with a working "playground", which is already configured with one of our themes. Start by looking at the following files:

Important Agile Toolkit CSS files


Most of the documentation is still work in progress, but there is the outline:

Getting Started

One great way to use Agile CSS is to download it along with PHP framework from http://agiletoolkit.org.

If you do want to focus on HTML theme only you would need to set up JADE and LESS compiler (We recommend using CodeKit on Mac) as well as go through the following steps:

  1. Clone Agile CSS inside any folder, e.g. /Sites/agiletoolkit-css/
  2. Add Sites/agiletoolkit-css/framework as a "Framework" into CodeKit.
  3. Create your own folder /Sites/project and also add it into Codekit as Project.
  4. Copy files from boilerplate/* inside your "project"
  5. OPTIONAL: Add agiletoolkit-css/playground as a "Project" into Codekit, if you want to change Agile CSS and submit contributions back.

Take a moment to test:

Customizing Icons

Because each project would want to have a slightly different set of icons, you can customize your icons, but you can use a stardard configuration as a foundation:

  1. go to http://fontello.com
  2. Drag font/config.json and drop it anywhere on the fontello.com page
  3. Customize icons, add custom glyphs then download webfont
  4. Replace your font folder with a new one
  5. Replace your css/fontello.css with thethe new one

License and Contributing to Agile CSS

Agile CSS has is distributed under MIT License, which means you can use it free of charge in your project. As exchange we ask you to help us:

  • Share your theme.less with others for free when you are done
  • If you have developed any new Widgets, please email us at css@agiletoolkit.org, we might get them included into our standard distribution.
  • Give us a mention on twitter (#agile-css) or Facebook.
  • Send us your feedback.

Community and Help

If you have any questions or would like to discuss Agile CSS, use Agile Toolkit forums: http://forum.agiletoolkit.org