The Pitfalls of Twitter Bootstrap

I see the Twitter Bootstrap framework being used more and more by developers and I am still struggling to understand how it can be accepted as a full and robust solution that can be released as production ready.

From a general overview, it is a framework for developers who don’t know how to build a modular, re-usable and scalable front end solution, and use it as an easy way out. It seems to be a good way for back end developers with limited front end knowledge to create a reasonable looking UI. There are some useful elements, but from my view point are only really acceptable for MVP (minimal viable product) work as a certain degree of hacking at the frame work is required to customize it for a required purpose.

Below are some of the benefits that developers find useful:

• Quickly create a layout (fixed, fluid and responsive)

• Quickly create a form

• Everything immediately in the same style

• Working grid system

• Tables

• Buttons

Lets have a look at some of the pitfalls in a bit more detail.

It doesn’t follow best practices

One of the major issues I have with Twitter Bootstrap is that you end up with a lot of DOM elements full of needless classes. This usually means that the presentation is no longer separate from the content. Many front end developers will find this irritating, as it makes scalability, reusability and maintenance more of a challenge than it should be. Twitter Bootstrap also creates problems with progressive enhancement, as presentation and interaction are no longer independent of content.

It’s conflicts with existing site code

If you’ve been thrown into a big project and want to implement the ‘so called’ benefits that Twitter Bootstrap provides, there are a lot of problems here. Conflicts with generated HTML, CSS and JavaScript are the first thing. Then the resources, you now have to go through that big monster of a project and work out which scripts and styles need to be removed or replaced. Twitter Bootstrap could potentially create extra work as you go through the project finding and fixing weird bugs, which you could argue defeats the purpose of using it in the first place.

It is heavy

Straight out of the box, Twitter Bootstrap includes CSS weighing 126kb and 29kb of JavaScript. If you do want to use all of the functionality that Twitter Bootstrap brings, you should have a good think about loading times. Twitter Bootstrap can possibly help you to build an attractive, responsive website, but some mobile users could be become frustrated by the slow loading time and battery-draining scripting.

No SASS support

Another point of contention, and definitely an issue that puts me off using Bootstrap is the that it’s built with Less and provides no native support for Compass and SASS. Less is okay and it certainly has it’s advantages. But SASS is just better!, and with a framework like Compass on top, it is a complete no-brainer to use it. The are some solutions out there, but straight out of the box, you’ll have to make do with Less.

My website looks like everyone else’s!

Twitter Bootstrap is growing in popularity all the time, and this means that the world and his wife will be using it. While it is possible to customise your design further, you may find time constraints force you to stick to a lot of the out of the box Bootstrap style. This can lead to the creation of a lot of similar, generic and unmemorable websites. While Twitter Bootstrap is fast and easy to implement, creativity is often compromised as a result. Creative designs, which defy conventions, can be difficult to implement in Bootstrap’s structured environment.

Other disadvantages of using Bootstrap

Bootstrap.js

A lot of users have complained about bootstrap.js and how it does not use semi-colons. This can cause issues when using aggregation and compression tools such as JSMin and RequireJS. Using semi-colons is not part of JS standards but in my view it is better practice to use them mainly due to the inconvenience it can cause and can make modifying the source code a more difficult task than it should be.

Visitors don’t take your website seriously

Some of the more skeptical and cautious users of the Internet may question the legitimacy of a site using the default Bootstrap style. By not taking the time to customise styles, some users may start to perceive Bootstrap sites as untrustworthy.

Bootstrap doesn’t work with JavaScript disabled

Like most web tools on the Internet, Bootstrap doesn’t provide fall-backs for users without JavaScript. It just means that you’ll have to provide your own fall-back if you do want that support. As around 1-2% of worldwide users of the web have JavaScript disabled, it is definitely something to take into consideration.

Overall, Twitter Bootstrap is good to get something up and running quickly, with minimal front end development knowledge and is acceptable for MVP work that is not released as production quality. However, it can become very easy to shoot yourself in the foot, by thinking you are getting something for nothing, only to find out later down the line that it causes more work or hacks are required to customise it to your needs.