I’ve lately found myself seduced by the allure and promise of Twitter Bootstrap.
I have to admit, the idea of a modular framework for front end development initially prompted skepticism, not excitement. My background, initially, is code-exclusive design. I own a business which, originally, provided specialty marketing services (computer animation, graphic design and interactive) to mostly real estate clients. At the height of the real estate bubble we were churning out websites at a steady pace, largely for projects which never ended up getting built. And they were all done in Flash (you remember the era – back when ‘The Wire’ was water cooler fodder and homeless people could get mortgages…) At any rate, ‘back in the day’ I never actually had to write HTML/CSS directly, nor did I have to script in anything other than Flash. Most of our sites at the time were simply shells — made in Dreamweaver with loads of embedded Flash.
Then the bubble burst, Flash got taken off the menu of standard fare our clients wished to dine on and the move towards content managed websites (read, for us, WordPress) compelled us to learn a new toolset, namely the triumvirate of front end development, HTML, CSS & JavaScript. I came of age as a coder in the latter part of the standards movement, when everything the standard bearers of standards bearing (Jeffrey Zeldman, etc.) was actually coming to pass; in the era that Jeff Croft refers to as the ‘era of the HTML guru…’
After building so many sites by hand, the idea of a ‘framework’ conjured the following scary thoughts:
- Cheaply made ‘me too’ designs, most of which probably would feature a mind-numbing level of sameness
- A host of constraints (euphemistically referred to as that ‘framework’ nonsense) which would stymie every original thought I wanted to put into a site. (See Item 1…)
- A lot of time invested in a steep learning curve, which would only lead me to the concerns raised in Item 2.
But, I had to admit, there was allure, most of which related to potential improvements in development timelines and a natively responsive environment. Here’s what the Bootstrap crowd promised:
- Powerful, modular solutions to some of web design’s most common challenges, including built-in Javascript to handle typical script-driven functionality, dropdown menus, accordians and carousel style sliders.
- Pre-authored CSS governing everything from the appearance of type to pre-designed forms, buttons, tables, etc.
- An underlying flexible grid system which delivers perhaps Bootstrap’s principle claim to fame: a fully responsive, mobile-first development environment.>
- The ability to fully customize builds of Bootstrap; ensuring that no more code than is necessary for your project gets included.
As I thought about the potential power and time savings offered in the theoretical, I really began to get curious about giving the framework a whirl. Researching, I found plenty of example of genuinely beautiful, visually effective work being done out there. Work like this:
Clearly any design constraints I feared the framework might impose were being easily overcome by some pretty smart designers out there. When the right project came along, we dived in.
Although our first Bootstrap project is in development, here are some initial thoughts:
- They’ve really taken care of a lot of typical functionality niceties most web developers regularly require. Being able to easily plug-in a fully responsive slider or accordion component feels not constraining but liberating. We’re able to play with so many toys that it feels like our sandbox has gotten bigger, not smaller.
- The intrinsically responsive aspect of the framework is pretty easy to get a feel for and a breeze to employ. There’s really only a couple of ‘big ideas’ behind the gridded framework Bootstrap offers and, once grasped, it is a pretty straightforward process of experimentation to get a project to look ‘as desired’ at typical mobile and desktop resolutions.
- I would be remiss to omit mentioning some teeny weeny constraints imposed by the framework, which have hampered my mojo a bit. For instance, the gridded nature of the environment makes absolutely positioned elements, which might live ‘off the grid,’ very difficult to make responsive. In my initial design for this first project, for instance, my menu bar was going to ‘jump off the grid’ a bit. After playing endlessly with potential workarounds, though, I found that it was going to be very difficult to get such a design to work at multiple resolutions. I eventually opted to redesign the menu, placing within the native Bootstrap grid. The result, was a tad less interesting than originally designed.
In future posts, I’m going to be adding more thoughts and resource lists supporting Bootstrap development and will offer up follow-up observations on the use of Bootstrap within our workflow.