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?
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.
There’s a few reasons why you’d want to start building a site or application with Bootstrap rather than from scratch.
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.
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):
While on the subject, I also found this great site for creating your own Bootstrap buttons: http://charliepark.org/bootstrap_buttons/
Here’s a few sites which use bootstrap in different ways:
Use Bootstrap, you know it makes sense.