Creating a Portfolio site with Twitter Bootstrap

Lets talk about using twitter bootstrap in this post. Well if you have been struggling with Responsive Interface Design, Grid Layout, Theming etc. twitter bootstrap is one out of the box solution that you need. In other words, it's a front-end toolkit for faster, more beautiful and easy web development. It was created and is being maintained by Mark Otto and Jacob Thornton at Twitter.

At the end of the post we shall have designed a simple portfolio site using TBS, and the reader would be well acquainted with most of the widely used implementation techniques. The following mock-up shows what we shall have built at the end of the post. The code used can be found here on github, you might want to open it aside to look for reference. The demo is available here.

Mockup

The style sheet in twitter bootstrap offers many classes for various purposes, we can make use of those classes in divs and arrive at some aesthetically pleasing design. If you want things to be left or right adjusted, there are offset classes available, other power features that it provides are UI elements similar to jQueryUI, custom buttons, span styling, typography, custom icons, modal overlays etc. We will cover some of them as per the mockup needs. Before we begin lets take a small look at the default grid system, TBS comes with a 12 column grid which is 940px wide. The following table shows few of the default width for each of the spans:

Span 160px
Span 4300px
Span 6460px
Span 8620px
Span 12940px

With a brief overview of TBS lets get our hands dirty and convert the mockup to html. The various elements that we need to place are:

  1. Logo on top left

  2. Navigation Buttons

  3. An image carousel

  4. Tabbed UI for the main content

  5. Footer element.

Logo and Navigation buttons comprise the header, we put them in a row. The nav-btns class can be used to render the navigation links. Lets look at the implementation:

   <div class="row">
    <div class="span2">
      <a href="#" class="thumbnail"> <!-- the thumbnail class
    helps put the logo -->
        <img src="http://placehold.it/160x80" alt=""> <!-- the logo image -->
      </a>
    </div>
    <br><br>
    <div class="nav-btns"> <!-- the class that helps create nav
    style buttons -->
      <ul class="nav nav-pills offset6"> <!-- an offset of 6 to
    adjust the horizontal alignment -->
        <li class="active">
          <a href="#">Home</a> <!-- active means the default
    chosen tab -->
        </li>
        <!-- the other tabs -->
        <li class="span1"><a href="#">About</a></li>
        <li class="span1"><a href="#">Services</a></li>
        <li class="span1"><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>

Lets place an image carousel that will be used to showcase the awesomeness of awesome Inc. The simple template structure we can use for it is as follows:

<div class='carousel'>
    <div class="carousel-inner">
     <div class="active item"> <!--this lists the image that should load first--!>
         <img src="http://placehold.it/800x240" alt=""> <!-- the image you want to place -->
         <div class="carousel-caption"> 
          <h4>First Thumbnail label</h4> <!-- the image caption -->
          <p>This is the first thumbnail info</p> <!-- the image description -->
     </div>
    </div>
</div>

<!-- more item divs can be repeated over here if you want to add more images -->
</div>
<!-- Carousel navigation buttons -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

The carousel has been implemented in line 55 to 88 in the starter-template.

Post carousel we would want to have some content, sure lets add a tabbed interface and put some content into it. An easy way of doing it would be by the following method:

<div class="tabbable"> <!-- this calls a tabbed interface -->
  <ul class="nav nav-tabs"> <!-- following lines show the tab headers -->
   <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
   <li><a href="#2" data-toggle="tab">Section 2</a></li>
  </ul>
 <!-- the content for each of the sections designed above can be put in
the following manner-->
<div class="tab-content">
 <div class="tab-pane active" id="1">
  <h1>I'm in Section 1.</h1>
 </div>
</div>

You might want to play with offset and span to adjust the width and positioning. The tabs are implemented in lines 92 - 116. We shall now conclude by putting a footer we can do that by choosing a span12 box with copyright text center aligned. Thats it, we have a dummy portfolio site designed with least hassle. The best part is we don't need to care about if it works in IE6, or how would it appear on a tablet or a smartphone since everything is taken care of by the toolkit.

The above post was an introductory guide to get started with bootstrap, where few of the power elements' usage has been shown. There are many more awesome elements which when explored and used can lead to some really eye-catching design. Explore and Have Fun!

Comments

blog comments powered by Disqus