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

Posted in Coding, HTML & CSS, Tutorials1 year ago • Written by 52 Comments

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

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!

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

37 Written ArticlesWebsiteGoogle+

Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. See his works at burnstudio. Other than that he loves Coffee and his Girl.

52 Comments Best Comments First
  • sanjay

    Thursday, November 22nd, 2012 05:16

    35

    Cool tutorial Micheal! You might want to use instantblueprint.com for the html file generator, it creates those needed files, css, js for you. I always use it on my tutorials too :)

    +1
  • tltl

    Thursday, November 8th, 2012 22:07

    1

    Where file PSD,you?

    +1
    • Rean John Uehara

      Friday, November 9th, 2012 02:18

      4

      Looks like the link is working. ;)

      +1
      • nimsrules

        Friday, November 9th, 2012 03:03

        6

        That does it. Again thanks for the tut and the freebie :)

        +1
        • Michael John Burns

          Friday, November 9th, 2012 05:18

          8

          Hello Nimsrules, You’re welcome. Keep coming back. Don’t forget to share this tutorial :)

          +1
  • Ayaz Malik

    Monday, November 12th, 2012 11:17

    21

    Nicely done! a little fade in type of effect on hover, on the slide thumbnails above footer will make it even better :p

    0
  • Selvamanikandan

    Monday, November 12th, 2012 04:16

    20

    nice tutorial.. good luck mate..

    0
  • Référencement naturel

    Tuesday, November 13th, 2012 14:56

    24

    Wow very good tutorial, i will test this for my next website, i hope to realize the same work :) Thank you

    0
  • Brad Potter

    Tuesday, November 13th, 2012 10:53

    23

    This tutorial has really helped me thanks guys!

    0
    • Michael John Burns

      Tuesday, November 13th, 2012 18:53

      25

      Hey Brad, glad to hear that this tutorial helped you. You’re welcome Brade ;)

      0
  • mixcod

    Sunday, November 11th, 2012 18:25

    17

    Amazing, i like this tutorial, but im still wondering why you didnt complete all pages? i mean portfolio and blog and contact. thk you :)

    0
    • Michael John Burns

      Sunday, November 11th, 2012 22:21

      18

      Hello Mixcod, We only do the homepage tutorial since we only cover homepage designing from Photoshop. Don’t worry Mixcod, next time we would cover complete designing and converting from homepage, blog, about, contact. Be sure to stay updated.

      0
      • mixcod

        Monday, November 12th, 2012 16:20

        22

        Of course my brother Michael, i like your tutorials, and im thankful. cuz im still newbie i have no idea how to make the conception, and the puspose of the website, i can do that for portfolio or simple pages, but for big sites i cant do that. anyway thank you so much :)

        0
  • Lakhyajyoti

    Sunday, November 11th, 2012 09:12

    16

    Great tutorial. Learn something new here. Thanks for sharing.

    0
    • Michael John Burns

      Sunday, November 11th, 2012 22:24

      19

      Hello Lakhyajyoti, Good morning. Glad that you learn something for this. Do you find it easy to follow? If no, kindly state your suggestion how to improve the tutorial. It would be great we would hear from the readers.

      0
  • Falconerie

    Friday, November 9th, 2012 02:38

    5

    nice tutorial! I love the buttons..

    0
    • Michael John Burns

      Friday, November 9th, 2012 05:15

      7

      Hello Falconerie, I love the buttons too. Which one do you prefer a minimal button or a heavy styled button?

      0
  • nimsrules

    Thursday, November 8th, 2012 23:13

    2

    Quite a detailed and comprehensive tutorial, Michael. Just one thing, I think there’s something wrong with the PSD’s resource.

    0
    • Rean John Uehara

      Friday, November 9th, 2012 02:18

      3

      Hi nimsrules, looks fine to me now. Can you check?

      0
  • nimsrules

    Friday, November 9th, 2012 05:28

    9

    I’m always waiting for 1WB’s newsletter, always learn something new from here. Today’s tut taught me how to style the navigation of a slider. I always preferred sliders with auto sliding features and turned off navigation :P

    0
  • Kevin

    Friday, November 9th, 2012 12:33

    10

    Great tutorial – it is helping me understand coding. Are you planning on doing a tutorial on how to code the portfolio page o r is there one already I can follow?

    Thanks

    0
    • Michael John Burns

      Friday, November 9th, 2012 18:52

      11

      Hello Kevin, Hell Yeah! here is a Portfolio type PSD to HTML/CSS tutorial Link.

      0
      • Kevin

        Saturday, November 10th, 2012 02:04

        13

        Thanks Michael. What I was looking for was a tutorial on coding the actual portfolio page not a portfolio site (although that’s another great tutorial). This tutorial, for example, shows how to code the home page – is there a tutorial to show how to code a portfolio page that would show web work, graphic work, etc?

        Thanks

        0
        • Michael John Burns

          Saturday, November 10th, 2012 07:49

          14

          Oh I get what you mean now. Well let me add that on my list, hopefully soon I can publish it here on how to code a portfolio page. For this time try to learn from this tutorial maybe this will help you build and code your own portfolio page. :)

          0
          • Kevin

            Saturday, November 10th, 2012 12:20

            15

            Thank you I will do that. This has been very helpful.

            0
  • roni

    Wednesday, November 14th, 2012 04:29

    26

    I am concerned about your use of the footer tag.
    ” The HTML Footer Element () represents a footer for its nearest sectioning “.
    Here you have 2 footers for 1 section ( root section )

    Aren’t we having a semantic issue here ?

    0
    • Michael John Burns

      Saturday, November 17th, 2012 21:26

      34

      Hello Rony, Good point. I’m confused about it too. Because I was thinking the widget is on footer part. So what I did I added different class on each footer which is widgets and the other is sub-footer. I think it’s still semantic but I’m not sure.

      Ex. there are lot of navigation we used nav tag. the one is primary and the other is on the sidebar wich is for example links. But we assign different class on that nav tag. Ex. primary the other is secondary/links or what ever you call it.

      I can’t say if i’m right but that’s my point of view. Thanks for pointing it again Rony. Let me know what you can say about it.

      +1
  • Rico

    Wednesday, November 14th, 2012 09:26

    27

    Hello Michael thanks for that Tutorial. But I only reach step 4. Can you explain exactly in which files you put the different codes. Can you do a Video to that tutorial? I would be very grateful because i want to learn that!
    best regards from germany

    0
    • Michael John Burns

      Saturday, November 17th, 2012 21:20

      33

      Hello Rico, sorry for the late responds. I can’t do a video tut for now.

      Try to read carefully Rico. I think I explain it very well on top. But yeah, on Step 4 The first code will be place on div with a class of container. As you notice in Step 3 we divided each section and assign div. Try to view this image. On the top part we have a wrap-header, container and container slides. You will place the first code on the container. Since the code contains logo and navigaiton. Hope this helps.

      Talk to me skype if you didn’t catch up what I said. Here is my skype ID mj_burns10

      0
  • sanjeev

    Wednesday, December 26th, 2012 06:12

    43

    well i tried your step but at the very last footer section it got repeated.
    http://i49.tinypic.com/5dj6ec.png

    0
    • sanjeev

      Thursday, December 27th, 2012 00:32

      44

      need help guys please

      0
      • Michael John Burns

        Friday, December 28th, 2012 02:52

        45

        Hello Sanjeev, I apologize for the late reply.

        I gues you place it on

        w/o the class of sub-footer. Kindly try it and let me know. Or you can add me on skype mjburns10 and show me the code so that I can help you fast.

        0
        • sanjeev

          Monday, December 31st, 2012 00:18

          48

          hello michael! you there and did you get my code? as i added you in skype and gmail. Please responde

          0
        • sanjeev

          Friday, December 28th, 2012 06:53

          46

          ok i have added you in skype and as i guess your tutorials is not showing lifted effects in content slider edge.. Hope to catch you in skype…well do you have hotmail or gmail id so that i can forward you the css files.

          0
          • sanjeev

            Friday, December 28th, 2012 06:57

            47

            ok i have listed the code in the following link. Please feel free to look at it
            http://pastebin.com/KNWuypWH

            0
  • Mindi

    Monday, January 14th, 2013 19:12

    52

    Really very neat and well explained tutorial on Skeleton. Thank you so much!

    0
  • Ian

    Monday, January 14th, 2013 06:09

    51

    Thank you for a well thought out tutorial, I will try Skeleton out for myself. I love the typo in the header images on this page “Artthatwroks”.
    Keep up the good work
    Regards

    0
  • Michael John Burns

    Wednesday, January 2nd, 2013 03:06

    49

    Hello Yusuf, Happy new year to you. Glad you love it. Don’t forget to share it with your friends. :)

    0
  • manik

    Saturday, December 22nd, 2012 14:24

    42

    which software is more effected to convert PSD to HTML?

    0
    • CrusnikCore

      Thursday, January 3rd, 2013 13:12

      50

      None. You need to do it by hand. Code it yourself or hire someone.

      There is no magical tool for this.

      0
  • Francis

    Wednesday, December 12th, 2012 16:42

    41

    This is an excellent tutorial, but i must say, quite late compared to the psd tutorial. I followed that psd tutorial and programmed the page myself. It took a very long time for me to make it, but it kinda worked. I actually had no idea what i was doing and therefore am very happy that you made this tutorial. Please keep up the good work!

    0
  • Barry Reynolds

    Friday, November 16th, 2012 14:19

    30

    Great tutorial and awesome looking site- very cleanly coded too. The only thing I would add, and like I have added already to http://www.reynoldsdigital.com are buttons made out of CSS, it’s much lighter and the load times are significantly improved which is so important for mobile browsers.

    0
    • Michael John Burns

      Saturday, November 17th, 2012 21:08

      31

      Hello Barry, that website is great. Yeah! most website now aims speed, minimal, great Typography using web fonts and most important the website is Responsive.

      0
  • Aj Fruza Aviado

    Friday, November 16th, 2012 00:19

    29

    Nice! I’m gonna try this immediately ;)

    0
    • Michael John Burns

      Saturday, November 17th, 2012 21:10

      32

      Hello Aj, don’t forget to share the finish outcome. Hope this tutorial helps. Let us know what do you think of the tutorial. ;)

      0
  • Abhimanyu Rana

    Wednesday, November 14th, 2012 22:57

    28

    Great work!! Thanks for share.

    0
  • Kayut

    Sunday, December 2nd, 2012 08:03

    40

    Thanks a lot for this fantastic tutorial!
    However if you check the final page on iPhone 4s, the main navigation breaks in two line!
    The other thing is that there is a small mistake in description of the section 4:
    Logo is not floated right, but left and Navigation is not floated left, but right! :-)

    Could you please help me to understand how it works?
    I learned that for a responsive design you have to use percentages for width, margin, padding and so on instead of using fix pixels. However in this tutorial we use every where fix pixels.
    Could you please help me to understand how it works that despite fix pixels we have a fluid grid at the end?

    Many thanks again

    0
  • Mark

    Tuesday, November 27th, 2012 06:28

    38

    Cool, but how do you alter the speed of the rslides. It’s too fast. Want to slow it down so you see each slide longer.

    Couldn’t see any reference to slideSpeed: 1150, or similar

    0
    • Michael John Burns

      Tuesday, November 27th, 2012 23:34

      39

      Hello Mark you can control the speed by change the slideSpeed: 350, note it is by milliseconds. You can check the documentation for example on .

      0
  • Lucy

    Thursday, November 22nd, 2012 13:48

    36

    Brilliant tutorial michael thanks

    0
  • Pipeta

    Friday, November 23rd, 2012 17:49

    37

    Excellent post, very very helpful.
    Thanks for sharing your knowledge to us. You got +1 karma from me :)

    0
  • Mindi

    Monday, January 14th, 2013 19:12

    52

    Really very neat and well explained tutorial on Skeleton. Thank you so much!

    0
  • Ian

    Monday, January 14th, 2013 06:09

    51

    Thank you for a well thought out tutorial, I will try Skeleton out for myself. I love the typo in the header images on this page “Artthatwroks”.
    Keep up the good work
    Regards

    0
  • Michael John Burns

    Wednesday, January 2nd, 2013 03:06

    49

    Hello Yusuf, Happy new year to you. Glad you love it. Don’t forget to share it with your friends. :)

    0
  • sanjeev

    Wednesday, December 26th, 2012 06:12

    43

    well i tried your step but at the very last footer section it got repeated.
    http://i49.tinypic.com/5dj6ec.png

    0
    • sanjeev

      Thursday, December 27th, 2012 00:32

      44

      need help guys please

      0
      • Michael John Burns

        Friday, December 28th, 2012 02:52

        45

        Hello Sanjeev, I apologize for the late reply.

        I gues you place it on

        w/o the class of sub-footer. Kindly try it and let me know. Or you can add me on skype mjburns10 and show me the code so that I can help you fast.

        0
        • sanjeev

          Friday, December 28th, 2012 06:53

          46

          ok i have added you in skype and as i guess your tutorials is not showing lifted effects in content slider edge.. Hope to catch you in skype…well do you have hotmail or gmail id so that i can forward you the css files.

          0
          • sanjeev

            Friday, December 28th, 2012 06:57

            47

            ok i have listed the code in the following link. Please feel free to look at it
            http://pastebin.com/KNWuypWH

            0
        • sanjeev

          Monday, December 31st, 2012 00:18

          48

          hello michael! you there and did you get my code? as i added you in skype and gmail. Please responde

          0
  • manik

    Saturday, December 22nd, 2012 14:24

    42

    which software is more effected to convert PSD to HTML?

    0
    • CrusnikCore

      Thursday, January 3rd, 2013 13:12

      50

      None. You need to do it by hand. Code it yourself or hire someone.

      There is no magical tool for this.

      0
  • Francis

    Wednesday, December 12th, 2012 16:42

    41

    This is an excellent tutorial, but i must say, quite late compared to the psd tutorial. I followed that psd tutorial and programmed the page myself. It took a very long time for me to make it, but it kinda worked. I actually had no idea what i was doing and therefore am very happy that you made this tutorial. Please keep up the good work!

    0
  • Kayut

    Sunday, December 2nd, 2012 08:03

    40

    Thanks a lot for this fantastic tutorial!
    However if you check the final page on iPhone 4s, the main navigation breaks in two line!
    The other thing is that there is a small mistake in description of the section 4:
    Logo is not floated right, but left and Navigation is not floated left, but right! :-)

    Could you please help me to understand how it works?
    I learned that for a responsive design you have to use percentages for width, margin, padding and so on instead of using fix pixels. However in this tutorial we use every where fix pixels.
    Could you please help me to understand how it works that despite fix pixels we have a fluid grid at the end?

    Many thanks again

    0
  • Mark

    Tuesday, November 27th, 2012 06:28

    38

    Cool, but how do you alter the speed of the rslides. It’s too fast. Want to slow it down so you see each slide longer.

    Couldn’t see any reference to slideSpeed: 1150, or similar

    0
    • Michael John Burns

      Tuesday, November 27th, 2012 23:34

      39

      Hello Mark you can control the speed by change the slideSpeed: 350, note it is by milliseconds. You can check the documentation for example on .

      0
  • Pipeta

    Friday, November 23rd, 2012 17:49

    37

    Excellent post, very very helpful.
    Thanks for sharing your knowledge to us. You got +1 karma from me :)

    0
  • Lucy

    Thursday, November 22nd, 2012 13:48

    36

    Brilliant tutorial michael thanks

    0
  • sanjay

    Thursday, November 22nd, 2012 05:16

    35

    Cool tutorial Micheal! You might want to use instantblueprint.com for the html file generator, it creates those needed files, css, js for you. I always use it on my tutorials too :)

    +1
  • Barry Reynolds

    Friday, November 16th, 2012 14:19

    30

    Great tutorial and awesome looking site- very cleanly coded too. The only thing I would add, and like I have added already to http://www.reynoldsdigital.com are buttons made out of CSS, it’s much lighter and the load times are significantly improved which is so important for mobile browsers.

    0
    • Michael John Burns

      Saturday, November 17th, 2012 21:08

      31

      Hello Barry, that website is great. Yeah! most website now aims speed, minimal, great Typography using web fonts and most important the website is Responsive.

      0
  • Aj Fruza Aviado

    Friday, November 16th, 2012 00:19

    29

    Nice! I’m gonna try this immediately ;)

    0
    • Michael John Burns

      Saturday, November 17th, 2012 21:10

      32

      Hello Aj, don’t forget to share the finish outcome. Hope this tutorial helps. Let us know what do you think of the tutorial. ;)

      0
  • Abhimanyu Rana

    Wednesday, November 14th, 2012 22:57

    28

    Great work!! Thanks for share.

    0
  • Rico

    Wednesday, November 14th, 2012 09:26

    27

    Hello Michael thanks for that Tutorial. But I only reach step 4. Can you explain exactly in which files you put the different codes. Can you do a Video to that tutorial? I would be very grateful because i want to learn that!
    best regards from germany

    0
    • Michael John Burns

      Saturday, November 17th, 2012 21:20

      33

      Hello Rico, sorry for the late responds. I can’t do a video tut for now.

      Try to read carefully Rico. I think I explain it very well on top. But yeah, on Step 4 The first code will be place on div with a class of container. As you notice in Step 3 we divided each section and assign div. Try to view this image. On the top part we have a wrap-header, container and container slides. You will place the first code on the container. Since the code contains logo and navigaiton. Hope this helps.

      Talk to me skype if you didn’t catch up what I said. Here is my skype ID mj_burns10

      0
  • roni

    Wednesday, November 14th, 2012 04:29

    26

    I am concerned about your use of the footer tag.
    ” The HTML Footer Element () represents a footer for its nearest sectioning “.
    Here you have 2 footers for 1 section ( root section )

    Aren’t we having a semantic issue here ?

    0
    • Michael John Burns

      Saturday, November 17th, 2012 21:26

      34

      Hello Rony, Good point. I’m confused about it too. Because I was thinking the widget is on footer part. So what I did I added different class on each footer which is widgets and the other is sub-footer. I think it’s still semantic but I’m not sure.

      Ex. there are lot of navigation we used nav tag. the one is primary and the other is on the sidebar wich is for example links. But we assign different class on that nav tag. Ex. primary the other is secondary/links or what ever you call it.

      I can’t say if i’m right but that’s my point of view. Thanks for pointing it again Rony. Let me know what you can say about it.

      +1
  • Référencement naturel

    Tuesday, November 13th, 2012 14:56

    24

    Wow very good tutorial, i will test this for my next website, i hope to realize the same work :) Thank you

    0
  • Brad Potter

    Tuesday, November 13th, 2012 10:53

    23

    This tutorial has really helped me thanks guys!

    0
    • Michael John Burns

      Tuesday, November 13th, 2012 18:53

      25

      Hey Brad, glad to hear that this tutorial helped you. You’re welcome Brade ;)

      0
  • Ayaz Malik

    Monday, November 12th, 2012 11:17

    21

    Nicely done! a little fade in type of effect on hover, on the slide thumbnails above footer will make it even better :p

    0
  • Selvamanikandan

    Monday, November 12th, 2012 04:16

    20

    nice tutorial.. good luck mate..

    0
  • mixcod

    Sunday, November 11th, 2012 18:25

    17

    Amazing, i like this tutorial, but im still wondering why you didnt complete all pages? i mean portfolio and blog and contact. thk you :)

    0
    • Michael John Burns

      Sunday, November 11th, 2012 22:21

      18

      Hello Mixcod, We only do the homepage tutorial since we only cover homepage designing from Photoshop. Don’t worry Mixcod, next time we would cover complete designing and converting from homepage, blog, about, contact. Be sure to stay updated.

      0
      • mixcod

        Monday, November 12th, 2012 16:20

        22

        Of course my brother Michael, i like your tutorials, and im thankful. cuz im still newbie i have no idea how to make the conception, and the puspose of the website, i can do that for portfolio or simple pages, but for big sites i cant do that. anyway thank you so much :)

        0
  • Lakhyajyoti

    Sunday, November 11th, 2012 09:12

    16

    Great tutorial. Learn something new here. Thanks for sharing.

    0
    • Michael John Burns

      Sunday, November 11th, 2012 22:24

      19

      Hello Lakhyajyoti, Good morning. Glad that you learn something for this. Do you find it easy to follow? If no, kindly state your suggestion how to improve the tutorial. It would be great we would hear from the readers.

      0
  • Kevin

    Friday, November 9th, 2012 12:33

    10

    Great tutorial – it is helping me understand coding. Are you planning on doing a tutorial on how to code the portfolio page o r is there one already I can follow?

    Thanks

    0
    • Michael John Burns

      Friday, November 9th, 2012 18:52

      11

      Hello Kevin, Hell Yeah! here is a Portfolio type PSD to HTML/CSS tutorial Link.

      0
      • Kevin

        Saturday, November 10th, 2012 02:04

        13

        Thanks Michael. What I was looking for was a tutorial on coding the actual portfolio page not a portfolio site (although that’s another great tutorial). This tutorial, for example, shows how to code the home page – is there a tutorial to show how to code a portfolio page that would show web work, graphic work, etc?

        Thanks

        0
        • Michael John Burns

          Saturday, November 10th, 2012 07:49

          14

          Oh I get what you mean now. Well let me add that on my list, hopefully soon I can publish it here on how to code a portfolio page. For this time try to learn from this tutorial maybe this will help you build and code your own portfolio page. :)

          0
          • Kevin

            Saturday, November 10th, 2012 12:20

            15

            Thank you I will do that. This has been very helpful.

            0
  • nimsrules

    Friday, November 9th, 2012 05:28

    9

    I’m always waiting for 1WB’s newsletter, always learn something new from here. Today’s tut taught me how to style the navigation of a slider. I always preferred sliders with auto sliding features and turned off navigation :P

    0
  • Falconerie

    Friday, November 9th, 2012 02:38

    5

    nice tutorial! I love the buttons..

    0
    • Michael John Burns

      Friday, November 9th, 2012 05:15

      7

      Hello Falconerie, I love the buttons too. Which one do you prefer a minimal button or a heavy styled button?

      0
  • nimsrules

    Thursday, November 8th, 2012 23:13

    2

    Quite a detailed and comprehensive tutorial, Michael. Just one thing, I think there’s something wrong with the PSD’s resource.

    0
    • Rean John Uehara

      Friday, November 9th, 2012 02:18

      3

      Hi nimsrules, looks fine to me now. Can you check?

      0
  • tltl

    Thursday, November 8th, 2012 22:07

    1

    Where file PSD,you?

    +1
    • Rean John Uehara

      Friday, November 9th, 2012 02:18

      4

      Looks like the link is working. ;)

      +1
      • nimsrules

        Friday, November 9th, 2012 03:03

        6

        That does it. Again thanks for the tut and the freebie :)

        +1
        • Michael John Burns

          Friday, November 9th, 2012 05:18

          8

          Hello Nimsrules, You’re welcome. Keep coming back. Don’t forget to share this tutorial :)

          +1

Comments are closed.

67.202.56.112 - unknown - unknown - US