When to Use (or Not Use) Twitter Bootstrap

bootstrap_header

By Sam Holt

In a previous posts on the Zing Design blog, I’ve talked about the positives and the negatives of using Twitter Bootstrap, but where does that leave us?

At the end of the day, it’s up to the developer to decide which tool is right for the project at hand but, lucky for you, I’ve whipped up this simple flowchart to help you decide which front-end framework to use for your next web project.

There are some extra notes below.

This is an illustrated flow-chart which tracks the decision-making process behind choosing the right front-end framework for the job.

When Bootstrap Might Be Inappropriate

Let’s discuss some situations where using Bootstrap might be inappropriate:

1. Developing for mobile devices with slow and/or expensive mobile broadband…

…such as in New Zealand, where I live. Make sure you trim Bootstrap down as much as possible. All of Bootstrap’s cool responsive features come at a cost; to loading time and to the device’s processing power.

2. You are keen to stick to web best practices

If you’re an HTML purist and you don’t want to muddy the DOM with a myriad of magical classes, Bootstrap may not be for you. It’s important to be concerned about this, as it could potentially make your project inflexible, harder to maintain and put limitations on scalability.

3. The design is radical, innovative and downright whacky

You’ve just been given a rather unconventional design that looks incredible but isn’t going to translate well into a Bootstrap template. It may be a matter of using just the bare basics of Bootstrap in this case. If you really want to be developing with Bootstrap, it may be worth sitting down with your graphic designers and trying to persuade them to design with Bootstrap in mind.

Otherwise, Bootstrap is excellent

Try to think of it as a blank-slate and a spring-board that will give you a big head-start in your next exciting web project. You can use as much or as little of it as you want.

  • Keep in mind that Bootstrap is fully customizable, so if it’s too big and clunky straight out of the box, just chisel away the bits you don’t need until you come up with something that works.
  • If you feel like Bootstrap is just too much overhead or it all just seems overwhelming, just grab the bits out of it which are handy for the current project. For many of the designs I’ve been given to bring to life, I’ve combined HTML5 boilerplate, Bootstrap classes and bits of my own code.
  • Keep an eye on the smaller front-end frameworks available, G5 is all about kicking it old-school, sticking to the standards, cross-browser compatibility, a bit of responsiveness and lighter on the UI. Ink focuses on UI, typography and making everything look slick and polished. Terrific goes for a more modular approach to front-end development, which may suit the programmer-types a bit better.
  • The biggest contender I have found for Bootstrap so far is Foundation by Zurb. It has a lot of the same features, but is a little more stripped back, encourages more semantic mark-up and has SASS support. The only major drawback is the lack of support for IE7-8. If you’re not concerned by this, Foundation may be a better place to start, but that’s another story for another day.

So, what are your thoughts?

If you want more details on when and why you might use Bootstrap, refer to my full blog series on Twitter Bootstrap on the Zing Design blog. I’d love to hear your thoughts on your experience with Twitter Bootstrap.

Lead image from http://www.zingdesign.com/5-reasons-to-use-twitter-bootstrap/

This post was originally published at http://www.zingdesign.com/twitter-bootstrap-decision-time/

Modern Web Newsletter

Subscribe to receive the Modern Web tutorials, sent out every second Wednesday.

  • http://www.mathewporter.co.uk Mathew Porter

    Great info graphic showing the usage path, will proove pretty handy if we need to implement this for a client based on their browser / visitor support requirements.

  • Jake

    Great post, but as I pointed out on the previos post – all these bad traits aren’t necessarily continued in other themes built on top of bootstrap. I plug this site a lot, because it’s a great example of beautiful themes, but http://www.bootstraptheme.net/ has themes that are literally designed with mobile in mind.

  • http://karlikdesign.com Mel

    Nice to hear thoughts on the approach. I seem to be switching all the time between different frameworks for my website development. I just started using Twitter bootstrap because it’s become so widely popular but have only made use of the grid. My thoughts are that if I use the Twitter Bootstrap grid and make it so that I can reuse a basic structure then easily pop in their other css and html for other elements like accordions, in page tabs, etc. that will vary from project to project.

  • Pingback: Twitter Bootstrap – decision time [flowchart]

  • Pingback: Useful research links | Timelessness

  • Pingback: Getting Started with Bootstrap (or ack-omg-justdivein!)

  • Pingback: When to Use or Not Use Bootstrap | Constructs

Top