Style information should always be contained in a file separate to the functioning code. In Evolve this can be produced in one of two ways.
Each new visualization / layout should have its own stylesheet with the filename the same as it’s matching JavaScript file, this file should be placed in the same folder as the JavaScript file.
CSS
Language: CSS
File Extension: .css
Reference: www.w3schools.com/css/
CSS is the most common format for producing stylesheets in web development, this method requires no building of the code but does not give you access to the global style variables that are available through Evolve.
For more information on CSS development see the reference linked above.
LESS
Language: LESS
File Extension: .less
Reference: lesscss.org
Tools: winless.org/
LESS lets you to be more flexible with the styles you write and allows the use of methods & variables (amongst other things) when developing a style file. This LESS file is then compiled to a CSS output.
Through less you can gain access to global theme variables by adding the following to the top of your style file. See LESS: Global Variables for a full list of variables available.
@import "../variables";
LESS files are automatically compiled by Evolve when they are placed in the correct location and ‘Apply Themes’ is run through Evolve Designer. To compile LESS files outside of Evolve and learn more about LESS and its development take a look at the tools and references above.
