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

Posted in Coding, HTML & CSS, Tutorials • 341 days ago • Written by Ranjith Kumar • 5 Comments

This is the second part of my tutorial on How to Build a Website Using Twitter Bootstrap and SASS where we shall be customizing the Twitter Bootstrap-based web page using SASS. Just to set the context right, we will be starting out where we left off in the previous tutorial. If you haven’t seen it yet, please check it out and work through it. There you will learn how to setup your system for TBS, Ruby, and Compass.

In this tutorial we will be furnishing our webpage from the last tutorial using SASS. By the end of this tutorial you will be at the next level of developing beautiful websites and applications!

What we’ll be creating

Step 1: Creating a custom SASS file

Lets remember that we are using the same file set which we used in the first part of this tutorial. Also, please make sure all the setup guidelines are being followed. Primarily, the Compass compiler should be watching our entire folder to make sure all the changes in the SASS files are being converted to the relevant CSS file.

We can customize the above page in multiple ways:

• We can edit the bootstrap native rules right away, making changes to ‘bootstrap.css’ according to our design
• We can override the bootstrap rules using another stylesheet

The latter is always preferable (we discussed in the first part of the tutorial, that it’s always recommended to use a separate stylesheet file to override rules of any plugins or frameworks), because when it comes to multiple theming of the page, we just have to change the custom CSS file to another one in order to apply different skins to the layout. So lets create a SASS file (extension of a sass file is .scss) and place it in the ‘sass’ folder. Since the page talks about 1stwebdesigner, I’m naming it  ’1wd.scss’, and including it in the HTML. Also make sure you are including it after the line which includes all bootstrap styles. Our folder structure now looks like:

Step 2: Overriding the rules, using a mother hook

As a first step towards customization I always prefer adding a mother class to the body tag of the page, so that I can always group all the custom rules by referring to that class. So, lets start by giving the body tag of our HTML page a class – ‘fwd’. This helps us to maintain a first level of grouping in terms of selectors and makes sure we don’t override the bootstrap selectors directly.

Step 3: Customizing the layout

We will also be using a pinch of CSS3 in our styles. So lets include the CSS3 mixins in our .scss files so that we can make use of most of the CSS3 features easily using a single line of code.

Lets start with the header.

Here is a comparison of our current header and the customized one:

The key changes that we’ll be doing here are:

1. Changing the main navigation items to
   • Coding
   • Freebies
   • Inspiration
   • Tutorials
   • Web Design
   • WordPress
