Platinum Partner
css,html5,javascript,web design,twitter,graphic design,ajax & scripting,bootstrap

Bootstrap: rapid development and the complexity of a framework

Bootstrap is a front-end framework built and open sourced by Twitter developers. It has sparked many debates about what is its scope, and whether it's actually useful.
In this article I'm going to take a look at it with the eyes of a back end developer: I'm one of the people Bootstrap should help I guess, since I don't have great design skills or time to spend in graphical tweaking.

Dive into an example

Here is a stripped down version of a Bootstrap example, which does not include JavaScript widgets:
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap, from Twitter</title>

    <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-large">Learn more »</a></p>
      </div>

      <!-- Example row of columns -->
      <div class="row">
        <div class="span4">
          <h2>Heading</h2>
           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details »</a></p>
        </div>
        <div class="span4">
          <h2>Heading</h2>
           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn" href="#">View details »</a></p>
       </div>
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn" href="#">View details »</a></p>
        </div>
      </div>

      <hr>

      <footer>
        <p>© Company 2012</p>
      </footer>

    </div> <!-- /container -->

  </body>
</html>

Only two stylesheets are included. The result is a totally resizable layout, both in the disposition of blocks and in their own width; I could never produce an horizontal navigation bar in any condition:

There are also graphical defaults like colors which can be overridden. I think the purpose is also to develop a prototype quickly, even if you are a developer like me, who doesn't want to spend all the day on CSS tweaks to make something presentable. You won't present a white background and div with black borders again.

The reasons for a CSS tool

...are actually similar to the reasons for a JavaScript framework: CSS by itself is not a powerful language, and there are cross-browser support issues that the framework usually solves for you. The latter problem is even more diffused today with each new phone having a browser included. In fact, you're probably already using some external CSS resource, like the Yahoo! CSS reset.

It's not clear if there will be a standard preprocessing for CSS, to help with the removal of duplication. LESS is just one of the languages, but it is increasingly popular; by the way when you marry a framework you have to deal with its idiosyncrasies.

The markup/presentation separation

Total markup (HTML) and presentation (CSS) separation has always been a lie, as implemented in CSS 2.1 at least. For example, the order of HTML elements counts a lot: float properties would change behavior and requiring you to reorder columns whenever you want to change some widths in the design. It is also common to insert lots of nested div elements to apply CSS magic, or to be compatible with older browsers.

Many of the available classes are actually separating presentation concerns, with names like .container and .navbar. But there are many offending ones are like .span4, .grid_row.
There are ways, like using the LESS CSS preprocessor, to hide these classes behind your own ones, which will surely have design-specific names. Of course, you will need to recompile the CSS for deployment, although this can be done automatically during development.

As usual, you can see the problem of frameworks coming up to be weighed against their power and speed:

  • lock-in: your design won't work without all Bootstrap resources, and it won't be easy to migrate away in the future.
  • more technology that what you strictly need (ready to jump into LESS?).
  • a learning curve: instead of only have to stay up-to-date on CSS selectors and properties, now you have a new whole set of base classes to learn.

The JavaScript bits

Bootstrap's widgets are based on jQuery, and provided in the form of custom plugins which can be separately downloaded as single .js files.

Frankly, the list of plugins gathered under a single design is impressive:

  • modals (overlay dialogs), tooltips and popovers to place in particular points of the text.
  • navigation tools like dropdown menus,scrollspy updating itself basing on the position in the page.
  • organizational tools like tabs and collapsable elements (such as accordions).

It's not that's difficult to find these plugins elsewhere; but there is value in a single go-to place where they are provided together and with a basic common style.

Again, we find the issues of all frameworks creeping up again if we ask these questions:

  • how can I extend one of these plugins? There would be a learning curve for doing that, if it's possible at all.
  • How can I create a new plugin which have the same style as these ones? I'm sure I will need to; there will be another learning curve to "percorrere".
  • What happens if I need another framework to be integrated in functionality and appearance, like the Dojo Toolkit?

Conclusions

Bootstrap is a great open source front end framework, and it will probably shine for applications with a small or medium sized user interface. If you have more time and money to invest, existing JavaScript frameworks and a web designer will serve you well; Bootstrap is an attempt to bring down the cost of producing auser interface composed of standard elements, like a grid-based design and navigational widgets.

{{ tag }}, {{tag}},

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}