CSS/JS Minification

Minifying (compressing and combining) your stylesheets and javascript files is one of the easiest ways to speed up your website. With HiFi, it is even easier. We have created tags for our templating system that will minify your assets files in a single step, and take case of all the details involved in regenerating the compressed file when one of the source files changes.

In order for automatic minification to work, you must store your CSS files in the assets/ui/styles folder and your scripts in assets/ui/scripts folder. That way, HiFi knows where to find them.


{% css 'layout,typography,homepage' media 'screen' min %}

The css tag takes a comma-separated list of file names. You don't need a path (you put all your stylesheets in the "styles" folder, right?) or the .css extension.

You can optionally specify the media attribute of the css. If you choose to leave this out, it will default to all. For obvious reasons, you cannot combine a print stylesheet with your screen stylesheets. You can certainly minify the styles for both media, but you must use two separate css tags.

If you include the min flag at the end—as in the example above—all of the stylesheets will be combined into a single file and compressed. While you are actively working on the site, you will want to leave off the min flag, which will cause all of the listed files to be included normally. Minified files are hard to debug!

We often will inline compiled CSS into the HTML to optimize site performance. You can do this with the css tag's "source" attribute like this:

<style> {% css "file1,file2.less,path/to/file3.less" source %} </style>


{% js 'jquery,jquery.cycle,jquery.validate,nmcDropDown,setup' min %}

The js tag works almost identically to the css tag. The only difference is that there is no media attribute.