Twitter Bootstrap 3 - The Good, The Bad & The Ugly

Bootstrap 3 is a rich CSS, HTML and Javascript framework. It can make building websites easier by using its pre-built components such as navigation, forms and typography.

One of the reasons for Bootstrap's popularity is that it allows people with little web development knowledge to build a decent looking website. Presentational aspects can be customised directly through the Bootstrap website and the resultant code downloaded.

A downside of using it this way is that websites often look similar to each other making it difficult to stand out from the crowd. However, for people who have a bit more knowledge of web design and development, Bootstrap can be be used to kickstart a project and tailored to create unique looking websites. We have an article here that discusses how to make your website stand out.

Without getting too far into a debate about the pros and cons of using frameworks it’s interesting to dive into a few specifics of Bootstrap for anyone considering using it.

The Good

The Docs

Documenting how elements are styled makes working in teams easier. Each person has a definitive guide on what mark-up to use which helps alleviate duplication and promote consistency. Creating these guides each time you create a site is a big job and keeping them up to date as the project changes over time is even harder. The documentation in bootstrap is well written and any issues can also be explored on the project’s Github repository.

Variables

Much of the good things about Bootstrap are the same things that make CSS pre-processors useful so aren’t unique to the framework.  They are however pre-configured with bootstrap.

Variables save time and can keep consistency throughout a website. Bootstrap comes with variables for media query breakpoints, typographic details and the overall z-index of a website amongst many others. The advantage here is that if for example you set “brand-primary” as the primary colour and this will be used for buttons, link states, heading colours, call out boxes and other repeating elements throughout the website automatically.

Form Elements

Much work has obviously gone into the forms to keep a level of consistency on various browsers. For a great example see button groups.

Box Sizing

The default box model adds the padding to the outside of the element which makes adding pixel values to percentage width columns next to impossible. By default, bootstrap uses the star selector to add “box-sizing:border-box” to all elements.

The Grid System

Bootstrap 3 comes with a responsive, nest-able grid system.

The Bad

Architecture/Updates

There are countless ways in which to deploy the Bootstrap code. However if you don’t want to edit the core code then you’ll need to add your own code in a separate place to Bootstrap’s. This creates a disconnect between your modules of code. You could always download Bootstrap’s components and edit them directly but that makes updating the core code complicated.

Naming conventions

Perhaps you prefer to use “camelCase” or a flavour of the BEM naming methodology. With Bootstrap (and all frameworks) you may need to adapt to the framework’s naming conventions.

The Ugly

CSS Bloat

The actual file size generated by bootstrap is pretty big. It’s important to only choose the components that you need and generate those styles but this only gets you so far. The problem is that it’s difficult to split the actual components down into just the actual bits of code that you need to use. For example, the “grids” component includes a large amount of code for ordering and offsetting columns as well as column widths at every breakpoint. The chances are that won’t need to use all of this. Downloading the grids component and deleting the bits you don’t need makes updating the core code difficult.

Perhaps in future, something like Uncss would make this less important.

Breakpoints

Out of the box, the breakpoints for media queries are set up like this:

• 0px and above (not in a media query)
• 769px and above
• 956px and above
• 1200px and above

You can adjust these to whatever you like but if you have a site that is 1200px or wider, you may feel that four breakpoints leaves too much of a gap between them. The biggest gap is between 0 and 769px. Stacked columns might look OK on a “mobile” device in portrait but may look wrong on a small tablet such as the Google Nexus.

Adding the extra breakpoint isn’t simple as these breakpoints are used throughout the framework so are intrinsically baked into Bootstrap 3 (although there are plans to add another one at 480px in Bootstrapb 4).

Conclusion

At Liquid Light, we have our own framework that is constantly evolving and has a code base that is linked to our CMS. Bootstrap isn’t something that we’d use on most of our projects. However for projects where we’re tasked with designing templates than can be built upon by an in-house web team, the documentation and extensibility of Bootstrap could prove useful.

Having said that, even the most seasoned and experienced experts can improve by seeing how other people work. In that respect Bootstrap is well worth exploring, even if you have no plans to use it as a full framework.

This article was posted in Development

• 

  Matt Keogh

  Creative Director