To many, theming Bootstrap is a dirty word. Some complaints include: the framework is so large that I can’t be bothered, my website will look just like every other Bootstrap website, and it’s easier for me to just do it without a framework.
These are all valid arguments if you aren’t organized and using the power of LESS in Bootstrap theming.
I’ve put together a system for using LESS to speed up the process and give you a starting place for when you’re designing a new theme. With a little bit of planning, you can really start to leverage the power of Bootstrap.
Using a base theme
The first thing you need to do is setup a base LESS theme file. I prefer to use the SMACSS method for organizing my base file. Basically setup your file like so:
- Base: All base HTML tags. No IDs or Classes should be included here.
- Layout: Any CSS specific to your layout.
- Modules: Reusable components.
- State: States that are applied to a component like: error, success, and warning.
The Base section of the theme should only include semantic HTML tags like: <body>, <ul>, <p>, etc…
The Layout section should include layout specific code like headers and footers. The rule to follow is that if it appears once on a page it goes under layout, if it appears more than once, it’s a module.
Modules are reusable pieces of code like: tables, forms and buttons.
Finally, the State section should be reserved for state changes on a page or an element. For example, validation styles.
Component LESS files
To speed up the theming process, we’re going to break all of our components into their own LESS files. We’ll then use the @import rule to import them into our base theme. Why do we do this? Because it’s much more efficient to edit a number of small files compared with a 3,000 line CSS file.
The first LESS component file you need to create is one called lib.less. The lib or library file will contain all of our LESS variables and mixins. I’d recommend creating variables for things like: color palette, background colors, typography, links, borders, and basic layout styles like margin and padding.
For mixins, it’s a good idea to create one for any CSS3 code that relies on vendor prefixes. That way you can use a mixin keyword to include the styles instead of 3-4 lines of code per CSS3 element.
Once you’ve created your lib.less file, you’ll want to import it at the top of your base theme. It needs to load first because the variables that are set will be used throughout all the other component LESS files that are loaded later in the base LESS file.
The next thing you need to do is create a sub-directory off your CSS directory called components.
css/components
Within that directory, create a new LESS file for every component included with Bootstrap. This might seem like a bit of work and it is the first time. Once you have a base theme framework setup, you can reuse the code in the future.
Once you’ve setup all the files, start adding in custom CSS for each component. Don’t forget to import each component into your base theme under the Modules section. Keep in mind when you are adding styles to only edit the ones that are necessary for your theme. You don’t want to copy and paste all CSS properties; then using Bootstrap becomes a bit pointless. You want to leverage the power of the Bootstrap framework, and only change the properties that are specific to your theme.
While you’re creating your custom LESS components, I’d recommend creating an HTML style guide file. In that file, insert the markup required to render each component and test it out. Do this as you go so you catch any problems while they are still manageable to fix. If you are selling your theme, packaging this style guide in is a nice piece of added value you can pass on to your customers.
Once you’ve finished your style guide, compile your LESS files into vanilla CSS and you’re done. It will take a little work to do this the first time. However, once you have the foundation down, you can reuse the structure and component files.
A tip to consider is to try and keep all the look and feel configuration in your lib.less file. That way you can tweak your variables and create a new design with very little work. Sometimes simply switching colors, typography, and basic layout properties, combined with different HTML layouts can produce you a unique theme in a short period of time.
If you’re interested in learning more about using LESS in Bootstrap, I go deeper into depth on the subject in my new eBook Mastering Bootstrap. It will be released on July 8th and you can sign up for the newsletter to be notified when it’s available. You can also follow me on Twitter.
