Bootstrap: You’re Doing It Wrong

Bootstrap: You’re Doing It Wrong

JANUARY 27, 2014
Bootstrap is a powerful web presentation framework formerly known as Twitter Bootstrap. I want to address some misconceptions about the framework and describe ways people use Bootstrap incorrectly. I will reveal the causes and offer corrections. I do not claim that everyone should use Bootstrap but I believe the majority of sites would benefit from Bootstrap or a similar framework.

Bootstrap came to be in the best way for a framework. It was extracted from a working application and organized for reuse. Bootstrap was extracted from Twitter’s web site for use across all of Twitter’s web UIs. In a similar manner, Ruby on Rails was extracted from Basecamp. Frameworks created in this way are more likely to be useful than those based on theories of best practice.

Bootstrap is not the only option for a front-end web framework, but it is the most popular. I believe that everyone should base their CSS on a framework as their is no point recreating common elements and correcting the common shortcomings in CSS browser support. There are lightweight libraries available which only normalize layout across browsers while others also provide responsive layout across multiple form factors.

It is common to hear that Bootstrap is bloated and limits your options if you adopt it. Another complaint is that Bootstrap tries to be a theme and not just a presentation framework. These attitudes are articulately expressed by my friend Tim G. Thomas in a recent presentation. Please take a moment to watch his talk from 17:23 to 20:05. You should watch the entire talk if you have the time.

Tim G. Thomas: A Developer’s Guide to Design Frameworks (and More!)

My criticisms of Tim’s opinions are not criticisms of Tim. His opinions about Bootstrap are common misconceptions. Here are Tim’s comments along with my evaluation of their accuracy:

Comprehensive – True
Huge, Gargantuan – False
Does absolutely everything for you – False
The goal is to do everything for you – False
You don’t need a designer – False
Everything will be fine and happy; rainbows and Unicorns – False
Good for rapid prototyping only if you never plan to release your code into production – False
Paints you into a corner – False
Difficult to extend on top of it – False
Good for Personal Tools – True
Be aware of its strengths and limitations – True
It does have quite a few limitations – False
There are themes you can download – True
There are people specializing in creating Bootstrap themes – True
This is a “red flag” – False
You can get started with it quickly – True
You have to read through a lot of documentation. – True
Low in efficiency – False
You learn a lot with it but you don’t learn CSS – True
It’s impossible to know exactly what is going on where – False
Not extensible unless you are a professional Bootstrap theme designer – False
I believe Tim’s misunderstanding and that of others like him comes from experience using Bootstrap incorrectly. Here are my recommendations for using Bootstrap correctly:

Learn CSS.
Anyone considering using Bootstrap, or any other web presentation framework, must first learn CSS. This is not optional. If you are building web UIs, you must understand the universally used layout technology. Bootstrap is not meant to teach you CSS. If you paint yourself into a corner using Bootstrap because you do not understand CSS, you are responsible for your situation. Be a professional. Learn your medium. If you use Bootstrap assuming you don’t need to know CSS, it’s not the framework’s fault when things go awry.
Use a CSS meta syntax.
Anyone building web UIs these days, should use a CSS meta syntax. There are two options, LESS and SASS. SASS has two syntaxes, the more modern and recommended syntax is SCSS but I only hear people refer to it as SASS. Pick one, LESS or SASS I do not care which, and use it to generate your static CSS for display. Just do it. You will not regret it. To do otherwise is to waste time, limit productivity and be prone to error.
Use the Bootstrap LESS source code.
Using static CSS is the number one mistake people make when using Bootstrap. Tim says he had the unfortunate job of trying to extend on top of Bootstrap and finally recommended that his client “get rid of the whole thing”. I understand this sentiment. If I did not understand Bootstrap and was told to extend on top of static CSS generated from the framework, I would probably do the same. It is easy to understand what is going on where if you use the LESS source and not static CSS.The Bootstrap team encourages this mistake. They actively encourage users to download the entire framework as static CSS on their home page. To be fair, they also have a link to download the LESS source but I recommend cloning the source from the GitHub repository instead. This way you can easily retrieve and experiment with updates in your own projects.
The Bootstrap development team further exacerbates the issue by providing a “customize and download” form. This form encourages you to generate custom, static CSS. It presents you with options to customize the compiled CSS. On this page, you will see all of the modules available within Bootstrap and you can select any that you want in your project. You will also see the variables available for customization within Bootstrap. There are fields to customize each value. Although the result is still static CSS, these options provide you with the opportunity to counter the assertion that all Bootstrap sites look alike. If you study this page, you can learn a great deal about how to use Bootstrap effectively.

Tim recommends using the full framework with default styling for personal or internal projects. I agree but with the caveat that you use the LESS source to generate your CSS. While a site may begin life as a personal or internal project, these things can grow beyond their initial intentions. Starting with the LESS source keeps your options open with little overhead in taking the site live.

Using the Bootstrap LESS source forces your hand in the choice between LESS and SASS, but if you choose to use Bootstrap, you ipso facto choose LESS as well. I’ve heard that if you have a Rails application, you should use Bootstrap-SASS. This annoys me because there is nothing inherently better about SASS just because the Rails team chose it as the default. The Rails team made Prototype the default JavaScript framework for years after most developers replaced it with jQuery immediately upon creating a new Rails project.

