Note: I got chewed out at work over this post. It was worth it IMHO
Disclaimer: The thoughts in this article are my own and do not represent the opinions of my employer past, present or future.
I've been sick in bed the past few days. I tend to do a lot of reading when I'm down and I stumbled on a several articles criticizing the Bootstrap framework. (I also got going on Single Page Web Applications, but that's for a different time.) I got pretty motivated to express my opinions from my experience with the framework.
I've been utilizing the Bootstrap framework for over a year now. I've had a lot of success with it and it always amazes me how much hate it gets. I've spent a lot of time in their source code and I have a really good understanding of how everything works. I've done a lot of responsive work outside of Bootstrap and I'm pretty comfortable arguing for or against it.
This is one of the tag lines from Bootstrap's web site. Do I believe it's true? Yes, I do.
Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.
There is one big thing that gets overlooked a lot when looking at Bootstrap. Bootstrap is trying to do two big things. It's a responsive grid framework and a responsive UI framework. The UI part of the framework provides styled static elements like inputs and buttons, and also has a set of interactive components that work well on a smaller screen.
So what's with all the hate? I have a few reasons I've heard and theories I have.
I see a lot of this. There is a trade off though. Many single class elements end up with countless rules that get over ridden based on it's parents elements or the current media query. It's a trade off. Do you want more rules in your style sheet or more classes on your element?
- Utilize a CDN - There are several providers that serve up the full Bootstrap package over a CDN. A CDN will provides speed by caching the content and your browser will download it faster because it's on a different domain
- Build your own Bootstrap package - This is the less obvious choice, but you can really slim down the package by using their tool. You can also download their source code and create a custom build yourself.
- Do both 1 and 2 - There should be other static assets in your project. You might as well invest in the service.
There is a lot of truth behind this statement. Bootstrap is extremely popular right now because it's fairly new. jQuery had a similar buzz around it after it hit mainstream.
I couldn't disagree more. Bootstrap's consistent naming patterns make it ideal for large teams working on large projects. A fully custom responsive implementation requires a lot of documentation and communication across the team. The likely hood of a class being misused is pretty high. With Bootstrap, everyone can easily know how the grid works and work through new pages quickly. I've seen a large number of backend developers wire up pages using Bootstrap with ease. This introduces a level of efficiency that can be extremely challenging to replicate with a custom responsive implementation.
Did you expect to use Bootstrap and not have to code your own CSS? Checkout Wrap Bootstrap and see if you can tell if the sites are "exactly the same". I roll my eyes at this comment a lot. It is very common to come across websites that look stamped with the Bootstrap CSS, but imagine what these sites would look like without it.
Ok, that's nice. Don't want to be limited to 12 columns? That can be changed by a couple keystrokes in a LESS file. Don't like the default buttons and inputs? A little custom CSS will fix that. The only thing we can't do is recreate a design based on a non-grid layout. Most CSS responsive frameworks have limitations when working with non-grid based layouts. Just do whatever you want. Clever front end developers will figure out how to do it.
If it ain't broke, don't fix it. I really hate LESS. I've been using it heavily for a year now. I just hate it. I see too much bad code, improperly named global variables, hundreds of media queries that could be consolidated, and excessively over qualified selectors due to nesting. Bootstrap contains the ONLY LESS files I've seen that do something cool. They create loops for generating the CSS for the grid layout and calculate out exact widths with it.