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.

Styles and Scripts

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 Bundling

Mustardblack currently uses dotLESS and/or libsass for CSS preprocessing and YUI.NET for javascript.

All .css and .less/.sass 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.

Register either LessCssPreprocessor or SassCssPreprocessor in the container depending on your wild desires. If you want to control how css is bundled differently per-Area within a single Application, replace the implementation of IAreaCssPreprocessorFinder in the container with one of your own.

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.

Images and other static assets

In development mode, images and other static assets can be access via the example path /assets/<area-name>/path/to/asset. Paths are case sensitive, and must be lowercase. This is because MustardBlack is intended to be hosted behind a CDN, which is probably case sensitive. Forcing lowercase is an extreme solution but currently protects against path and casing typos. PRs for better solutions welcome.