Coding a PSD to an HTML5 responsive template [Part 2]

Alrighty folks, I hope you’ve enjoyed the first part of coding a beautiful blog PSD into a fully working HTML5 responsive template where we wrote the markup and here we are in the second post where we shall style it responsively using CSS3 media queries.

To begin with let us annotate our stylesheet with the author details in the form of comments as I always prefer to do.

/*

Template name: Yellow Blog Template
Template URI: http://pixelbeam.net/yellow-minimalist-blog-template-photoshop/
Version: 1.0
Designed by: Andre Noore
Designer URI: http://pixelbeam.net
HTML5 coded by: Nirmal Shah
Coder URI: http://blogverize.blogspot.com

*/

Alright now I hope you remember the reset stylesheet we created with the help of Eric Meyer’s Reset and the Delicious font which we downloaded to use it in our template. Therefore, we include the reset.css file in our main stylesheet and use a CSS3 property called @fontface to define our custom fonts. Put the previously sliced images and the fonts in their respective folders to maintain an appropriate hierarchy. Remember this one’s for large monitors.

/*-------------------------------
  IMPORTING RESET.CSS
-------------------------------*/

@import url('reset.css');

/*-------------------------------
  BASIC STYLES
-------------------------------*/

@font-face {
 font-family:'Delicious-Bold';
 src:url(fonts/Delicious-Bold.otf) format('opentype');
}

@font-face {
 font-family:'Delicious-Roman';
 src:url(fonts/Delicious-Roman.otf) format('opentype');
}

@font-face {
 font-family:'Delicious-Heavy';
 src:url(fonts/Delicious-Heavy.otf) format('opentype');
}

body {
 background:url(images/bg.png) repeat;
 font-size: 16px;
 font-family:'Delicious-Roman';
 color:#565656; 
}

a { color:#f18201; text-decoration:none; }
a: hover { color:#3d3d3d; }

.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.clear { clear:both; overflow:hidden; }
.left { float:left; }
.right { float:right; }
.center { text-align:center;  }

Along with the above mentioned we’ve done some basic styling for the body, links and have also defined some important classes which we’ve used globally in a number of IDs. Jumping to the container and wrapper IDs, we set a fixed width and auto margin center the divs.

/*----------WRAPPER & CONTAINER-------------*/

.container {
 width:960px;
 margin:0 auto;
}

.wrapper {
 width:780px;
 margin:0 auto;
 text-align:center;
}

The header part contains a navigation, the font of which has been given a subtle text-shadow. You might even notice the box-shadow property we’ve used to add a drop shadow effect under the header. The logo part is quite straight forward where we negative indent the text to replace it with it’s image. Notice the h1 tag? That’s for SEO purposes. They say the text for our website’s name should be h1 tagged while the post headings should be h2 tags to accentuate their importance to Google bots.

/*----------HEADER--------------*/

header {
 width:100%;
 height: 50px;
 background:#f7b503;
 border-bottom: 10px solid #3d3d3d;
 -webkit-box-shadow: 0 3px 8px #777;
 -moz-box-shadow: 0 3px 8px #777;
 box-shadow: 0 3px 8px #777; 
}

nav {
 width:600px;
 margin:0 auto;
 padding:5px 0; 
}

nav li {
 float:left;
 padding: 0 30px;
 display:inline;
}

nav li a {
 font-family:'Delicious-Bold';
 font-size:24px;
 color:#000;
 display:block;
 padding:5px 10px;
 text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); 
}

nav li a:hover {
 background:#3d3d3d;
 -moz-border-radius:7px;
 -webkit-border-radius:7px;
}

/*-----------LOGO-------------*/

#logo {
 margin-top:50px;
 height:165px;
 margin-bottom:50px;
}

#logo h1 {
 text-indent:-9999px;
 background:url(images/logo.png) center no-repeat;
 height:125px;
}

#logo p {
 width:430px;
 margin:0 auto;
 line-height:1.5em;
 text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6); 
}

