JoomlaPure CSS

The Purecss Framework

JoomlaPure is based on the YUI purecss framework. A fully featured, modular and scalable, object orientated css framework written with SMACSS conventions throughout.

Purecss doesn't force any styles on your site leaving it looking like thousands of others. It is built to stay out of your way so you can add your styles on top.

Pure also plays well with bootstrap, so if you are using an extension that requires, for example, bootstrap modals, you can include the bootstrap modal javascript and css files without having to load the whole framework.

The full purecss library weighs in at 4.3KB when minified and gzipped!

JoomlaPure Template CSS Options

JoomlaPure gives you three main options when it comes to adding your css modules.

  1. Custom - Load selected css modules from the Yahoo content delivery network plus a local stylesheet called style.css.
  2. Local - Loads a full local copy of the framework plus style.css.
  3. None - Loads style.css alone.

Using the Custom Option

When selecting the custom option, another panel called 'CSS Pick and mix' is revealed.

In this area you can turn selected modules on and off and the template will calculate the html to load the css from Yahoo's CDN in one single file using the combo loader.

If all modules are selected, the html will revert to the call for the full file without using the combo loader.

You can also use this option to customise the output (load additional files or use an alternative CDN) as the css html is fully editable.

Using the Local Option

When selecting the local option, the template will load a full local minimised copy of the framework and the styles.css file located in the templates css folder.

This option is good for people who are not familiar with css pre-processors and just want to write some standard css.

Using the 'None' Option

When selecting 'none' only the style.css file will be loaded. This enables you to remove the framework all together and use something else or use the less or scss files provided.

Purecss is written as just that - pure css. This means it can be used with your favourite pre-processor without anyone telling you which one you should be using. Both less and scss files are included, broken down into modules to allow you to write in your favourite style whilst just including the parts of the framework you need.

These also include 2 modules not included in the standard package: