Customization
Styling
When customizing the style of the SelfService app, the infrastructure has been set up so that you only have to edit one file: src/Web/content/styles/less/custom.less. This is a LESS file. This file can contain new styles, and overrides of bootstrap styles and variables (see http://getbootstrap.com/customize/#less-variables for a list of possible variables to override).
This makes it very easy to style the app according to your preferences without having to modify multiple files in multiple places.
Since LESS is used as a pre-processor for CSS, it requires a compilation step.
Grunt is the automation tool used to compile the LESS files.
Installing grunt
From a command line, in the root of the selfservice directory:
npm install
After grunt and its dependencies are installed, you can run grunt from the command line.
Helpful commands
Here are a few commands that are helpful in building the application:
grunt
This will install the frontend dependencies and copy their files to the correct locations. Then it will build the less files into "main.css" and "main.min.css" (just a minified version of main.css). Run this command in order to get the application ready to run for the first time.
grunt less
This will build the less files. If you make any changes to the custom.less file, running this command will integrate those changes into the main.css and main.min.css files.
grunt watch:less
This is a convenience command. It is an ongoing task that "watches" the less files for changes, and automatically rebuilds them when changes occur. This is very useful for quick style development and allows you to avoid running "grunt less" with every change you make to custom.less.