2. Insert the 1WD logo.
   The container ‘brand’ which contains the text ‘Project name’ should be styled in order to contain the logo. Lets add the logo image as a bg and hide the text using ‘text-indent’ and give a relevant height and width and a margin-top of 5px to position it uniformly vertically. The customized style for brand will now look like:

   .brand{
    text-indent:-999px;
    width:169px;
    height:26px;
    padding:0;
    margin:5px 0 0 0;
    background:url(http://cdn1.1stwebdesigner.com/wp-content/themes/1stwd/img/1wd-logo-rd.png)
    no-repeat center center;
   }
   

3. Change the bg color and add a border to the header container (Refer to the code snippet added towards the end of 4th point)
   Lets style the container ‘nav-inner’ by adding a bg-color and a border.
4. Style the nav items and add a border-radius.
   Navigation list items are under the container with class ‘nav’. We have to style the ‘a’ tag within the ‘li’ tag that comes under ‘nav’. Let’s add a border-radius of 5px (line number 11) using css3 mixin which (@include border-radius(5px) generates all the necessary browser specific rules to the CSS file being generated ) and relevant margin and padding along-with a hover bg-color to it (line no: 12. ‘&’ is added as a prefix to indicate the grouping of the selector that follows it. In this case, ‘&:hover’ associates the pseudo class – :hover to the parent selector, which is a.). With all the custom styles added, the navbar section styles looks like:

   .navbar{
    .navbar-inner{
     background:#eee;
     border-bottom:solid 1px #ccc;
     .nav{
      margin-left:20px;
      li{
       a{
        padding:5px;
        margin:5px 5px 0 0;
        @include border-radius(5px);
        &:hover{
         background:#000;
        };
       }
      }
     }
     .brand{
      text-indent:-999px;
      width:169px;
      height:26px;
      padding:0;
      margin:5px 0 0 0;
      background:url(http://cdn1.1stwebdesigner.com/wp-content/themes/1stwd/img/1wd-logo-rd.png)
      no-repeat center center;
     }
    }
   }
   

Next is the hero unit

Here is a comparison of our current hero-unit and the customized one:

The key changes that we’ll be doing here are (the final code for this section is given towards the end of this bulleted section):

1. Change the bg colors of the container and the form within
   Lets style the container ‘hero-unit’ by adding a different bg color-#464646 , and a text color-#fff (line no:2 )
2. Style the header text and the call for action button
   For the text ‘Welcome’ to be in a separate color, we will have to wrap it inside a tag. Lets add it within a span tag, style it, and let’s apply a text-shadow for the whole H1 header.(line no: 4 to 8)
3. Style the form with the login fields
   Let’s add a border radius of 10px to the form using CSS3 mixin (line no: 15), a bg-color #>6d6b6b (line no: 16), and style the label and the input fields (line no. 17 to 30).
4. The CSS code for the hero-unit now looks like:

   .hero-unit{
    background:#464646;
    color:#fff;
     h1{
      @include text-shadow(#000 1px 5px  10px);
      span{
       color:#F5821F;
      }
     }
     .btn-info{
      padding:15px;
      font-size:1.2em;
      }
      form{
      @include border-radius(10px);
      background:#6d6b6b;
      label{
       font-weight:bold;
       font-size:1.2em;
       &.checkbox{
       font-weight:normal;
       font-size:1em;
       color:#2d2d2d;
       }
      }
      input{
      background:#464646;
      border:solid 1px #545252;
      @include box-shadow(inset #2d2d2d 1px 0px 3px);
      color:#8b7b6c;
      }
     }
    }
   

Now comes the thumbnail section

Here is a comparison of our current thumbnail section and the customized one:

The key changes that we’ll be doing here are (the final code for this section is given towards the end of this bulleted section):

1. Style the thumbnail containers and add relevant images
   Let’s style give a border-radius of 10px to the thumbnail container (line no: 2), and a bg-color (line no: 3).
2. Positioning the caption of each thumbnails above the thumbnails.
   Let’s using positioning and absolutely position the caption on top of the thumbnails. To achieve this we will have to apply ‘position:relative’ to the parent tag of the caption (line no: 5), and then position the header (h5) accordingly so that it is appearing just on top of the thumbnail and in line with the bottom-line of the image, and also lets add a text shadow to it (line no: 8 to 13).
3. The code for this section now looks like

   .thumbnail{
    @include border-radius(10px);
    background:#55626B;
    .caption{
     position:relative;
     color:#ccc9c9;
     h5{
      position:absolute;
      top:-19px;
      left:10px;
      font-size:2em;
      color:#fff;
      @include text-shadow(#000 1px 5px 10px);
     }
    }
   }
   

Finally the footer

I am just adding a custom pattern to the footer, add a border-radius and will be increasing the padding of the container to 20px. Please refer to the code of footer below:

footer{
 padding:20px;
 margin-top:30px;
 @include border-radius(10px 10px 0 0);
 color:#fff;
 background:url(http://cdn1.1stwebdesigner.com/wp-content/themes/1stwd/img/bg_header.jpg) repeat left top;
}

Finally after all the customization and coding, here is how our customized page looks:

This is just an intro to the power of SASS and TBS together. In the CSS file that we have used we can make use of variables effectively by storing color values in them and then importing the variable CSS to the main stylesheet at the beginning. With the complexity of each page, all the features of SASS can be leveraged in a much better way. Mixins, Extend, Variables and much more are in store for us to explore and implement.

Get started with this if you are planning to plunge into the world of SASS and wait for more to come your way. I’d appreciate your feedback on my approach and on this tutorial to help me improve!