Skeleton Boilerplate: Learn How To Convert Artthatworks From PSD To HTML

Howdy Folks! In this tutorial you will learn how to convert Artthatworks (if you want to know how to create this design in Photoshop check here!)  from PSD to HTML using Skeleton Boilerplate and make it responsive with media queries. As I mentioned in my last tutorial, I hadn’t tried using a framework until recently. I found the Skeleton Boilerplate Framework which makes it very easy to convert PSD files into HTML, by calling the right classes you can create a quick responsive layout. Sounds great right? Well then get ready and let’s get started.

Demo | Download

Resources for this tutorial

• PSD Download
• Skeleton Boilerplate
• SlidesJS
• Elastislide by Codrops
• Time and Patience :)

What is Skeleton Boilerplate

Skeleton Boilerplate is basically like 960 grid system. In which by calling the right classes you can magically create any columns you want that suites your layout.

What I like in Skeleton Boilerplate

• It’s Responsive: We know that websites now a days is aiming for a fluid/responsive layout. So that viewers can view it nicely from a bigger screensize down to mobile.
• Fast to Start: Skeleton Boilerplate provide us the files that we need for faster developing. We will not be woried about starter layout because it’s already there and well-structured and also it provide basic styling for form elements, typography, and more.
• Ready set Grid: What I like the most is the Grid by just calling the right class it will do the magic for you.

Step 1: Preparation

• Open up the PSD File in Photoshop.
• Your favorite code editor. If you ask me, what’s mine? I’m using Intype.
• Lastly, open up a web browser to test our layout.

Step 2: Getting Files Ready

Since we are using Skeleton Boilerplate, the images directory is already prepared at /images /stylesheets for the CSS stylesheets. All you need to create is a /js directory for our JavaScript and /fonts directory for our fonts to be used.

I will leave it up to you to import the images to be used, like the social icons and background patterns. Or if you are really excited to start, just download the provided files in the resource folder.

Step 3: Simple Starter Layout

To build our HTML layout we should first analyze our design by looking at the Photoshop layout and identify the sections that are unique.

Pay attention to the naming of id or class in every screenshot, these will be the names we will use when we markup the HTML.

Header Section

• The header is divided into 2 sections: the first section is for the logo and navigation, the other section is for the slideshow. These two sections are wrapped with a full width because of the repeating pattern that starts from the very top to way down to the slider section.
• For the grayish background with the pattern we will be applying that to our body tag.

Welcome Section

• Nothing too fancy here, we can see a big h1 text with a graphic.

Service Section

• In this section we can see a 3 column layout that contains heading title, content text, and a read more button.

Recent Projects Section

• In this section there are 3 images showcasing what we have done. But it’s kinda boring if we leave it that way right? How about we turn it into a carousel where we can navigate left and right? Sound great doesn’t it? I’m going show you how later on using a great jQuery plugin by Codrops.

Testimonial Section

• In this section we can see a thumbnail photo, a blockquote that contain the testimonial text, name and a link to a website.

Footer Section

• In this section there are 2 rows, first is for the widgets that contains a 3 column layout which is for about, blog and twitter feed. The second row will be for the copyright text and logo.

Here is the image of the overall markup that we have done.

Now, based on these notes we create the following HTML layout.

  <div class="wrap-header">          <div class="container">Logo & Navigation content goes here</div>          <div class="container slides">Slideshow content goes here</div>  </div><!-- end wrap-header -->    <div class="container welcome">          Welcome content goes here  </div><!--  end welcome -->    <div class="container service">          Services content goes here  </div><!-- end service -->    <div class="container recent-projects">          Recent Project content goes here  </div><!-- end recent-projects -->    <div class="container testimonial">          Testimonial content goes here  </div><!-- end testimonial -->    <footer>          <div class="container widgets">                  Widgets content goes here          </div><!-- end widgets -->  </footer>    <footer class="sub-footer">          Copyright content goes here  </footer>  

Open up index.html, scroll down and you will find “Delete everything in this .container and get started on your own site!”, delete everything and copy and paste the code above.

