Bootstrap Rising

Twitter’s Bootstrap framework for creating web sites and apps is the culmination of half a decade’s work by the web design community in creating CSS resets, grid systems and toolkits for easily building flexible, adaptable websites. While Bootstrap is only a minor evolution over past efforts such as Blueprint or the 960 grid from a technical standpoint, Bootstrap’s polish, rapid adoption, endorsement by Twitter, and vibrant community leave it poised to have more significant impact than perhaps all such previous efforts combined.

From our own Federal Social Media Index at Expert Labs to interesting experiments like Jeremy Grosser’s Exporter (which lets you export social networking data) and Brad Fitzpatrick and Nick O’Neill’s Eight22er (which lets you access your Twitter DMs through POP email clients), nearly all of the most interesting projects I’ve seen in recent days are using Bootstrap.

As a result, I wanted to outline a few of the traits that I believe have helped Bootstrap reach an unprecedentedly rapid adoption rate, as well as the infrastructural investments that the Bootstrap community should make to enable its long-term success.

Bootstrap Basics

First, the fundamentals: Bootstrap is a free, flexible open source framework for building websites and web apps. You can simply include some basic CSS and Javascript in your web page and have full access to all of the design and UI components that make up the framework. For additional customization, developers can modify its Less-based CSS to change nearly any key part of the framework’s appearance, extend the core capabilities with a well-curated set of Javascript plugins, or dive into the explosively-popular GitHub project, which has risen in a short time to become the most-watched project on the entire site.

So why has Bootstrap worked so well? There are a few fundamental choices that were made particularly well:

  • Reflect Current Practices: Bootstrap has the benefit of learning from a design community which has been iterating around shared CSS and HTML resources for a decade. Conventions around which browsers to target, which capabilities are commonly required for building sites, and informal traditions around everything from typography to navigation have all evolved to become de facto standards for consumer-facing sites. While many other past frameworks had preferences, they were still biased towards providing open-ended capabilities to developers; Bootstrap learns instead from the “convention over configuration” revolution that’s happened in the other tiers of web development and is fairly prescriptive about many common design elements without being presumptuous about a developer’s goals.
  • Better Infrastructure: When early front-end frameworks such as YUI arose, the backing of a big commercial vendor such as Yahoo was a significant endorsement of the long-term sustainability and stability of a framework, though as that company’s technological relevance faded, its framework suffered as a result. Similarly, early frameworks relied on collaboration through sites such as Google Code or Sourceforge, using the first iterations of source control on the web. By contrast, Bootstrap earns credibility from its affiliation with Twitter, which is still a vibrant and growing powerhouse in the tech industry and confers a halo of trustworthiness on the framework even if it’s officially just a side project for its creators. And as GitHub has completely surpassed Google Code and Sourceforge in its brilliant, socially-driven dominance as the version control platform of choice for cutting-edge developers, Bootstrap’s evolution gets better as the GitHub network gets richer (See also: Forking is a feature) and developers benefit from the efficiency of asking questions in communities such as Stack Overflow (Disclosure: I’m on the board) rather than having to wade through traditional Google Groups mailing lists for every issue, though of course the list is an option, too.
  • Excellent Documentation: The homepage is the documentation. The clarity of the examples acts as its most effective marketing. The roadmap is in plain English.

What’s Needed

Okay, if Bootstrap’s doing so well, then everything must be fine, right? Not so fast: Lots of frameworks have enjoyed a temporary popularity, only to fade over time as requirements (and fashions) change. To that end, here’s a wishlist of things I’d like to see — and some opportunities that are wide-open for any developers who want to make the most of them.

  • A Bootstrap Zen Garden: While Bootstrap’s current aesthetics are inoffensive and pleasing, the framework’s success may be its own weakness, as users (or more importantly, designers) see more and more sites featuring its signature graphical elements. If someone in the community steps up to provide simple, lightweight, easily-switchable replacements that users can download, modify and share to update the looks of their Bootstrap-powered sites, this will be the single biggest amplifier to the framework’s longevity. I’d contrast this to the acclaim that WordPress’ default “Kubrick” template had when it was first released to the almost charmingly retro feel is has now when you look at a blog like Clay Shirky’s. These things age pretty fast.
  • Documentation that covers the why, not just the how: For early-adopter developers, the current documentation is wonderful in its straightforwardness. But as the developer audience for Bootstrap goes, a more thoughtful examination of how to apply Bootstrap’s design patterns thoughtfully to common user experience challenges will be necessary not just to guide developers, but to expand the audience for the framework overall. Somebody’s going to make a killing on a Kindle single about this.
  • A larger curated set of jQuery plugins: The current small set of scripts which can be used to enhance Bootstrap are fantastic, but I’d expect a radical increase in the number of people expanding the framework’s capabilities through scripting. The dev team should officially bless jQuery as the scripting framework of choice for extending Bootstrap (this is already the default choice, but being prescriptive again here can probably only help) and then make tough choices about which carousel script or form validation plugin is preferred by the framework. Given that the jQuery plugin community’s infrastructure has regressed from poor to “under construction” of late, there is a good opportunity to positively direct the energy of the community that lives in the intersection of Bootstrap and jQuery without negatively impacting the overall jQuery ecosystem.
  • A user gallery: I don’t generally care that much about who else is using a given framework if it meets my needs, but as Bootstrap broadens its audience, many developers will want the reassurance of being able to point to other big, successful users of the framework. This could also work alongside the Zen Garden to provide inspiration for people who want to find new ways to use the framework.

Of course, there are many other elements that will help Bootstrap reach its greatest potential; We can expect templates for most popular blogging systems and CMSes, along with the requisite spate of Illustrator and OmniGraffle templates for designing with the framework. Some more ambitious community members might even make “Bootstrap site generators” that will let you drag-and-drop elements to create your HTML, though I’m still a bit skeptical about those sorts of efforts.

In all, though Bootstrap is a triumph for Twitter in general and for its creators Mark Otto and Jacob Thornton in particular. It’s always fun to see a particular technology toolkit take off, and since I’m sure I’ve missed some key parts of Bootstrap’s future in this roundup, I can’t wait to hear what everyone else thinks of its future as well.