HTML5 Zone is brought to you in partnership with:

I am a programmer and architect (the kind that writes code) with a focus on testing and open source; I maintain the PHPUnit_Selenium project. I believe programming is one of the hardest and most beautiful jobs in the world. Giorgio is a DZone MVB and is not an employee of DZone and has posted 635 posts at DZone. You can read more from them at their website. View Full User Profile

Bootstrap: rapid development and the complexity of a framework

03.14.2012
| 11839 views |
  • submit to reddit
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.

Published at DZone with permission of Giorgio Sironi, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Fabrizio Giudici replied on Wed, 2012/03/14 - 6:29am

I'm using BootStrap for my websites since past August. I think it's a very good thing, because in spite of all the HTML 5 promises, the HTML + CSS world is still a mess, needing a number of tricks for ensuring true cross-browser compatibility. I'm not an expert of CSS and I don't want to be, I just want to have my stuff properly rendered to all the existing browsers in a portable way. I don't see any other alternative than using a well tested framework; to be locked to a product is bad, but if you aren't a CSS expert is unavoidable. For years I've used an older one, now I've migrated to Bootstrap. Note that you are not compelled to use Less with Bootstrap: for instance I'm not using it. Also, you are not compelled to use Bootstrap JavaScript stuff: I'm not using it (I don't need so far), while I can use jQuery or other similar independent libraries when I need. In the end, a big +1 for Bootstrap from me.

Giorgio Sironi replied on Wed, 2012/03/14 - 9:29am in response to: Fabrizio Giudici

Indeed optional Less and JavaScript are a plus; that's why I took as an example only a plain layout.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.