What is Bootstrap?
Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for text, forms, buttons, navigation and other components and is the default css framework used by Joomla 3.
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
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.
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.