How I learnt to like Bootstrap

A couple of days ago, I saw a fellow French developer say how much he hates (Twitter) Bootstrap for websites on Twitter. And I saw a couple of fellow French developers agree with him.

This reminded me that no so long ago, I was a fervent defender of t…

A couple of days ago, I saw a fellow French developer say how much he hates (Twitter) Bootstrap for websites on Twitter. And I saw a couple of fellow French developers agree with him.

Twitter Bootstrap 3

This reminded me that no so long ago, I was a fervent defender of the tell “Bootstrap is good for prototypes and back offices or stuff like this”.

Until a recent project where I finally learnt to like Bootstrap, even for websites. But let’s back up a little bit!

How did we get there

I recently got hired for quite a big project as the only frontend developer in a team of a dozen of developers. The design itself is fairly complex since it involves various layouts, multiple themes, a lot of forms and a bunch of pages. Thankfully, Symfony 2 and its template engine Twig make it a lot easier to manage but that’s not the point.

So when I started working on this project, the project manager basically told me I would be the only one to deal with the front end which sounded great to me because other developers were mostly backend devs.

Hugo, we’ll use Bootstrap.
— NOOOOOO!

And then he told me what I didn’t want to hear: “we will use Twitter Bootstrap” and I was like “NOOOO!!”.

But then he said something even worse: “Bootstrap 2.3” and then I was like “NOOOOOOOO!!” (note the number of O is increasing).

Since Bootstrap 3 was still in RC back then, it wasn’t possible for us to use it. Thankfully a couple of days later, it got officially released so we jumped onto it and moved the little frontend we had already done to v3.

The beginning

At first, it was a pain in the ass for me to work with Bootstrap. Mostly because I haven’t ever used it before. Especially the grid system which didn’t feel intuitive to me: .container, .row, .col-md-*? What is this?

But also because I thought my CSS skills were good enough so I don’t have to use some framework. And in a way, I was right: I don’t need a CSS framework to make a website. Now, even if I don’t need it doesn’t mean I shouldn’t use it at all.

It’s been a couple of weeks now we are working on this project and picking Bootstrap has to be one of the wisest moves we have taken so far.

Coding fast

This is the main reason that makes me like Bootstrap on this project: I can code really fast. Making a component displaying a row of product with their image, title and description takes me no more than a couple of minutes thanks to Bootstrap’s powerful grid system and its collection of components.

Also it provides a lot of helper classes like .pull-left, .clearfix and a good starter for responsiveness.

Less dependencies

This heading can be confusing: I am not talking about LESS, the CSS preprocessor. I mean that using Bootstrap really reduces the number of dependencies used across a project.

Carousel? Check. No need of FancyJqueryAnythingCarouselSlider.js. Icon fonts? Check. No need of FontAwesome. Modal? Check. Dropdowns? Tabs? Tooltips? Check, check, check. It may sounds trivial, but not having thousands of dependencies is really important to keep things maintainable.

Of course we still have other dependencies than Bootstrap like jQuery UI (which could deserve a similar article I guess), underscore.js and quite a couple of other things but I can’t imagine the number of external dependencies we would have right now if we were not using Bootstrap.

So where did it start?

I believe this whole “Bootstrap is evil” thing started shortly after Twitter Bootstrap 2.x came out. Many people started creating websites with nothing more than the default collection of composents without even trying to customize them or to find a special scheme.

At this point, every sites looked alike and it was kind of annoying for sure. But I feel like this time is over and now most Bootstrap powered sites are using it wisely, adding their own custom design on top of Bootstrap components. That’s what Bootstrap is: a backbone for the site.

Final words

In the end, I think I’ve changed my mind on Bootstrap and I really start to understand what it’s for. On big websites, having a skeleton to work on is important. It’s like managing a huge JavaScript structure without a library (could it be jQuery, MooTools, whatever).

Long story short: Bootstrap is not that bad. Just don’t use it raw. Cook it your way first.


Print Share Comment Cite Upload Translate
APA
Hugo “Kitty” Giraudel | Sciencx (2024-03-29T10:04:38+00:00) » How I learnt to like Bootstrap. Retrieved from https://www.scien.cx/2013/11/06/how-i-learnt-to-like-bootstrap/.
MLA
" » How I learnt to like Bootstrap." Hugo “Kitty” Giraudel | Sciencx - Wednesday November 6, 2013, https://www.scien.cx/2013/11/06/how-i-learnt-to-like-bootstrap/
HARVARD
Hugo “Kitty” Giraudel | Sciencx Wednesday November 6, 2013 » How I learnt to like Bootstrap., viewed 2024-03-29T10:04:38+00:00,<https://www.scien.cx/2013/11/06/how-i-learnt-to-like-bootstrap/>
VANCOUVER
Hugo “Kitty” Giraudel | Sciencx - » How I learnt to like Bootstrap. [Internet]. [Accessed 2024-03-29T10:04:38+00:00]. Available from: https://www.scien.cx/2013/11/06/how-i-learnt-to-like-bootstrap/
CHICAGO
" » How I learnt to like Bootstrap." Hugo “Kitty” Giraudel | Sciencx - Accessed 2024-03-29T10:04:38+00:00. https://www.scien.cx/2013/11/06/how-i-learnt-to-like-bootstrap/
IEEE
" » How I learnt to like Bootstrap." Hugo “Kitty” Giraudel | Sciencx [Online]. Available: https://www.scien.cx/2013/11/06/how-i-learnt-to-like-bootstrap/. [Accessed: 2024-03-29T10:04:38+00:00]
rf:citation
» How I learnt to like Bootstrap | Hugo “Kitty” Giraudel | Sciencx | https://www.scien.cx/2013/11/06/how-i-learnt-to-like-bootstrap/ | 2024-03-29T10:04:38+00:00
https://github.com/addpipe/simple-recorderjs-demo