Yesterday saw the release of Twitter Bootstrap version 2.0.3.
We’ve been waiting for this release for quite a while as we’ve had a number of improvements in the pipeline.
The biggest addition being probably the most important since the plugin was first released: a LESS compiler for Bootstrap within your WordPress site!
What is LESS and what does compiling mean?
You can think of LESS as “dynamic” CSS.
If you’re at all familiar with Cascading Style Sheets (CSS) you’ll know there’s nothing dynamic about it. You define a style for an element and that’s that.
If you want to also apply the same style given to one element to another element, you have to basically repeat the style.
With LESS you have variables, functions and operations, making your styling much more… dynamic. You create a LESS “stylesheet” instead of a CSS stylesheet and compile it into CSS.
It makes creating your CSS much quicker in the long run.
The rest of this article outlines how to enable and use the LESS compiler within the WordPress Twitter Bootstrap plugin.
How does this relate to Twitter Bootstrap?
Twitter Bootstrap uses LESS to generate its CSS components.
Up until now, the WordPress Twitter Bootstrap CSS plugin allowed you to include the original CSS available from the Twitter Bootstrap site. But there was no way to customize any of it to fit your theme.
With version 2.0.3, now you can! We have included an interface that allows you to finely tune the main variables for your Twitter Bootstrap CSS.
There is now a menu option within the plugin’s main menu to access the options available for customization.
Most of the major Bootstrap LESS variables are included and for colours you are free to edit the text directly using variables and operations, or you can choose a colour directly using the colour picker provided.
Also kudos has to go out to LESSCPHP – a PHP-based LESS compiler library which we use to crunch the Bootstrap LESS.
How to enable the LESS compiler feature
By default, for the sake of some small performance gains the LESS compiler feature is not enabled by default.
To enable the LESS Compiler feature of the plugin, follow the steps shown in the image below:
How To Enable the LESS Compiler
Features of the LESS compiler for the Twitter Bootstrap plugin for WordPress
The LESS compiler feature of the plugin allows you to make full use of LESS variables, operations and mixins.
User input data validation
Since it is practically impossible to fully validate what you enter into the LESS fields we provided, we have done little in the way of validating correct LESS values.
The following are important points to note about how the compiler validates data:
- For colour fields, if you enter a value that is a number between 3 ~ 6 digits long, we assume you are entering a hex value for the colour and treat it accordingly with or without the hash (‘#’)
- For ‘size’ fields, such a font size for example, if you enter a number we assume you mean pixels (‘px’) and treat it accordingly. If you want, you can specify ’em’ or ‘pt’.
- You can reset all fields to default – this will run the LESS compiler on default Twitter Bootstrap variables so your CSS result will be identical to the standard Bootstrap CSS values.
- Everything else goes! If you enter invalid data, the compilation will in all likelihood fail. So be careful.
LESS Compiler Variables
Depending on the variable type, there were be slightly different interface options.
Take a look at the image below and the explanation of each one that follows:
LESS Compiler Variable Options
- For colours you can select the colour you want directly using a colour picker widget.
- Again for colours, if you don’t want to use a standard hex colour, you can input LESS options directly if you check this box. Check the box will remove the colour picker and allow you to edit it directly.
- This is the text field for editing directly.
- For convenience we have provided the Twitter Bootstrap default value for this variable.
- For convenience we have provided the name of the LESS variable in this case so you can specify a value for it here, and refer to it later on.
Precedence of CSS includes
Consider the following scenarios for the inclusion of your Twitter Bootstrap CSS library in your website:
- If you have enabled the LESS compiler and run a successful compilation, your website will always include your custom LESS-compiled CSS file.
- If you have enabled the LESS compiler and not run a successful compilation or the compiled file has been removed, your website will default to the standard Twitter Bootstrap CSS.
- If LESS compiler option is disabled, regardless of previous successful compilations, your website will default to the standard Twitter Bootstrap CSS.
Download LESS Compiled CSS file
You will know if you have a compiled CSS file on your site if the black button on the LESS compiler page is enabled.
With this button, you can download the CSS file to your computer to review it. Right-click and ‘Save as…’ to download the file.
Get the WordPress Twitter Bootstrap plugin today!
For more information and documentation on the plugin, please see the plugin home page here.
If you want to see more details of the plugin and download it, you can grab it from the WordPress.org repository.
