CSS with .less
Within the theme’s css folder there are several less files.
Variables.less - this file contains many of the settings you will need to change at the start of a project. Please read the using variables section for more details.
BootstrapBase.less – this file brings in all the default files from bootstrap. It is unlikely that you will need to make any changes here
BootstrapCustom.less – This file brings compiles all the custom css/less files from the site, and brings in any of the default files from bootstrap that are needed directly by the theme. These files have been separated from the BootstrapBase.less file because ie8 and 9 cannot read css files over a certain length and will cut of all css past a given point. Due to the amount of css that is output here we were forced to separate them.
There are 2 reasons you may need to change this file. If you are including a new css file into the theme, such as from a plugin, you should import it at the bottom of this file in the same way as the other theme files.
The other possible reason is that you may need to use code from bootstrap which is not included here, such as a mixin. At the top of this file all the bootstrap files are included but commented out, so you can easily include any other files you need.
NB although using bootstrap to compile all the css and .less into one or two files has a lot of advantages, there are a couple of downsides you may come across:
- When using an inspector tool in your browser, you won’t be able to see on which line of which file a class is located, as the browser will see theme all as part of one long style sheet. Although in most cases it is easier to just work around this limitation, you can [more content needed here]
- If you make a syntax error in your css, it will stop the entire compiled css from loading in the browser, so you will see a radical change to the site you are viewing. Therefore it is worth checking the site in a browser fairly often to pick up any errors quickly and avoid having to comb back through large amounts of css. [more content needed here]
Theme-defaults – this file is the same across all themes and features some basic styling needed by to render the modules available in our CMS well. Generally you should not need to change this theme, but it can occasionally be easier to remove a style from here rather than overriding it in the custom css, so we have included the file within each theme to allow for this.
Mixins - This file includes a series of mixins we have written for use with our themes. These can be called from the theme-custom.less file where needed. If you are writing any new mixins please add them at the bottom of this file. see our section about mixins for more details.
Theme-custom –This is where the majority of your css should be written. It is the last file included in BootstrapCustom so the styles here will override all other css. Many of our themes already have some css here which is specific to the individual theme, which you can amend or add to as needed.
The files include a number of headings for organising the css, please try to organise your code logically throughtout these headings, and include new ones where needed, following the examples already in place.
To keep all the code consistent and easy for others to read, please stick to the following layout as much as possible:
See more about:
Using variables
Nesting classes
Media queries
Mixins
Or for more details on all elements of using .less, please visit:
http://getbootstrap.com/css/#less
http://lesscss.org/features/
