1stwebdesigner

How to Build a Website Using Twitter Bootstrap and SASS – Part 1

Posted: 02 Jul 2012 06:00 AM PDT

Having covered one of the best web development frameworks (Twitter Bootstrap) and a super fast CSS coding technique with tons of goodness (SASS), in my previous posts, it is time to burn some rubber and get some work done. We will get our hands dirty and code a web page right from scratch using Twitter Bootstrap and SASS.

This will be a 2 part tutorial, with detailed steps and a comprehensive overview on the processes and concepts behind them. The first part will cover the details of building the folder structure and creating markup using TBS for the layout. The second part will have a detailed walk through on the customization of the layout using SASS.

Before starting to code, make sure you have these items installed/configured/downloaded on your computer:

Twitter Bootstrap framework. As elaborated in my previous post, TBS is an evolving web development framework, with a handy and extensive set of UI libraries to chose from. Its unique approach to UI development has been creating waves in the web authoring arena. With its object oriented approach to UI building, unobtrusive JS and semantic markup, a practical session in implementing the framework will be really interesting.
Compass, an open source CSS framework, this preprocessor, makes use of SASS (refer to my previous post on SASS to know more). Let’s see how to implement mixins, variables and other powerful techniques that comes packed with it. For running Compass you need Ruby to be installed in your system.
Ruby. If you are using Windows, please refer to RubyInstaller to deploy Ruby on your system. If you are using Linux or Mac OS X you can refer to Ruby’s download page.

What we'll be creating

Demo

Download File

We will be creating a basic layout using the frameworks. The objective of this tut is not to demonstrate all the ui elements in TBS, and to show how to use it, but it concentrates on the workflow and the basic concept of making use of both these frameworks. I expect novice readers to spend much time going through the framework, and get your hands dirty as much as possible, rather than trying to find out a tutorial which spoon feeds each and every implementation. Believe me, self study has been the best approach that has worked for me, and i strongly believe this tut, will give a strong basement to start building pages by your own using TBS and SASS.

Lets get going