Next comes the main part where we style the text of the posts with some line-height while the rest of it is quite the basics. Apologies for not achieving the same effect for the selected number in pagination, I tried CSS3 and an image both but without success. If anyone comes up with a better solution, kindly mention it in the comments. I think the custom font’s the problem. Oh well!

/*--------------------------------*
   MAIN
*--------------------------------*/

#main h2 {
 font-family:'Delicious-Heavy';
 font-size:30px;
 text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6); 
}

#main h2 a {
 color:#3d3d3d;
}

#main h2 a:hover {
 color:#f18201;
}

.meta {
 font-size:18px;
 margin-bottom:20px;
}

#divider {
 margin-bottom:20px;
}

#main .post-img {
 margin-bottom:20px;
 width:100%;
}

#main article p {
 line-height:2.0em;
 text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
}

#main article {
 margin-bottom:100px;
}

#pagination {
 float:left;
 margin-top:-50px;
 font-family:'Delicious-Bold';
 font-size:18px;
}

#pagination ul {
 float:left;
}

#pagination ul li {
 float:left;
 display:inline;
 padding:0 15px;
}

#pagination ul li a {
 color:#565656;
}

#pagination ul li a:hover {
 color:#f18201;
}

#pagination ul .p-selected {
 background:url(images/p-selected.png) top no-repeat;
 width:34px;
 height:34px;
}

And lastly it comes down to the footer where we separate the three sections in an unordered list and style them accordingly.

/*-----------------------------*
   FOOTER
*-----------------------------*/

footer {
 margin-top:-10px;
 background:#373737;
 color:#fff;
 height:330px;
}

.footer-seperator {
 background:url(images/footer-seperator.png) repeat-x;
 height:23px;
}

footer section {
 width:250px;
 line-height:1.7em;
 text-align:left;
}

footer section strong {
 color:#f7b503;
 font-size:28px;
 font-family:'Delicious-Bold';
}

footer ul {
 float:left;
}

footer ul li {
 float:left;
 display:inline;
 padding: 35px 15px 0;
}

.footer-content {
 width:850px;
 margin:0 auto;
}

footer #social {
 margin-top:30px;
}

footer #social h4 {
 font-size:18px;
 color:#f7b503;
}

footer #tags ul {
 float:right;
}

footer #tags ul li {
 float:left;
 padding:7px 5px;
}

footer #tags ul li a {
 background:#f7b503;
 -moz-border-radius:15px;
 -webkit-border-radius:15px;
 padding:3px 15px;
 color:#3d3c3c;
 font-family:'Delicious-Bold';
 font-size:18px;
}

footer #tags ul li a:hover {
 background:#575757;
 color:#f7b503;
}
Yello Blog HTML5 Responsive Template



CSS3 Media Queries for Tablets

/*-----------------------------*
  RESPONSIVITY
*-----------------------------*/

/*--------FOR TABLETS--------*/

@media screen and (max-width:780px) {
 
body {
 font-size:15px;
 text-shadow:none !important;
}

/*----------WRAPPER & CONTAINER-------------*/

.container {
 width:800px;
 margin:0 auto;
}

.wrapper {
 width:520px;
 margin:0 auto;
 text-align:center;
}

/*----------HEADER--------------*/

nav {
 width:560px;
 margin:0 auto;
 padding:7px 0; 
}

nav li a {
 font-size:22px;
 padding:5px 10px;
}

/*-----------LOGO-------------*/

#logo p {
 line-height:1.5em;
 text-shadow: none !important; 
}

/*-------------MAIN---------------*/   

#main h2 {
 text-shadow: none !important; 
}

#main h2 a {
 font-size:26px;
}

.meta {
 font-size:16px;
}

#main .post-img {
 width:100%;
}

#main article p {
 line-height:1.8em;
 text-shadow: none !important;
 text-align:left;
}

#main article {
 margin-bottom:50px;
}

#pagination {
 margin: -15px 0 25px -15px;
}

/*-----------FOOTER-----------*/

.footer-content {
 font-size:14px;
}

footer section {
 width:200px;
 line-height:1.5em;
}

footer section strong {
 font-size:26px;
}

footer ul li {
 padding: 35px 25px 0;
}

}

