use LESS instead of pure CSS

[mpoehler]

LESS is a CSS preprocessor. This means, the CSS will be generated from the LESS files. That has some impacts for the CSS development cycle. While there are some help from the Chrome Dev Tools using LESS with Source-Map files and auto-reload of changed CSS files, there is a bitter pill to eat: Every change in a LESS file must be compiled into the CSS file and served thru the devserver to see the changes in the browser.

A possible solution for the development cycle is starting a grunt watch task, which automatically compiles the LESS files to CSS files whenever a LESS file is changed. Together with the Chrome DevTools support for source maps (which are also generated by the LESS compiler) and auto-reload of CSS files the development cycle should be pretty.

In the production build, the generation of source maps can be skipped, or they will be skipped when copy the grunt-target files to the exploded war directory.

[mpoehler]

A grunt watch task is not necessary. LESS is supported by modern browsers, you can use it just with

. This implies that you use less files in the dev version directly and deliver a compiled version in the production version. Chrome DevTool support with auto-reload and workspace setting makes it really easy.

[mpoehler]

Nice article about the background: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial