Theme configuration file: principle

The theme configuration file allows to specify which files you want to concatenate and compress into a single file. It also provide the information to the html5 xsl code to generate the right link and scripts elements.

The Theme mechanism allows you to organize your css and javascripts in the way you want so you reuse them into a single css file or more.

There are severals reason to do this, it allows you to:
  • Keep your css and javascripts file organized by generic class, for fonts, list, images, tasks, etc... for example;
  • Reuse them in different contexts. For example, imagine the Themes client-1 and client-2, both Themes will list, images, tasks, but not necessarily the same fonts, layout and colors;
  • Concatenate them and compress them into a single style.min.css or script.min.js. This had the advantage of speeding up content loading by reducing the number of http requests per page (few calls instead of dozens of calls) and by reducing file size (comments and line breaks are wipe out, javascript are also obfuscated)
The theme configuration files simply tells:
  • which files you want to concatenate and compress (ex. list.css, images.css, etc...);
  • The destination file (ex. style.css, note that the plugin will create automaticall a style.css which is concatenated and a style.min.css with is also compressed);
  • The element that should reference the file in the final output and its attribute so it can render like this for example:
         
         <link 
         rel="stylesheet" 
         media="handheld, only screen and (max-device-width: 320px)" 
         href="style.min.css">