To make CSS development easier Bootstrap makes use of LESS, a dynamic stylesheet language. LESS is a CSS extension which makes it easier for you and us to write better CSS.
How do we implement Bootstrap?
We use Sass to compile and minimize our CSS files. Sass is similar to LESS but gives us more power. We do not use the pre-compiled Bootstrap CSS file you can download from the Bootstrap site.
We are loading the following CSS files for our extensions:
- admin.css (loaded only for backend)
- site.css (loaded only for frontend)
- module.css (loaded only for extension modules)
Note: For Joomla 2.5 our custom CSS files are appended with -25 e.g. admin-25.css
All our CSS files are namespaced. For more info see: What are the .koowa styles for
Joomla 2.5
In Joomla 2.5 all our extensions are loading a custom bootstrap.css file by default. This CSS file contains only a subset of all Bootstrap CSS rules that we require. The bootstrap.css on Joomla 3.0 is 140kb while ours on Joomla 2.5 is 95kb, about 33% smaller.
Joomla 3
By default we never load any bootstrap file in Joomla 3.x. Instead we rely on the template to load the bootstrap file. This allows us to blend our extensions in with any Joomla 3 compatible template that uses Bootstrap.
FAQ’s
1. What are the .koowa styles for?
We are namespacing our CSS to make sure our custom CSS is only applied to the extension itself and cannot interfere with other extensions or templates.
A .koowa class is added to an outer div to make sure styles are only applied to the HTML elements inside this div. Koowa is the codename for our Nooku Framework. CSS classes using ‘koowa’ in the name are framework specific. You can find Nooku on Github.
2. What if a Joomla template does not make use of Bootstrap?
No problem. Our CSS is namespaced and we do not force load the bootstrap.css file in any of the Joomla versions.
Joomla 3.x provides a JHtmlBootstrap::loadCss() function. This function can be used to load the default bootstrap.css file that is distributed with Joomla. We never call this function ourselves.
It’s the responsibility of the template and designer to either call loadCss() or to provide their own CSS files. This gives our extensions out of the box interoperability with both Bootstrap and non-Bootstrap templates.
3. Is there an option to disable Bootstrap in Joomla 2.5?
There is, however you almost never need this. Some Joomla 2.5 templates are already shipped with a Bootstrap file. Loading Bootstrap here could have a negative impact. Loading an extra css file also means making additional requests.
In some cases however the template variables such as colors can get overwritten by our css rules. For those templates we built a “switch” to be able to disable bootstrap. Learn more about this “switch”.
4. Is there an option to enable Bootstrap in Joomla 3?
There is, however you almost never need this. Some Joomla 3 templates are designed to work without Bootstrap. Our extensions do not rely on bootstrap and will look good on these templates without a bootstrap file.
However loading our bootstrap file might make the website look just that little bit better in some cases. For these templates we built a “switch” to be able to enable bootstrap. Learn more about this “switch”.
For more information about Bootstrap also check out our developer documentation. Did we miss anything ? Let us know through our support forums.