Here we set the max width at 780px so that it resizes only when the screen size is the specified width. We bring down the size of the fonts, reduce margins, paddings and line-heights and remove text-shadows too because even though they brag about the retina-displays, I don’t trust the typography results in devices other than monitors or laptops. Notice that I’ve removed those CSS properties which remain same in both the cases to reduce the size of our stylesheet and avoid redundancy.

CSS3 Media Queries for Wide screen smartphones

/*--------FOR SMARTPHONES--------*/


@media screen and (max-width:504px) {
 
body {
 font-size:15px;
 text-shadow:none !important;
}

/*----------WRAPPER & CONTAINER-------------*/

.container {
 width:504px;
 margin:0 auto;
}

.wrapper {
 width:490px;
 margin:0 auto;
 text-align:center;
}

/*----------HEADER--------------*/

nav {
 width:504px;
 margin:0 auto;
 padding:12px 0; 
}

nav li a {
 font-size:18px;
 padding:5px 7px;
}

/*-------------MAIN---------------*/   

#main h2 {
 text-shadow: none !important; 
}

#main h2 a {
 font-size:21px;
}

.meta {
 font-size:15px;
}

#main .post-img {
 width:80%;
}

#main article p {
 line-height:1.6em;
 padding:0 20px;
 text-shadow: none !important;
 text-align:left;
}

#main article {
 margin-bottom:40px;
}

#pagination {
 margin: -15px 0 25px 5px;
}

/*-----------FOOTER-----------*/

.footer-content {
 font-size:14px;
}

#Recent { display:none; }

footer section {
 width:200px;
 line-height:1.5em;
}

footer section strong {
 font-size:26px;
}

footer ul li {
 padding: 35px 15px 0;
} 
 
}

CSS3 Media Queries for Regular phones

/*------REGULAR PHONES--------*/

@media screen and (max-width:320px) {
 
body {
 font-size:15px;
 text-shadow:none !important;
}

/*----------WRAPPER & CONTAINER-------------*/

.container {
 width:320px;
 margin:0 auto;
}

.wrapper {
 width:310px;
 margin:0 auto;
 text-align:center;
}

/*----------HEADER--------------*/

nav {
 width:320px;
 margin:0 auto;
 padding:12px 0; 
}

nav li {
 padding:0 10px;
}

nav li a {
 font-size:16px;
 padding:5px 5px;
 text-shadow:none;
 text-transform:uppercase;
}

nav li a:hover {
 background:none;
 text-decoration:underline;
}

/*------------LOGO-----------*/

#logo {
 margin-bottom:70px;
}

#logo p {
 width:310px;
 margin:0 auto;
 line-height:1.5em;
 text-shadow: none;
}

/*-------------MAIN---------------*/   

#main h2 {
 text-shadow: none !important; 
}

#main h2 a {
 font-size:18px;
}

.meta {
 font-size:14px;
}

#main .post-img {
 width:95%;
}

#main article p {
 font-size:14px;
 line-height:1.6em;
 padding:0 10px;
 text-shadow: none !important;
 text-align:left;
}

#main article {
 margin-bottom:40px;
}

#pagination {
 margin: -15px 0 25px -5px;
}

#pagination ul li {
 padding:0 10px;
}

#pagination ul .p-selected { 
 text-decoration:underline;
 background:none;
 width:auto;
 height:auto;
}


/*-----------FOOTER-----------*/

.footer-content {
 font-size:14px;
}

#Recent { display:none; }

footer section {
 width:250px;
 line-height:1.5em;
}

footer section strong {
 font-size:26px;
}

#About {
 padding-top:30px;
}

footer ul li {
 padding: 10px 10px 0;
 display:block;
 float:none;
} 

footer {
 margin-top:-10px;
 background:#373737;
 color:#fff;
 height:400px;
}

}

And there we have it, our template has been converted into a responsive one. The below screen shot is from the ‘Multiscreen view’ from Adobe Dreamweaver CS6.

Multiscreen View Adobe Dreamweaver CS6




Leave a Reply

Your email address will not be published. Required fields are marked *