Assets

Overview

Assets are css, javascript, images etc that are used by an Area of your Application.

Assets need to live in following folder structure:

~/areas/area-name/assets/styles
~/areas/area-name/assets/scripts
~/areas/area-name/assets/images

Assets are specific to each area, if different parts of your Application do not need different styles and scripts (broadly speaking, we don't mean page-specific here) then you only need a single Area.

To include styles and scripts within your page, use this syntax:

<script type="text/javascript" src="/area-name.js"></script>
<link rel="stylesheet" type="text/css" href="/area-name.css"/>

The inheritance of AreaRegistrationBase for your Area Registration will automatically wire up handlers for these two js and css paths.

Preprocessing and Budling

Mustardblack currently uses dotLESS for CSS preprocessing and YUI.NET for javascript. Both of these need upgrading, send us a PR!

All .css and .less files under the assets/styles folder of each Area will get combined (appended) together in the order described below, and then processed as a whole. The output of this is what request to /area-name.css will return.

All .js files under the assets/scripts folder of each Area will get combined (appended) together in the order described below, and then processed as a whole. The output of this is what request to /area-name.js will return.

Preprocessing is done on the fly, as requests to /area-name.css/js are made. This means you don't need any grunt watch style file-watching going on to re-process. Changes made to any less/css/js are immediately reflected upon a page refresh.

The files are combined (appended) in depth-first, alphanumeric order by filename. So given the folder/file structure below:

~/areas/area-name/assets/styles/folder-a/file-a.less
~/areas/area-name/assets/styles/folder-a/file-b.less
~/areas/area-name/assets/styles/folder-a/folder-b/file-c.less
~/areas/area-name/assets/styles/folder-a/folder-c/file-d.less
~/areas/area-name/assets/styles/file-e.less
~/areas/area-name/assets/styles/file-f.less

the files will be combined together into this order:

file-c
file-d
file-a
file-b
file-e
file-f

because the deepest folders are included first.

This is useful for making folder structures like this:

~/areas/area-name/assets/styles/_reset/reset-styles.less
~/areas/area-name/assets/styles/libs/bootstrap.less
~/areas/area-name/assets/styles/typography.less
~/areas/area-name/assets/styles/buttons.less

Allowing you to separate out your styles logically.