(Note: I'm using Mac OSx for this tutorial and the tools and terminology that I use will be based on using a mac)

Step 1: Creating a Compass Project and Setting up Your Folder Structure

First thing to do is to get your folder structure right. Lets start by creating a Compass project. This is important as Compass is a preprocessor and each Compass file has to be converted to normal css (.css files), before we can start using them.

Once you are sure which the folder you want to start working with, point Terminal to that location, and type in the following command to create a Compass project:

compass create

This command generates a folder structure, as follows

It generates 2 folders 'sass' and 'stylesheets' and a .rb file 'config.rb'. Obviously, all the SASS based files (with extension .scss or .sass) are to be put inside the 'sass' folder, and the generated .css files in the 'stylesheets' folder. In case your app uses a different folder structure, this structure can be customized by changing the config.rb file, by updating respective folder names for each type of asset (stylesheets, sass files, js files ). By default, 3 SCSS files are also generated in the 'sass' folder – ie.scss, print.scss, screen.scss, and respective css files in the 'stylesheets' folder. These scss files are just starting points without any rules included (although the screen.scss has a reset module included we won’t be using it, since TBS has its own reset rules within its stylesheet file. So lets remove the reset which is included in ‘screen.css’).

After setting up the folder structure, there should be a mechanism where the Compass compiler keeps on updating any changes to the .scss files in the 'sass' folder, and replaces the respective files in 'stylesheets folder'. This is what the following command does exactly (again, make sure the terminal is pointing to the root folder of the project, in our case, its 'TBStut').

compass watch

This will instruct the Compass compiler to poll for any changes in any .scss files within the relevant folder specified in the config.rb file and to create and update respective .css file to style sheet folder mentioned in the config.rb file.

Step 2: Putting TBS files in place

Now that the Compass project has been created, and the folder is set to watch for changes and update the CSS files, next step will be to add the TBS framework files to this structure. The downloaded file set from TBS repository has the following structure.

bootstrap.css and bootstrap-responsive.css play a major role in the framework while the 'img' folder contains the glyphicons which come with the framework and the 'js' folder has bootstrap.js, which includes all the scripts needed to make the jQuery plugins work. Let’s copy bootstrap.css and bootstrap-responsive.css to the 'stylesheets' folder (you could copy the minified versions too, if you wish), the ‘bootstrap.js’ to the js folder and later on gradually we’ll put images that we’ll be using in the tutorial into the images folder. Finally our folder structure looks like this:

Step 3:The HTML for the Page

Now straight to work! Lets create an HTML page 'index.html', and include all the TBS related stylesheets, available in the 'stylesheets' folder. To start with, I have used the starter template available in http://twitter.github.com/bootstrap/examples/hero.html, for the basic markup including the fixed top nav bar, the hero section and the content container. Here is how the code looks:

  <!DOCTYPE html>  <html lang="en">    <head>      <meta charset="utf-8">      <title>Bootstrap, from Twitter</title>      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <meta name="description" content="">      <meta name="author" content="">      <!-- Le styles -->      <link href="../assets/css/bootstrap.css" rel="stylesheet">      <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">      <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->      <!--[if lt IE 9]>        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>      <![endif]-->    </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 &raquo;</a></p>        </div>        <hr>        <footer>          <p>&copy; Company 2012</p>        </footer>      </div> <!-- /container -->      <!-- Le javascript      ================================================== -->      <!-- Placed at the end of the document so the pages load faster -->      <script src="http://code.jquery.com/jquery.min.js"></script>      <script src="js/bootstrap.js"></script>    </body>  </html>

In the above code I have removed the content section with 3 blocks of text which were present in the sample page. Here is a walk through of the above code and I’ll shed some light on the key points to be aware of.

Line 6: This meta tag is for mobile devices and tells the browser to set the viewport to the width of the device with an initial scale of 1, and thus avoids a scaled down version of the page to be displayed initially on any mobile devices

Line 18: The class ‘navbar’ and ‘navbar-fixed-top’ are for the top navigation bar which stays fixed to the top (navbar styles the element with TBS styles of a navigation bar and the addition of the extra class ‘navbar-fixed-top’ adds a rule position:fixed, and makes the bar stay fixed on top of the page). ‘container’ is a generic class in TBS which by default aligns to the center of its parent tag and takes the width value depending on the inclusion of bootstrap-responsive.css. If bootstrap-responsive.css is not included in the page, this class takes a default width of 940px, assuming there are no customizations done in the framework files, before downloading.

Line 20: ‘.container’ is a generic class which aligns an element to the center of its parent tag.

You might be wondering where the markup from lines 27 to 33 is getting rendered! As mentioned earlier, since we have made our layout responsive, by including bootstrap-responsive.css, this section creates a clickable area when the screen size is reduced beyond a limit – click on which, the nav bar links will be displayed as a drop-down menu. The class ‘nav-collapse’ plays an important role in this behaviour. The data attributes have been used effectively in this scenario, and this is the way TBS has consistently made use of data attribute across the framework.

Line 39: ‘hero-unit’ is the TBS class-name for main hero section of a page.

At the moment, this is how our page looks:

Now its time to add more details and UI elements to the page. Lets add a login form inside the hero unit.

Go to the Twitter Bootstrap Page and grab the markup of ‘Basic form’.

To position the form to the right side of the unit we need to group the h1 and two p tags (which are the child tags of the div with class ‘hero-unit’) inside another tag so as to float accordingly. Group those tags within a div tag and add a class ‘pull-left’. ‘pull-left’ is a generic class used by TBS to float any containers to the left.

Now, paste the basic form markup from the URL mentioned above and float it to the right using ‘pull-right’ (pull-right floats an element to right).

Since there are two floated elements inside ‘hero-unit’, we need to clear it. TBS uses the latest technique of clearing floats using :before and :after pseudo classes and offers a generic class ‘clearfix’ for the same. Lets add this class to ‘hero-unit’ and get it cleared.

Update the text within the ‘hero-unit’ and refine the login form by adding a password field and relevant labels. Right now, the markup for the hero-unit looks like:

  <div class="hero-unit clearfix">   <div class="pull-left span5">    <h1>Welcome to 1stwebdesigner</h1>    <p>A one stop resource for web designers and developers</p>    <p><a class="btn btn-primary btn-large">Explore our articles</a></p>   </div>   <div class="pull-right">    <form class="well">     <label>Username</label>     <input type="text" class="span3" placeholder="Type your username">     <label>Password</label>     <input type="password" class="span3" placeholder="Type your password">     <label class="checkbox">      <input type="checkbox">Remember me     </label>     <button type="submit" class="btn">Log me in</button>    </form>   </div>  </div>

We are almost done with this page, once we’ve filled up the lower half of the page.

Go to the typography components and grab the markup for the thumbnail pattern with a caption and a set of buttons.

We will place two such teasers after the hero unit, and one single banner to the far right. Create a 3 column structure to place these elements.

Now the row and span combination in TBS come into play ! The classnames ‘span1′ to ‘span12′ (in case you are using a 12 column grid) represent basic column units available in the framework. So for a 3 column structure with 3 equal width columns, we should be using 3 tags with class ‘span4′ for each.

Also, since any classes starting with ‘span’ are floated to the left, clearing floats is something we need to take care of. Apart from ‘clearfix’, TBS has a pretty good technique to address this. While using multiple ‘span’ classes, the parent container is given the class ‘row’ which clears the inner floats.

Now for placing a banner to the far right, lets use the default thumbnail style that TBS is offering. Grab the markup for the default thumbnail pattern and put it inside the third div with the class ‘span4′

The markup of the bottom part with 3 equal width columns will look like:

  <div class="row">  	<div class="span4">  		<div class="thumbnail">  		 <img alt="" src="http://placehold.it/370x180">  		 <div class="caption">  		   <h5>Thumbnail label</h5>  		   <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>  		   <p><a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a></p>  		 </div>  		</div>  	</div>  	<div class="span4">  <div class="thumbnail">   <img alt="" src="http://placehold.it/370x180">   <div class="caption">     <h5>Thumbnail label</h5>     <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>     <p><a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a></p>   </div>  </div>  	</div>  	<div class="span4">  	<a class="thumbnail" href="#">  	  <img alt="" src="http://placehold.it/370x300">  	</a>  	</div>  </div>

And the final markup should look like:

  <!DOCTYPE html>  <html lang="en">  <head>  	<meta charset="utf-8">  	<title>Bootstrap, from Twitter</title>  	<meta name="viewport" content="width=device-width, initial-scale=1.0">  	<meta name="description" content="">  	<meta name="author" content="">    	<!-- Le styles -->  	<link href="stylesheets/bootstrap.css" rel="stylesheet">  	<link href="stylesheets/bootstrap-responsive.css" rel="stylesheet">    	<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->  	<!--[if lt IE 9]>  		<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>  	<![endif]-->  </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 clearfix">   <div class="pull-left span5">    <h1>Welcome to 1stwebdesigner</h1>    <p>A one stop resource for web designers and developers</p>    <p><a class="btn btn-primary btn-large">Explore our articles</a></p>   </div>   <div class="pull-right">    <form class="well">     <label>Username</label>     <input type="text" class="span3" placeholder="Type your username">     <label>Password</label>     <input type="password" class="span3" placeholder="Type your password">     <label class="checkbox">      <input type="checkbox">Remember me     </label>     <button type="submit" class="btn">Log me in</button>    </form>   </div>  </div>  <div class="row">  	<div class="span4">  		<div class="thumbnail">  		 <img alt="" src="http://placehold.it/370x180">  		 <div class="caption">  		   <h5>Thumbnail label</h5>  		   <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>  		   <p><a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a></p>  		 </div>  		</div>  	</div>  	<div class="span4">  <div class="thumbnail">   <img alt="" src="http://placehold.it/370x180">   <div class="caption">     <h5>Thumbnail label</h5>     <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>     <p><a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a></p>   </div>  </div>  	</div>  	<div class="span4">  	<a class="thumbnail" href="#">  	  <img alt="" src="http://placehold.it/370x300">  	</a>  	</div>  </div>  		<footer>  			<p>&copy; Company 2012</p>  		</footer>  	</div> <!-- /container -->    	<!-- Le javascript  	================================================== -->  	<!-- Placed at the end of the document so the pages load faster -->  	<script src="http://code.jquery.com/jquery.min.js"></script>  	<script src="js/bootstrap.js"></script>  </body>  </html>

and here is how the page looks like now:

We now have the basic markup in place and things are set, what remains is the customization part where we will use SASS to customize this page. Look forward to my next post which will comprehensively cover the customization part of this layout. Hope this tutorial enlightened you, and wait for more enlightenment to come your way regularly! :)