Fun with Bootstrap


BootstrapRecently, I was directed towards an open source web front end framework called Bootstrap.  The current version (as if this writing) is version 2.3.2, which you can download from here.

The aim of this initiative is to create an intuitive, abstract combination of JavaScript and CSS to allow designers and developers to create responsive user interfaces which can render seamlessly across a range of different consumer devices, such as desktop, mobile and tablet devices.

Bootstrap accomplishes this seemingly impossible task by leveraging some of the more advanced aspects of HTML5 as well as combining an intelligent set of CSS classes which extend HTML in a very logical and well ordered way.

Be more specific

Fair enough.  Many frameworks have claimed to extend hypertext mark-up to create some ingenious new toolkit or framework, but very few succeed.  What makes Bootstrap any different?

For one thing, it appears to have been built from the code up.  The CSS classes extend basic HTML elements in a very logical – and reusable – fashion.  Bootstrap uses a sequence of  live grids to orient content depending on your requirements.

HTML mark-up can also be decorated with classes to reorder or re-orient content depending on the type of device which is requesting HTML content (referred to as the ‘Responsive’ utility classes).  For more on this, check out the responsive design layouts section.

Components

Bootstrap makes available a number of very useful components, which I’ve lifted from the site for your benefit:

List of components

Together, the Components and JavaScript plugins sections provide the following interface elements:

  • Button groups
  • Button dropdowns
  • Navigational tabs, pills, and lists
  • Navbar
  • Labels
  • Badges
  • Page headers and hero unit
  • Thumbnails
  • Alerts
  • Progress bars
  • Modals
  • Dropdowns
  • Tooltips
  • Popovers
  • Accordion
  • Carousel
  • Typeahead

Aside from the various examples of scaffolding, in addition to the copious amount of documentation explaining the new CSS classes, there’s also a site dedicated to additional supporting documentation which can be located over here.

Examples

On the weekend, I decided to take Bootstrap for a spin.  Using the example scaffolding as a starting point, I created a number of static HTML pages and reused the JavaScript and CSS includes.

This required a fair amount of hand editing, made far easier by the use of Visual Studio (2010) as a HTML editor, as the intellisense provided easy access to CSS class definitions and so forth.

Aussie Wine Sales

My example site was posted last night and if you’d like to check out my initial handiwork, navigate to Aussie Wine Sales.

More to come

This article is just an introduction.  When I have a little bit more time, I’ll write a follow up article which goes into a bit more detail about my experiences in building the Aussie Wine Sales website, calling out specifically concepts which were very intuitive as well as some of the (occasional) drawbacks.

I’ll leave you with one final thought – Bootstrap actually made the experience of hand coding HTML bearable.. possibly even, dare I say it, fun!


About Rob Sanders

IT Professional and TOGAF 9 certified architect with nearly two decades of industry experience, 18 years in commercial software development and 11 years in IT consulting. Check out the "About Rob" page for more information.

Leave a comment

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=""> <s> <strike> <strong>