Recently, 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.
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!
