Total Followers 132,503
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:
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)
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.
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:
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 »</a></p>
</div>
<hr>
<footer>
<p>© 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.
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.
<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.
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>© 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! :)
Get The Only Freelancer crash course you will ever need to read!
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
Thursday, July 19th, 2012 02:04
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.
Thursday, July 19th, 2012 05:55
Thanks for kind comment Bharat, SASS is the next shiny thing heh! :)
Tuesday, July 17th, 2012 16:05
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.
Thursday, July 5th, 2012 20:09
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!
Friday, July 6th, 2012 04:56
Thank you Roman, let me know how you succeed on completing this tutorial! :)
Tuesday, July 3rd, 2012 02:42
Thats really some helpful tricks. Thanks for sharing.
Monday, July 2nd, 2012 15:57
Incredible tutorial Ranjith.
I’ll test here in my server.
Thks so much.
Monday, July 2nd, 2012 13:46
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.
Friday, July 6th, 2012 00:13
@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 :)
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
![Basic Web Design Video Course – Complete HTML Markup & CSS Styles [Part 3]](http://www.1stwebdesigner.com/wp-content/uploads/2013/03/preview-small-webdesignvideocoursepart3.jpg "Basic Web Design Video Course – Complete HTML Markup & CSS Styles [Part 3]")
![Basic Web Design Video Course – Basic HTML Tags, Structure & CSS [Part 2]](http://www.1stwebdesigner.com/wp-content/uploads/2013/03/preview-small-basicwebdesignvideocoursepart2.jpg "Basic Web Design Video Course – Basic HTML Tags, Structure & CSS [Part 2]")
Roman Liutikov
Thursday, July 5th, 2012 20:09
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!
Dainis Graveris
Friday, July 6th, 2012 04:56
Thank you Roman, let me know how you succeed on completing this tutorial! :)
Pavel
Tuesday, July 3rd, 2012 02:42
Thats really some helpful tricks. Thanks for sharing.
Ranjith Kumar
Friday, July 6th, 2012 00:14
Glad that these are helpful @pavel
Facebook
Monday, July 2nd, 2012 15:57
Incredible tutorial Ranjith.
I’ll test here in my server.
Thks so much.
Ranjith Kumar
Friday, July 6th, 2012 00:14
Thnx m8 :)
Robb
Saturday, August 18th, 2012 07:36
Dude! It was damn useful!!!!
Bharat Chowdare
Thursday, July 19th, 2012 02:04
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.
Dainis Graveris
Thursday, July 19th, 2012 05:55
Thanks for kind comment Bharat, SASS is the next shiny thing heh! :)
Malik Dixon
Tuesday, July 17th, 2012 16:05
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.
maurice
Monday, July 2nd, 2012 13:46
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.
Ranjith Kumar
Friday, July 6th, 2012 00:13
@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 :)