By calling the container class in Skeleton Boilerplate this will center the div and have a width of 960px. So in our markup you’ll notice we added a class of container in every section, except to the wrapping div that contains the full width.

Before we proceed let’s just style the font in the layout.

  @font-face{  font-family: 'Rokkitt';  src: url('../fonts/Rokkitt/Rokkitt-Regular.ttf') format('truetype');  }    * {  -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;  box-sizing: border-box; }body{  font-family: Helvetica, Arial, Sans-serif;  background: #e3e3e3 url(../images/body-bg.jpg);  }    a, a:visited {  color: #67b256;  text-decoration: none;  outline: 0;  }    a:hover, a:focus {  text-decoration: underline;  }    p{  font-size: 14px;  color: #3b464b;  }    h1{  font-size: 30px;  font-family: 'Rokkitt', serif; color: #23353e;  }    h2{  font-size: 22px;  font-family: 'Rokkitt', serif;  color: #23353e;  }  

• In the above CSS, we just declared our own font which is placed in /fonts, /Rokkit directory. If you check the PSD file it has a different font, so we just replaced it with a font that is available in Google fonts.

• Next, we target * all elements and styled using new CSS3 box-sizing to border-box, what this allows you to add a border to a 20px by 20px div and the size will remain 20px by 20px.

• For our body we added a repeated background and set our font.

• Then we styled a, p, h1 h2 according to its styles.

Step 4: Working on Header Section

Now let’s add the content inside the first container div, here’s the HTML.

    <h1 class="logo"><a title="Artthatworks" href="#">Artthatworks</a></h1>  <nav class="primary">          <ul>                  <li><a class="active" href="#">home</a> /</li>                  <li><a href="#">portfolio</a> /</li>                  <li><a href="#">blog</a> /</li>                  <li><a href="#">contact</a></li>          </ul>  </nav>    

• In the above HTML, we just added the logo by wrapping it in a h1 tag with an a tag inside it, we also give the h1 tag a class of logo.

• Next we used an HTML 5 tag nav and give it a class of primary. Inside the nav we create an unordered list ul which contains our navigation links.

Open up the /stylesheets directory and open up layout.css, this is where we will place our CSS styles. Now let’s add the CSS as follows:

    h1.logo a{  display: block;  width: 183px;  height: 32px;  background: url(../images/logo.png) no-repeat;  float: left;  /* Nicolas Gallagher Image replacement technique */  font: 0/0 a;  text-shadow: none;  color: transparent;  }    /* NAVIGATION */  nav.primary{  float: right;  }    nav.primary ul{  float: right;  margin-top: 5px;  }    nav.primary ul li{  float: left;  margin-left: 20px;  color: #67b256;  }    nav.primary ul li a{  display: inline-block;  padding-right: 20px;  text-decoration: none;  font-family: 'Rokkitt', serif;  font-size: 19px;  font-weight: 600;  color: #67b256;  text-shadow: 0 1px 0 #090d0f;  }    nav.primary ul li:last-child a{  padding: 0;  }    nav.primary ul li a.active{  color: #fff;  }    nav.primary ul li a:hover{  color: #fff;  }    

• In the above CSS, we styled the logo by displaying it to block, giving it a fixed width and height, adding a background image, floating it right and lastly a new way of hiding a text by Nicolas Gallagher.

• Next we styled the navigation by floating it left. Then, we floated the ul element to the right and gave it a top margin to align it properly with the logo. All li elements are floated to the left, with a 20px left margin and we changed the colour to green. The a inside li tags is displayed as inline-block, this will help not to push down the / we added after the a tag, then we included a 20px padding to the right to equally centre the links from each dividers, then lastly we styled the font. For the last child li elements we zero out the padding, then we gave the same color for active and hover.

Now let’s add the content inside the slides element, here’s the HTML Markup base on ResponsiveSlides documentation.

    <ul class="rslides clearfix">          <li>                  <img src="images/slide-1.jpg" alt="" />                  <p class="desc">Description goes here 1</p>          </li>          <li>                  <img src="images/slide-1.jpg" alt="" />                  <p class="desc">Another Description goes here 2</p>          </li>          <li>                  <img src="images/slide-1.jpg" alt="" />                  <p class="desc">Last Description goes here 3</p>          </li>  </ul>  <h2>Featured Project</h2>    

• In the above HTML, basically we just followed the HTML Markup and added another tag for our description which is <p> with a class of desc and added a clearfix class to ul. What clearfix does is deal with the floated elements. Without it, parent containers of the elements might have a broken height.

Now let’s add first the required CSS ResponsiveSlides

    /* rslides styles */  .rslides {  position: relative;  list-style: none;  width: 100%;  padding: 0;  margin: 0 0 20px 0;  }    .rslides li {  position: absolute;  display: none;  width: 100%;  left: 0;  top: 0;  }    .rslides li:first-child {  position: relative;  display: block;  float: left;  }    .rslides img {  display: block;  height: auto;  float: left;  width: 100%;  border: 0;  }    

Now let’s add our own CSS styles as follows:

    .slides{  position: relative;  margin-top: 30px;  }    .slides h2{  display: inline-block;  padding-right: 30px;  border-right: 1px solid #9b9b9b;  }    .desc{  display: inline-block;  margin: 0;  position: absolute;  bottom: -62px;  left: 210px;  }    .rslides li img{  border: 5px solid #fff;  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);  }    a.prev{  position: absolute;  right: 130px;  display: block;  width: 13px;  height: 22px;  background: url(../images/prev-next.png) no-repeat;  background-position: top left;  /* Nicolas Gallagher Image replacement technique */  font: 0/0 a;  text-shadow: none;  color: transparent;  }    a.prev:hover{  background-position: bottom left;  }    a.next{  position: absolute;  right: 0;  display: block;  width: 13px;  height: 22px;  background: url(../images/prev-next.png) no-repeat;  background-position: top right;  /* Nicolas Gallagher Image replacement technique */  font: 0/0 a;  text-shadow: none;  color: transparent;  }    a.next:hover{  background-position: bottom right;  }    ul.rslides_tabs{  position: absolute;  right: 20px;  }    ul.rslides_tabs li{  float: left;  margin-right: 10px;  }    ul.rslides_tabs li a{  display: block;  background: url(../images/pagination.png) no-repeat;  background-position: top;  width: 20px;  height: 21px;    /* Nicolas Gallagher Image replacement technique */  font: 0/0 a;  text-shadow: none;  color: transparent;  }    ul.rslides_tabs li.rslides_here a, ul.rslides_tabs li a:hover{  background-position: bottom;  }    

• In the above CSS, first we made the parent element’s position relative. By doing this we set it to absolute along with the child elements based on the parent element width and height. Also we give it a top margin to align it base on the PSD layout.
• Style the h2 by displaying it to inline-block, add padding-right and a 1px right-border.
• Next is the description we displayed as inline-block, zero out its margin, position it absolutely the same on the PSD.
• Next is the slide img, we style it by adding a 5px white border. In our design we have that bottom shadow left and right, we will change that by adding a box-shadow.
• Next we style the auto generated classes done by the JavaScript which is the .prev for previous and .next for next. What we did was to position it absolutely to our desired position, displayed it as a block element, gave it a fixed width and height, and positioned the background based on the image sprite. The same thing with the rslides_tabs the only thing different is we floated the li elements and give it a 10px right margin.

Now to make the slider functional, copy and paste the responsiveslides.min.js to /js directory then copy and paste the script below and paste it before the closing of the body tag.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  <script src="js/responsiveslides.min.js"></script>  <script>    $(function () {          $(".rslides").responsiveSlides({                  pager: true,                  nav: true          });    });  </script>    

Step 5: Working on Welcome Section

Now let’s add the content inside the welcome div, here’s the HTML.

    <h1>          Hi! Im <span class="green">Michael Burns</span> a graphic / web designer </br> based in Philippines.  </h1>  <span class="graphic">          <img src="images/graphic.png" alt="" />  </span>    

• We wrapped our welcome text with an h1 tag and added a span with a class of green to target the name and change the colour later on with CSS. When we take a look at the welcome section there is a graphic on the bottom so we mark up our HTML by adding a span with a class of graphic so that later on we can position the image absolutely.

Now let’s add the CSS as follows:

    .welcome{  position: relative;  padding: 15px 0;  border: 1px dashed #9b9b9b;  border-right: none;  border-left: none;  margin: 40px auto;  }    .welcome h1{  text-align: center;  }    .green{  color: #67b256;  }    .welcome .graphic img{  position: absolute;  margin: 0 auto;  left: 0;  right: 0;  bottom: -7px;  }    

• First we needed to position the parent container which is the .welcome div to relative, added a 15px padding top and bottom, a dashed border on top and bottom, zero on left and right.
• Next we centered h1, added a colour to .green class.
• Next we position the graphic image absolutely to make it centered by adding a margin zero auto, left, right zero, and pushed it down a bit by adding -7px bottom.
• Lastly we added a margin top and bottom to bump it down from the slider section.

Step 6: Working on Service Section

Now let’s add the content inside .service div, here’s the HTML.

    <div class="one-third column">          <h2>Web Design</h3>          <p>Suspendisse fringilla hendrerit molestie. Duis bibendum tellus at ligula ornare a cursus enim lacinia. Aliquam erat volutpat. Nam consectetur, erat placerat pharetra consequat, eros lorem facilisis arcu, eget convallis elit turpis ac lacus. Quisque a nisi quis.</p>          <a href="#" class="more">read more</a>  </div>    <div class="one-third column">          <h2>Graphic Design</h3>          <p>Suspendisse fringilla hendrerit molestie. Duis bibendum tellus at ligula ornare a cursus enim lacinia. Aliquam erat volutpat. Nam consectetur, erat placerat pharetra consequat, eros lorem facilisis arcu, eget convallis elit turpis ac lacus. Quisque a nisi quis.</p>          <a href="#" class="more">read more</a>  </div>    <div class="one-third column">          <h2>Other Services</h3>          <p>Suspendisse fringilla hendrerit molestie. Duis bibendum tellus at ligula ornare a cursus enim lacinia. Aliquam erat volutpat. Nam consectetur, erat placerat pharetra consequat, eros lorem facilisis arcu, eget convallis elit turpis ac lacus. Quisque a nisi quis.</p>          <a href="#" class="more">read more</a>  </div>    

• We just divided it into 3 columns by adding a class one-third column on each div. Then inside of it we added a heading h2 for our heading title, a p for its content and a link a with a class of more.

Now let’s add the CSS as follows:

    a.more{  display: inline-block;  padding: 5px 15px;  background: #67b256;  border: 1px solid #539544;  border-top: 1px solid #93cc84;  box-shadow: 0 -1px 0 #539544;  -webkit-border-radius: 2px;  -moz-border-radius: 2px;  border-radius: 2px;  text-decoration: none;  color: #fff;  text-shadow: 0 -1px 0 #539544;  }    a.more:hover{  background: #6ebd5c;  }    .service{  margin: 20px auto;  }    

• Since we have already formatted our paragraphs and headings, the only thing we need to style now is the read more button. First we displayed it as an inline-block, gave it padding, then followed by the background, border, box-shadow, border-radius, colour, text-shadow. Lastly, we gave a 20px margin to our parent container to give it a cool space from top and bottom.

Step 7: Working on Recent Projects Section

Now let’s add the content inside .recent-projects div, here’s the HTML. This HTML mark up is based on the Elastislide by Codrops that I provided in the resources.

    <h2>My Current Pojects</h2>  <div id="carousel" class="es-carousel-wrapper">          <div class="es-carousel">                  <ul>                          <li><a href="#"><img src="images/project-1.jpg" alt="" /></a></li>                          <li><a href="#"><img src="images/project-2.jpg" alt="" /></a></li>                          <li><a href="#"><img src="images/project-3.jpg" alt="" /></a></li>                          <li><a href="#"><img src="images/project-1.jpg" alt="" /></a></li>                          <li><a href="#"><img src="images/project-2.jpg" alt="" /></a></li>                          <li><a href="#"><img src="images/project-3.jpg" alt="" /></a></li>                  </ul>          </div>  </div>    

Now let’s add the CSS as follows: This CSS is a straight copy paste from Elastislide CSS styles so copy and paste it to our layout.css.

    .recent-projects{  margin: 40px auto;  }    /* Elastislide Style */    .es-carousel-wrapper{  padding:10px 37px;  position:relative;  }    .es-carousel{  overflow:hidden;  }    .es-carousel ul{  display:none;  }    .es-carousel ul li{  height:100%;  float:left;  display:block;  }    .es-carousel ul li a{  display:block;  margin: 0 10px;  }    .es-carousel ul li a img{  display:block;  border: 5px solid #fff;  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);  max-height:100%;  max-width:100%;  }    .es-nav span{  position:absolute;  top:50%;  left:0;  background:transparent url(../images/prev-next.png) top left no-repeat; width: 13px;  height: 22px;  margin-top:-13px;  text-indent:-9000px;  cursor:pointer;  }    .es-nav span.es-nav-next{  right: 0;  left:auto;  background-position:top right;  }    .es-nav span:hover{  background-position: bottom left;  }    .es-nav span.es-nav-next:hover{  background-position: bottom right;  }    

• We tweaked the CSS to make it fit to our design, removed the background of the .es-carousel-wrapper and .es-carousel div’s. Then added a styling to the image by giving it a 5px stroke and box-shadow. Lastly, tweaked the prev and next as we did previously in our slider section.

We need to copy and paste jquery.easing.1.3.js and jquery.elastislide.js in our /js directory. Now to make it work we need to add the script below our .rslides script.

    $('#carousel').elastislide({          imageW  : 300, //width of the image          minItems        : 3 //item shown  });    

Step 8: Working on Testimonial Section

Now let’s add the content inside .testimonial div, here’s the HTML.

    <img src="images/me.jpg" alt=""/>                  <blockquote>                          <p>In hac habitasse platea dictumst. Donec sodales elit sed orci consectetur mollis. Cras eget erat tellus, eu elementum felis. Morbi tincidunt varius nisl, molestie ullamcorper sapien accumsan quis. Quisque velit risus, ullamcorper non tempor id, venenatis quis metus. </p>                          <cite><strong>Michael Burns</strong></cite>                          <a href="#" target="_blank">www.burnstudios.deviantart.com</a>                  </blockquote>    

• In the above HTML, first we added that thumbnail image, since it is a quote we will use a blockqoute tag where inside is a paragraph for the testimonial text itself, a cite for the author and a link for the site link.

Now let’s add the CSS as follows:

    .testimonial{  margin: 40px auto;  padding: 0 50px;  }    .testimonial img{  float: left;  margin-right: 35px;  border: 5px solid #fff;  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);  }    blockquote{  background: url(../images/quote.png) no-repeat;  overflow: hidden;  border: none;  }    blockquote p{  font-size: 14px;  padding-left: 30px;  font-style: normal;  }    blockquote a{  display: block;  text-align: right;  font-size: 12px;  font-style: italic;  }    cite{  text-align: right;  font-style: normal;  color: #23353e;  }    

• First we styled the testimonial container by padding 50px left and right, also we give it some breathing room 40px on top and bottom.
• Next we styled the image the same as the image in recent projects.
• Next we styled the blockquote by adding a quote image, overflow to hidden so that if a testimonial/text is too long the text will not flow below the thumbnail image, then removing the left border since by default it has a border left styling. Followed by basic styling and alignment for p, cite and a.

Step 10: Working on Widgets Section

Now let’s add the content inside .widgets div, here’s the HTML.

    <div class="one-third column  about">          <h2>About Me</h2>          <img src="images/me-large.png" alt="" class="thumb"/>          <div>                  <p>In hac habitasse platea dictumst. Donec sodales, elit sed orci consectetur mollis. Cras eget erat tellus, eu elementum felis. Morbi tincidunt varius nisl. </p>                  <ul>                          <li><a href="#" target="_blank"><img src="images/facebook.png" alt="" /></a></li>                          <li><a href="#" target="_blank"><img src="images/twitter.png" alt="" /></a></li>                          <li><a href="#" target="_blank"><img src="images/rss.png" alt="" /></a></li>                  </ul>          </div>  </div><!-- end about -->    <div class="one-third column  blog">          <h2>Latest News</h2>          <ul>                  <li>                          <p>Project design for donec laoreet dictum arcu, quis scelerisque turpis placerat varius</p>                          <small>10.11.11 - Web Design</small>                  </li>                  <li>                          <p>Project design for donec laoreet dictum arcu, quis scelerisque turpis placerat varius</p>                          <small>10.11.11 - Web Design</small>                  </li>          </ul>          <a class="dark-more">view more</a>  </div><!-- end blog -->    <div class="one-third column  tweet">          <h2>Latest Tweets</h2>          <ul>                  <li>                          <p>AT&T Announces Five New Android Smartphones - <a href="#">http://on.mash.to/oCgEWK</a></p>                          <small>1 min ago</small>                  </li>                  <li>                          <p>Twitter will soon reformat all links with t.co regardless of length - <a href="#">http://on.mash.to/qUTLCe</a></p>                          <small>about 1 hour ago</small>                  </li>          </ul>          <a class="dark-more">@_burnstudio</a>  </div><!-- end tweet -->    

• We marked up our HTML by adding 3 divs with a class of one-third column to make it 3 columns and on each div we added another class about, blog and tweet this class will help us to target the inside elements when we are styling.
• On the about div we added an h2 tag for our heading, an image, then a div with a paragraph inside it and an unordered list for our social icons.
• For blog and tweet we added a heading also followed a unordered list that contains the content which is paragraph and small tag, lastly a button with a class of dark-more.

Now let’s add the CSS as follows:

    footer{  background: url(../images/noise.jpg) 0 0;  /* IE Fallback Background */  background:   url(../images/triangle-top.png) 0 0 repeat-x,   url(../images/noise.jpg) 0 0;  padding: 30px 0 30px 0;  }    footer h2{  color: #fff;  text-shadow: 0 1px 0 #111a1f;  }    .about img.thumb{  float: left;  margin-right: 20px;  }    .about div{  overflow: hidden;  }    .about p{  color: #a4afb4;  font-size: 13px;  text-shadow: 0 1px 0 #111a1f;  }    .about ul li{  float: left;  margin-right: 10px;  }    .blog ul li, .tweet ul li{  margin: 0;  border-bottom: 1px dashed #0f161a;  border-top: 1px dashed #37515e;  padding: 15px 0;  }    .blog p, .tweet p{  color: #a4afb4;  font-size: 13px;  text-shadow: 0 1px 0 #111a1f;  margin-bottom: 10px;  }    .blog small, .tweet small{  color: #667983;  text-shadow: 0 1px 0 #111a1f;  }    .blog ul li:first-child, .tweet ul li:first-child{  border-top: none;  padding-top: 0;  }    .blog ul li:last-child, .tweet ul li:last-child{  border-bottom: none;  padding-bottom: 0;  }    a.dark-more{  display: inline-block;  padding: 5px 15px;  background: #286065;  border: 1px solid #0f161a;  border-top: 1px solid #558d91;  box-shadow: 0 -1px 0 #0f161a;  -webkit-border-radius: 2px;  -moz-border-radius: 2px;  border-radius: 2px;  text-decoration: none;  color: #fff;  text-shadow: 0 -1px 0 #0f161a;  }    a.dark-more:hover{  background: #2d6b71;  }    

• We styled the footer tag by giving it a background. Notice that I added multiple backgrounds, first is an IE6 Fallback since IE doesn’t recognize multiple backgrounds in a stacking order, followed by the two background triangle-top.jpg and noise.jpg. We also gave it top and bottom padding.
• Next we target the h2 elements by changing the colour and adding text-shadow.
• In the about column, first we styled the image by floating it to the left and add a margin right 20px, styled the .about div by changing the overflow to hidden. I’m sure you already know what the purpose of this is since I explained it in the testimonial section. Next we styled the paragraph follow by the social icons by floating the list elements left and give it a 10px right margin.
• For the blog and tweet they have the same styling, first we styled the list elements by 0 out the margin, added a dark top border and light bottom border, and gave it a 15px breathing room top and bottom. Next we styled the paragraph with a basic styling and a margin bottom. Next we styled the small tag by giving it a lighter color and a text shadow. Next we targetted the first-child element by removing the top padding and the top border, the same with the last-child but this time instead of top change it to bottom. Lastly, we styled the dark-more by just copying the same styles we did in more button but this time let’s change the colour the same on the PSD layout.

Step 11: Working on Footer Section

Now let’s add the content inside .sub-footer tag, here’s the HTML.

    <div class="container">          <div class="eight columns left">                  <p>Copyright 2010 <a href="#">1stwebdesigner</a> | Design by <a href="#">Michael Burns</a></p>          </div>            <div class="eight columns right">                  <h1 class="logo"><a href="#" title="Artthatworks">Artthatworks</a></h1>          </div>  </div>    

• In above HTML, we marked it up by adding 2 divs with a class of eight columns to make it 2 columns and in each div we added another class left and right.
• right class contains the copyright text, left class contains the logo.

Now let’s add the CSS as follows:

    footer.sub-footer{  background: #1a272e;  border-top: 1px solid #34454d;  }    footer .left p{  color: #fff;  font-size: 12px;  margin: 0;  }    footer .left a{  color: #67b256;  text-decoration: none;  font-size: 12px;  }    footer .left a:hover{  text-decoration: underline;  }    footer .right .logo{  float: right;  }    

• In above CSS, we styled the .sub-footer container by adding a background and a border top. Then we changed the colour of the left paragraph and the link. Lastly, we floated the logo to right.

Now everything looks good, the same as our PSD layout.

Step 12: Working on Media Queries Section

When you try resizing the browser, it’s responsive, but there are some elements that are not good to look at in different viewports, especially the slider. So what we are going to do is to fix it by changing some styling in media queries.

Now let’s add the CSS as follows:

    /* Smaller than standard 960 (devices and browsers) */  @media only screen and (max-width: 959px) {  }    /* Tablet Portrait size to standard 960 (devices and browsers) */  @media only screen and (min-width: 768px) and (max-width: 959px) {  .about img.thumb{ display: none; }  }    /* All Mobile Sizes (devices and browser) */  @media only screen and (max-width: 767px) {  nav.primary{  float: left;  margin-top: 30px;  }    nav.primary ul li:first-child{  margin-left: 0;  }    .slides h2{  padding: 0;  border: none;  }    .slides .desc{  display: none;  }    .testimonial img{  display: none;  }    .one-third.column{  margin: 20px 0;  }    .left p{  text-align: center;  }    footer .right .logo{  display: none;  }  }    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */  @media only screen and (min-width: 480px) and (max-width: 767px) {  }    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */  @media only screen and (max-width: 479px) {  nav.primary ul li:last-child{  margin-left: 0;  }  }    

• In the above CSS, we removed the image in about widgets in Tablet Portrait size to standard 960.
• Next thing to handle is all mobile sizes. First we floated the navigation to the left because by default it is floated to the right, then we removed the left margin of the list item first-child element. Next in the slideshow section we removed the padding and border of the heading, then we removed the description by changing the display to none. On the testimonial section we removed the thumbnail image by changing the display to none. Notice we have 3 columns in service section and on widget section and it is not spaced very well on top and bottom so we added a 20px margin on top and bottom. Next on footer section we centre the copyright text and hide the logo by changing the display again to none.
• In mobile portrait size to mobile landscape size, if you look at the navigation the last list element is pushed below and 20px form the right so we are going to remove the left margin by changing it to zero.

Finally We’re Done!

We just finished our responsive layout using the Skeleton Boilerplate. How was it? I hope you learned something in this tutorial. Feel free to drop your thoughts below, or if you have some suggestions, techniques or other boilerplate recommendations.

Oh and if you want to learn how to create this design in Photoshop in the first place, check our previous PSD tutorial to this very design!