0

Beautiful Bootstrap

A while back we made an application using Google’s AngularJS framework. The framework recommended using ’Twitter Bootstrap‘ to build the application HTML and provide styling – something which I’ve never heard before. So “great” I thought – “not only do I need to learn Angular, I’ve now got to get to grips with this Bootstrap thing”. I’m also a bit of a CSS enthusiast, so was cautious of such a framework that essentially abstracted me from it, but I’m happy to admit my caution was unfounded…

 

What is Bootstrap?

At its core, Bootstrap is a set of (LESS) CSS3 libraries (or for more advanced stuff also JavaScript libraries) that style your HTML. That is, providing it has Bootstraps classes, id’s and expected structure. It gives sites a particular Bootstrappy look which you’ve probably seen before, e.g. the black navigation bar at the top, and those Twitter like buttons.

The result of using Bootstrap is a very clean, current looking blank canvas on which you can apply your own styling/branding. Bootstrap discourage you from just implementing their default styles and leaving it there. After all, the web would be a very boring place if everyone did this.

 

Why bother?

There’s a few reasons why you’d want to start building a site or application with Bootstrap rather than from scratch.

 

Speed

The major benefit of using Bootstrap is that unless you’re a CSS Rain Man, you’ll almost certainly be able to get to grips with Bootstrap and implement a site using it far quicker than you could write a decent looking site from scratch. There aren’t any major barriers to entry with Bootstrap, other than needing to know basic Bootstraps prefered HTML structure and CSS classes – but that’s all well documented  on their site.

 

Building for Mobile

Building sites for mobile and tablet is now more important than ever. Bootstrap caters for this, and everything nauturally scales very gracefully when on smaller screens (especially when using Bootstraps fluid grid system).

What’s more Bootstrap’s ‘Responsive’ library provides facilities for presenting screen-size dependent content by assigning particular CSS classes to your markup. For example, anything with a class of ‘visible-phone’ will display for widths of 767 pixels or lower, or classes of ‘hidden-phone’ will hide it. Obviously if you’re delivering a lot of content which you end up hiding on phones, you should probably be writing a dedicated mobile site.

 

Cross Browser Support

If you’ve ever had to build for IE6-9, FireFox 2+ and Safari, you’ll know how long it takes. Bootstrap *mostly* takes care of cross browser issues for you, although if you do have to be careful if straying away from its core classes.

 

Theming

If you’re struggling to come up with your own Bootstrap theme, there’s plenty out there. Because all Bootstrap sites follow a certain structure, there’s sites that provide third-party themes that sit on top of the basic Bootstrap skin. Furthermore, if you’ve developed a suite of apps or related sites in Bootstrap, it should be quite trivial to develop a consistent theme for them all.

These sites provide themes (some for a price):

https://wrapbootstrap.com/

http://bootswatch.com/

http://www.boottheme.com/

While on the subject, I also found this great site for creating your own Bootstrap buttons: http://charliepark.org/bootstrap_buttons/

 

 JavaScript

In addition to CSS styling, Bootstrap also provides you with ready to go JavaScript controls such as Modals (i.e. lightboxes), Dropdown Menus, Tabs, Tooltips, Toolbars, and Carousels etc.

 

 Some Examples

Here’s a few sites which use bootstrap in different ways:

 

In Conclusion

Use Bootstrap, you know it makes sense.

About Darren Johnson

Darren is a consultant at ECS and, in addition to his great development work, he’s our UI enthusiast.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>