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

Posted in Coding, HTML & CSS, Tutorials • Posted on 12 Comments

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 | Part 2 of Tutorial


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.

  • 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! :)

12 Written ArticlesWebsite

A User Experience designer with specialized experience in front-end engineering, i have over time developed a strong passion in being associated with product-based teams. The unified goal and challenges that a product's life cycle offers is simply unbeatable! For me, proficiency in tools takes the back seat when it comes to User Experience Design, and i believe one has to be passionate and equally agile to be a key part of the team. I bring to the table the diverse hands-on experience on various facets of experience design, and have played key roles in the team bridging the gap between design, dev and biz groups within product teams. My vision is to be the key hand behind the UX design of a world-class product in a team of passionate and uber-smart techies and designers! Specialties: Information Architecture, Wireframing, Heuristic Evaluation, Web standards, Interaction design, Semantic markup, OO CSS, Usability Review

12 Comments Best Comments First
  • Roman Liutikov

    Thursday, July 5th, 2012 20:09

    4

    Awesome! I just learned to use SASS and was looking for something where I can try myself with it. This tutorial should be great for beginners. Thx!

    +2
    • Dainis Graveris

      Friday, July 6th, 2012 04:56

      8

      Thank you Roman, let me know how you succeed on completing this tutorial! :)

      0
  • Bharat Chowdare

    Thursday, July 19th, 2012 02:04

    10

    I have no knowledge on SAAS, but recently came to know about it after using Bones Framework. Thanks for clearly explaining the steps involved in making a website using Twitter Bootstrap.

    +1
    • Dainis Graveris

      Thursday, July 19th, 2012 05:55

      11

      Thanks for kind comment Bharat, SASS is the next shiny thing heh! :)

      +2
  • Pavel

    Tuesday, July 3rd, 2012 02:42

    3

    Thats really some helpful tricks. Thanks for sharing.

    0
    • Ranjith Kumar

      Friday, July 6th, 2012 00:14

      7

      Glad that these are helpful @pavel

      0
  • Malik Dixon

    Tuesday, July 17th, 2012 16:05

    9

    Nice Tutorial. I am learning more about SASS here than I did on other websites. All I can say is “MORE”. I am a beginner as SASS. Thank you Ranjith Kumar.

    0
  • Robb

    Saturday, August 18th, 2012 07:36

    12

    Dude! It was damn useful!!!!

    0
  • Facebook

    Monday, July 2nd, 2012 15:57

    2

    Incredible tutorial Ranjith.
    I’ll test here in my server.
    Thks so much.

    -1
    • Ranjith Kumar

      Friday, July 6th, 2012 00:14

      6

      Thnx m8 :)

      0
  • maurice

    Monday, July 2nd, 2012 13:46

    1

    First of all: Thank you for this howto :)
    But I have got one question: You decided to use SASS instead of LESS. Wouldn’t it make more sense to use LESS in this case? Because Twitter-Bootstrap itself is built with LESS, isn’t it? I would prefer using only one of such stylesheet-languages, instead of mixing two of it.

    -3
    • Ranjith Kumar

      Friday, July 6th, 2012 00:13

      5

      @maurice, yeah its better to use LESS with this. Personally i prefer SASS over LESS and hence preferred to go with it in this tut :)

      0
  • Robb

    Saturday, August 18th, 2012 07:36

    12

    Dude! It was damn useful!!!!

    0
  • Bharat Chowdare

    Thursday, July 19th, 2012 02:04

    10

    I have no knowledge on SAAS, but recently came to know about it after using Bones Framework. Thanks for clearly explaining the steps involved in making a website using Twitter Bootstrap.

    +1
    • Dainis Graveris

      Thursday, July 19th, 2012 05:55

      11

      Thanks for kind comment Bharat, SASS is the next shiny thing heh! :)

      +2
  • Malik Dixon

    Tuesday, July 17th, 2012 16:05

    9

    Nice Tutorial. I am learning more about SASS here than I did on other websites. All I can say is “MORE”. I am a beginner as SASS. Thank you Ranjith Kumar.

    0
  • Roman Liutikov

    Thursday, July 5th, 2012 20:09

    4

    Awesome! I just learned to use SASS and was looking for something where I can try myself with it. This tutorial should be great for beginners. Thx!

    +2
    • Dainis Graveris

      Friday, July 6th, 2012 04:56

      8

      Thank you Roman, let me know how you succeed on completing this tutorial! :)

      0
  • Pavel

    Tuesday, July 3rd, 2012 02:42

    3

    Thats really some helpful tricks. Thanks for sharing.

    0
    • Ranjith Kumar

      Friday, July 6th, 2012 00:14

      7

      Glad that these are helpful @pavel

      0
  • Facebook

    Monday, July 2nd, 2012 15:57

    2

    Incredible tutorial Ranjith.
    I’ll test here in my server.
    Thks so much.

    -1
    • Ranjith Kumar

      Friday, July 6th, 2012 00:14

      6

      Thnx m8 :)

      0
  • maurice

    Monday, July 2nd, 2012 13:46

    1

    First of all: Thank you for this howto :)
    But I have got one question: You decided to use SASS instead of LESS. Wouldn’t it make more sense to use LESS in this case? Because Twitter-Bootstrap itself is built with LESS, isn’t it? I would prefer using only one of such stylesheet-languages, instead of mixing two of it.

    -3
    • Ranjith Kumar

      Friday, July 6th, 2012 00:13

      5

      @maurice, yeah its better to use LESS with this. Personally i prefer SASS over LESS and hence preferred to go with it in this tut :)

      0

Comments are closed.

54.211.95.201 - unknown - unknown - US