vanilla usage

##Usage

Vanilla was created to be aesthetically pleasing, easily modifiable, and a model for other themes.

###Structure

####Overview

Vanilla is a combination of HTML templates built in Handlebars and CSS facilitated by the Less preprocessor. Icons are supplied through an icon font (fonts/vanilla). Some graphics are provided in assets/, but Vanilla is not characterized by its images.

It has been structured with the expectation that it will be modified. Colors and paddings are easily adjusted with knowledge of CSS alone. Templates that govern the HTML structure of various elements (for example, the navigation bar, the drawer, buttons, and notify) are easily accessible. Modifying the templates, however, is best left to those with some knowledge of Handlebars and who have become acquainted with the structure of Adapt content. Sufficient knowledge of Handlebars is easily attained with resources on the internet. And the best way to get to know the structure of Adapt is to study its source code and to look for insight from the Adapt framework wiki.

####The Less
Less is a CSS preprocessor. It permits the use of variables inside style rules. While Vanilla does not contain a single .css file, all the .less files are converted to standard CSS during the build process.

Vanilla's variables and its Less files have been structured to facilitate incremental modifications. Look at less/color.less. Notice that comments separate it into three sections: Custom Colors, Main Colors, and Detailed Color Setup.

In Custom Colors, variables are assigned the six-digit hex representation of a color. This assignment attaches a human-readable name to a nearly indecipherable hex code. It is simply for convenience, but it tends to decrease mistakes. In the next section, these color variables are assigned to different color roles.

####The Templates

###Misc:

####Loading#### less/theme.less, templates/loading.hbs, assets/ajax-loader.gif

####Fonts#### less/variables.less, less/fonts.less,

####Icons#### less/variables.less, selection.json, fonts/vanilla.*

##Tips

Here are some techniques for getting the most from Vanilla:

• You can alter the look of Vanilla by adding classes.

• You can style a block to act as a divider