Bootstrap: The Pros and the Cons
I was discussing with a fellow developer friend of mine the other day about which development tools we use to speed up our front-end development cycle. Up until recently he has been working with pure CSS, without a framework or any form of development preprocessor tools. With this in mind I recommended Twitter’s Bootstrap 3 to him, a framework I use in most of the projects I work on, and he said he would look into it.
A little while later I asked him if he was planning on using the framework yet. He told me he wasn’t and reeled off a few reasons why, which included:
- Too many features he claimed he wouldn’t need/use
- A pain to set up
- Bloated HTML with bootstrap classes
Fairly valid points when you’re coming from a strictly raw HTML/css background, but I believe these can be overcome with the correct approach.
In this post I’m going to try and outline the pros and cons of using the Twitter Bootstrap 3 framework as a core part of your front-end development process, some of which I discussed with the aforementioned friend, and others I have encountered while researching the framework myself.
Let’s outline the cons, and I’ll show you how you can overcome them, and even turn them into pros.
“There’s a lot of stuff I won’t need or use”
A valid point, if you know exactly what’s going to be used in your project now, and in the future. If this is the case, the official Bootstrap website offers a customizer tool so you can download exactly which components you’ll need in your project.
Alternatively, I would highly recommend the raw LESS version of bootstrap, available as a .zip from the official website, or can be pulled in effortlessly using Bower. With this you can pull in the exact components you need at any time as your project progresses and expands.
“It’s a pain to set up”
Following on from the above, using Bower and LESS in your project makes use of third-party frameworks and plugins a breeze. Just add the package to your project,
@import the relevant files, and you’re away.
For assistance in setting up a precompiler environment, please see Craig’s post on gulp.js.
If you’re unfamiliar with LESS and work on the front-end of projects regularly, I would urge you to look into it and merge it into future projects. Since adding it to my workflow, I’ve found it’s painful working without it!
“My HTML is so bloated!”
Being new to Bootstrap (or any framework for that matter) you go straight to the docs and follow the examples listed there. This is where you can go wrong straight off the bat. The official docs use a string of multiple classes just to achieve one form of styling. For example, a large button with primary styling requires the following classes on the desired element.
<a class="btn btn-primary btn-lg">
Couple this with a class for any optional styling you want to add, and you’ll soon find your HTML hugely unreadable, and not ideal for page load either I might add.
So how do I fix this? LESS. Each class in the Bootstrap docs can be used as a ‘mixin’ in LESS. Not sure what a mixin is? Basically, a mixin allows you to reuse blocks of CSS styling throughout your LESS stylesheet. This allows for more consistent styling and reduces repeated code.
Your HTML should be semantic, so your classes should have appropriate meaning. One class that explains what the content is, and additional classes to explain why the content differs from the standard class. Bootstrap isn’t good at following this practice, but the use of LESS allows you to alleviate the problem yourself.
“But every bootstrap site you see looks the same!”
I’ll agree, there are a lot of “samey samey” looking bootstrap-based websites out there, usually due to not putting in the effort to customize the theme, or poor design. But that doesn’t mean that your project will end up the same does it? Not at all!
The LESS source is also variable-driven, meaning many aspects of the styling can be modified incredibly easily.
“But the code isn’t mine, so I don’t know how it works!”
Ok, I’ll give you this one, but do you have the time to create a mobile-first, responsive CSS framework that’s been fully tested for cross-browser compatibility and that can be used across multiple projects as needed? I for one don’t, and as frameworks go, Bootstrap is pretty user-friendly and packed with features.
The Pros in Short:
Using Bower to import the LESS source, you can import it straight into your project and begin using the scaffolding and components.
Everything from scaffolding to typography is controlled via a single variables sheet, which can be overridden to create the styles you need.
Ready built mixins
As mentioned, all elements of bootstrap can be called as mixins, so you can keep conventional element styling throughout your project.
Include what you need
Want to streamline the stylesheet/script file? That’s simple, simply include what you need and leave out anything that doesn’t float your metaphorical boat. Need it at a later date? Just re-include and recompile. It’s as simple as that.
Mobile first as of Bootstrap 3
In a world of multiple screen sizes and responsive development becoming increasingly more important, it’s ideal to find a framework that can accommodate this from the start, so you can make your website look great on any screen.
Great grid system
Bootstrap makes use of a 12-column grid percentage width grid, which is great if the design follows the same grid system, but with the power of LESS, you can even use decimal value columns to control the layout.
A huge factor is that it will save you HEAPS of time in the development process, which, as you can imagine, is important if you’re working on multiple projects concurrently.
Sure, Bootstrap isn’t perfect from the get-go but the correct development environment can really make it work great for most projects. As mentioned, unless you can invest the time in creating a fresh framework that can be used well for multiple projects, Bootstrap is definitely a great way to go. You just need to experiment with the features.
Stay tuned for a series of more bootstrap/responsive development posts from me