Bootstrap is a LESS project. Use LESS with Bootstrap. There is no advantage to using SASS. The SASS port exists to appease Rails snobs that think the team has some special insight into your application’s requirements when choosing their defaults. The Rails team chooses reasonable defaults, but there is no reason you should stick with them all and I don’t know anyone who does. The use of SASS is no different than any other default that you may replace if your needs benefit from that choice.

Be selective.
You don’t have to use every feature of Bootstrap in your production app. Bootstrap is a buffet. You can certainly use the entire framework with it’s default configuration to quickly generate a UI that handles multiple browsers and formats gracefully. Bootstrap does not do everything for you, but it provides a set of reasonable defaults for you to choose from. Although the framework is comprehensive, you don’t have to use it all or any specific part of it.In addition to the LESS code, bootstrap includes JavaScript components. The JavaScript libraries are a convenience and can be included or excluded as you see fit. The JavaScript libraries are jQuery plugins for common use cases. These plugins work well with Bootstrap styles and elements by default.
Read all of the documentation.
Become familiar with the elements of Bootstrap you choose to use in your site. This is not only true for Bootstrap. You should do this for any framework or library you select for your project.Tim identified the need to read a lot of documentation as a shortcoming of Bootstrap. Why is documentation a shortcoming? Thorough documentation is an asset. The Bootstrap documentation is well organized. It is easy to find the section relevant to your questions.
Study the Bootstrap source.
The bootstrap LESS source is very well organized and easy to read. It is organized into modules of increasing granularity. This is one reason it’s written in LESS. Notice how bootstrap.less simply includes each of the component files. You can follow the includes to see what modules make up each Bootstrap feature. There is no requirement that you include bootstrap.less in your project. You can include only the modules that are suitable for your needs in an a la carte manner. Bootstrap is imminently extensible and customizable.
Avoid looking like a “Bootstrap site”.
A common complaint against Bootstrap is that all Bootstrap sites look alike. It isn’t difficult to make bootstrap distinctive and follow a custom design. On client applications, I include the bootstrap LESS libraries, then my own overrides. I usually grab the LESS from a Bootswatch that approximates the site design, then I begin tweaking from there to meet the designer’s specifications. This allows me to start with overrides from a consistent layout and tweak it to my needs. This pattern has served me and my clients well.
Use a Bootstrap template, if you do not have access to a designer.
Yes, there are people making a living creating custom styles and themes based on Bootstrap. I do not see this as a shortcoming of the framework in any way.I am not a designer. My personal site is built on WordPress with Bootstrap. Because I don’t do web design, I bought a simple design template. After looking at many templates, WordPress themes etc., I chose a template based on bootstrap. I liked it best of all the templates I reviewed and it had the added benefit that I wouldn’t have to convert the styles to use bootstrap. Even so, I’ve made such a conversion before and it wasn’t difficult. I don’t think it looks like a Bootstrap site. It looks sufficiently distinctive for my needs.
The template I purchased was not a WordPress theme so I chose a base WordPress theme that depends on the bootstrap LESS source and allows extensibility through custom LESS. I created a child theme using my custom template. I ripped out all the default Bootstrap styles in the template in order to depend on the bootstrap LESS in the base theme. I ended up with few unique styles and overrides from the template that I purchased and let Bootstrap defaults from the base theme handle the rest.

I made a few overrides of Bootstrap defaults in custom LESS. I had some issues overriding a few defaults. I won’t deny that I made some ugly hacks. It wasn’t worth going any further for my simple blog. If this were a client site, I would have done things cleaner, but I wouldn’t have had to deal with the overhead of WordPress either.

If possible, use a designer.
The Bootstrap website never suggests that you do not need a designer. Bootstrap is not necessarily a “theme” but it can mistakenly be used in that manner. By default, Bootstrap styles default HTML elements in a more pleasing manner than the browser defaults. You should use these default styles only as a starting point and customize them to suit your designer’s specifications.Bootstrap does not limit extensibility. In the past, it was difficult to customize certain elements provided by bootstrap, especially the top bar. The framework has matured and become more configurable with subsequent releases. Although still not flawless in this regard, it is much improved.
Beware that backwards compatibility is not guaranteed.
The team makes this clear. Mistakes are made in any initial design. For example, one criticism of Bootstrap is that the classes aren’t named semantically. By forgoing backwards compatibility, the team is able to correct past design mistakes and keep up as web standards and practices evolve and grow.To protect yourself, clone the LESS source from your version’s release branch into your project. Then you can pull any fixes or updates to that version into your project without suffering from breaking changes such as renaming default styles. When a new version is released, you can try that branch and determine if it is worth the trouble to update your UI to accommodate changes in the new version.
Bootstrap isn’t for everyone or every project. A good library or framework follows the Pareto Principle of meeting 80% of use cases. This is where Bootstrap is most useful. You need to make informed choices when choosing or rejecting a framework. I encourage you to explore Bootstrap following my recommendations. I think you will be pleasantly surprised by the utility and ease of use this rapidly evolving framework provides.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s