You don’t need bootstrap

It will come to no surprise to anybody who has heard me speak that I am no friend to Bootstrap. One of my goals with the trainings that Four Kitchens does for Responsive Web Design at various Drupal events and for companies, is to give developers the tools they need to not using Bootstrap or other similar tools. I hope to clear up why I feel that Bootstrap is the wrong tool for most websites, and what you can use instead of it.

1. Anti-patterns

First off, Bootstrap supports far too many anti-patterns. An anti-pattern is a design idea that seem good, is reproduced often, but generally are bad ideas for a website. First off, Bootstrap does not give you a truly responsive design. It supports the idea that there should be 4 breakpoints based off of the idea that we are building websites to phones, tablets and desktops. This is contrary to the idea of designing and building a site based upon content, and ensuring the site is usable, no matter the device that views it. A good example on how devices do not fit into such discrete categories is the Samsung Galaxy Mega, which is either a large smartphone, or a small tablet. The design should work with such a device, even though it is not specifically a tablet or smartphone.

This is a problem in general with class-based grid systems as well, that we are limiting ourselves. Grids should work with the content itself, not impose a class structure. We should not limit ourselves to a 12 column layout with four breakpoints.Instead, let’s design our sites around the content, creating awesome mobile-first layouts. In short: We deserve better.

2. You should use YOUR design

Bootstrap sites all look the same, and all have the same front end code that is applied. Even the themes will apply a lot of styling that you might not need. But for your site, you should have as little CSS as possible to create YOUR design. Why should you be overriding something, when you can just use your own code from the beginning?

3. Better markup

I hate having excess classes, and non-semantic classes littering my markup. I want my site to be clean, easy to read, and have as little interference as possible when I am creating markup. Besides my desire for clean markup, there are also practical reasons for not wanting this class-based system. Many CMSs, Drupal included, have their own opinion and method for printing out markup and classes and having to put Bootstrap classes throughout the markup is very difficult. Yes, it can be done, and yes, there are ways of doing it. But, it will take far more time and energy than just creating your own custom CSS from the beginning.

4. Sass makes it possible

This is the point in my arguments that I usually get the reaction of, “Yes, but I need to make quick prototypes, and I do not have the time to create custom CSS from day 1.” This was true, before the Sass community started making pluggable extensions to Compass to allow quick and easy prototypes to be made with 100% custom code. Not only can you do this with custom code, but you are writing production-ready code from day 1 with your prototype. Team Sass has done a large amount of work to allow custom grids, media queries, and styling incredibly easy. You can do it, and these tools will make it possible.

What Bootstrap is good for

I highly recommend not using Bootstrap, and would never advocate its use on a live site. That being said, it is not all bad, and has been made by a team of amazing engineers and designers to give some great ideas to the world. First off, it is a good way to learn, and see how some interesting styling and JavaScript can be used. If you are new to front end work, or want to see how responsive web design works at a fundamental level, check out the code. It is a great way of learning how fundamentally some of these front end examples work. Also, if you are building a back end administration page, that is only used internally, Bootstrap is a great tool to give you interesting UI pieces without having to do a full design. As this code will not need to be perfectly performant, and will not matter if its design steals from other UI elements, use Bootstrap.

Wrap up

Do not use Bootstrap. No, really don’t. You can do better, you can design better, and you can build your code better. Using a CSS preprocessor like Sass will allow you to still have the rapid prototyping you need, and the community tools within Sass will be your bread and butter in this regard.