Learning Bootstrap

I recently learned jump started Bootstrap, a html + css framework for responsive web design. Well, to make sure I understand the framework, I first jump started css, html 5 basics, then responsive web design. Finally it became clear: you can do quite a lot with Bootstrap without being familiar with any of those. They are, however, necessary if you want to appreciate what it is about.

Responsive web design

What is responsive web design: design responds to screen size changes. In order to do that you can use @media queries. You’ll have to find the breakpoints of your design, then adjusts the widths respectively.

You can use Boostraps grid too. Simply defining elements in terms of grid small-screen width is so easy that it feels like cheating. Look at this code copied from an official Bootsrap example:

<div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <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 btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <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 btn-default" href="#" role="button">View details &raquo;</a></p>
       </div>
        <div class="col-md-4">
          <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 btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>

      <hr>

      <footer>
        <p>&copy; Company 2014</p>
      </footer>
    </div> <!-- /container -->

You not only get a row with three columns. You are getting browser presets, sensible padding around the items. It’ll work well: you won’t have to add IE hacks, clearfix hacks. Moreover, it’ll be responsive.

To me, this is what web design is all about: layout out the components. Colours, effects, well… Somebody else can choose them better than me. This is why my has a say on choosing my shirts – but that’s a completely different story.

Examples

Well, the do the heavy lifting so you can include whatever component you want. Say for instance, this is the code to create fancy input groups: (code copied from the official example)

<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

These add-ons are not only nicely aligned to each other. Their design is coherent with the rest of the page design. Awesome, isn’t it?

What about jQuery? We know that Bootstrap uses jQuery. We also know that jQuery-ui contains accordion. So, there must be an accordion plugin for bootstrap too, right? They call it the collapse plugin. This is a shortened example:

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
      Long text, salala...
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
      Other long text, salala ...
      </div>
    </div>
  </div>
</div>

You can find lots of other components on the Official bootstrap javascript page. If this wasn’t enough for you then you can find lots of custom components out there.

Standard tools

As we just saw, bootstrap uses jQuery. It not only uses jQuery but provides a very jQuery-ish way to handle events from its components. Those events make your components extremely configurable.

CSS experts prefer to use preprocessors so they can write more maintainable stylesheets. Bootstrap comes with Less. However, Sass is supported too. They don’t force their design decisions upon us.

All these standard tools make me think: there is no single Big Idea (TM) behind Bootstrap. There are more Big Ideas behind it, nicely put together. Engineering at it’s best, isn’t it?

A prototype that’s ready for production

Look at this navbar code:

    <div class="container">

      <!-- Static navbar -->
      <div class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="./">Default</a></li>
              <li><a href="../navbar-static-top/">Static top</a></li>
              <li><a href="../navbar-fixed-top/">Fixed top</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </div>

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

So, here we have navbars that have the same markup, except one css class: The static top navbar class contains “static-top”; The navbar that’s fixed on top contains “fixed-top”. The default navbar has none of the above. But this isn’t the thing (TM).

There is another little change too . The right part of navbar (class=”navbar right”) contains three different list items. On each exampe only one of them has the class “active”. The “active” class means that the current navigation item is selected. So we not only have a fully reponsive navbar but it’s also very easy to work with it.

Whether it’s an ajax page ore a traditional html-generated-at-server-side, there is only one thing to do on the navbar: put the ‘active’ class to the right element. Can it get even easyer? Maybe so. But, the thing is: the default prototype already has well-factored css classes that the developers can work with. It might even enable the project manager’s dream: designers and developers could work paralelly. I’m a bit sceptical about those dreams, however, this one looks really promising.

Navbars (almost) in production

To prove that bootstrap is ready to be used with any web framework I put together a simple webapp that generates a page with bootstrap. Here you can find the sources. This is the basic bootstrap template:

    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Favorite Pets</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li  class="active" ><a id="fish" href="/fish">Fishes</a></li>
            <li ><a id="cats" href="/cats">Cats</a></li>
            <li ><a id="dogs" href="/dogs">Dogs</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>



    <div class="container">
            <div class="jumbotron">
        <h1>Fishes all around me</h1>
        <p>There are lots of fishes that you can have at home in an aquarium. There are some that you just cannot.</p>
        <ul>
          <li><a href="http://en.wikipedia.org/wiki/Guppy">Guppy</a></li>
          <li><a href="http://en.wikipedia.org/wiki/Gambusia">Gambusia</a></li>
          <li><a href="http://en.wikipedia.org/wiki/Limia">Limia</a></li>
        </ul>
      </div>


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

You can see a very rudimentary page here. The app indeed is very basic. E.g. there is no default page at all. You can only view the list of fishes, the list of dogs and the list of cats.

Here you can see the very same thing. However, you’ll notice that whenever you click the navbar items, the browser address bar won’t change. This is so because this version doesn’t reload the full page. Instead, it uses basic ajax queries to load the right content. Well, this basic ajax thing is still very rudimentary: it uses jQuery.load() to load the content from the server. Still, to make-it production-quality you wouldn’t need to change the markup. I only had to add a few id-s. Can you find them?

    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Favorite Pets</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li ><a id="fish" href="/fish">Fishes</a></li>
            <li ><a id="cats" href="/cats">Cats</a></li>
            <li ><a id="dogs" href="/dogs">Dogs</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>


    
    <div class="container" id="jumbo-content">
      <div class="jumbotron">
        <h1>Use the navbar above for content.</h1>
      </div>
    </div>

What’s really amusing about it that once I finished the bootstrap template I didn’t have to edit it to make it work with rails. Then, when I created the partials for the rails app I only had to write a little javascript and add a few id-s to the markup to load the pages dynamically. Bootstrap markup is indeed a prototype ready for production.

What is it after all

So, Bootstrap is html + css framework for responsive web design. It’s difficult to pick it’s single most important feature. This is so because it’s built on time-proven tools and practices. It does most of the heavy-lifting for you. Responsive or not, Bootstrap makes web development easy.

A question to the reader: do you use Bootstrap? What do you use it for? How do you customize it?

Advertisements

About tamasrev

A software developer, specialized in Java, addressing himself as generalist. A proud daddy.
This entry was posted in Uncategorized and tagged , , . Bookmark the permalink.

2 Responses to Learning Bootstrap

  1. Folti says:

    How nice! You shouldn’t take care about the layout and the design from now. But for the God’s shake! (sic.) You are a developer. Or something similar. You should not care about the layout and the design. That is responsibility of designers, isn’t that?
    Your responsibility is to write your code lines, what will (or at least should) make the whole things work — hopefully — as expected.

    Originally I just wanted to ask about unit tests…

    • tamasrev says:

      Full-stack developers have to take care about layout and design. Or at least they need to know the details. OK, I’m not a full-stack developer, but I just keep my eyes open. This is a great post about full-stack engineers, I liked it a lot.
      Anyway, learning a developer-friendly tool for authoring web pages cannot hurt, can it?

      I don’t know if UI is unit-test-friendly at all. But, humor me!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s