Code an Awesome Minimal Design from PSD to XHTML & CSS
Last week we went through the process of designing an awesome minimal web design in Photoshop. If you haven’t read part 1 then you can view it here. In part 1 we created our site design making use of the 960 grid system to keep the site layout really clean and tidy. Now, let’s look at coding up our Awesome Minimal Web Design PSD into semantically-correct XHTML and CSS.
In this tutorial we’ll be making use of CSS3 and the new features it brings to Web Developers. We’ll be making use of the: text-shadow and background gradient syntaxes.
The Final PSD
Here’s the finished design concept to rejog your memories. The final design mainly consists of 3 different colours. A clean grey background, a sharp red top menu and footer and a nice white background for the content. The overall design is nice and clean and uses subtle shadows on text / links to give them a little depth and style.
Slice the PSD
The first job is to slice up various images that make up the design and can’t be recreated using CSS. The first being the logo. We could use @font-face for the logo but due to heavy licensing restrictions on web fonts it’s safer to just export the logo as PNG.
Once every graphic being used in the design has been exported we’re left with a collection of PNGs and now we can begin building the structure of our website.
The HTML Structure
Create a new HTML file (index.html) in a directory of your choice and create the basic structure of the site in the head (<head></head>) of the document include the Doctype, links to stylesheets and also add the page title. After the closing head tag (</head>) open the body tags (<body></body>).
Change the background colour of the website by adding a simple background-color statement in the CSS
body
{
background-color: #e8e8e8;
}
The Header Structure
The first part of the design at the top is a simple header that stretches the full width of the browser window. The logo is placed inside <h1> tags as there’s no other title on the page and the navigation links are placed into an unordered list (<ul>). Because it’s the “Work” page we’re developing, the “Work” link will have the active class and the contact link will have an extra contact class to remove the margin on the right to keep it in line with the 960 grid system.
Styling the Header
We can create a nice linear gradient for our navigation using a spot of CSS3. Three browser-specific syntaxes must be used in order for it display in Webkit Browsers (Chrome, Safari…) Firefox and even Internet Explorer (yes! this CSS3 technique actually works in Internet Explorer) We then use the colors/styles from the Navigation in the PSD to create the navigation links on our site adding some text-shadow on our links for some depth and then we float them to the left so they ‘sit’ side-by-side next to each other.
If you’re unsure on how to use the gradient and text-shadow syntaxes in your CSS then head over to www.css3.info
#header
{
width: 100%;
height: 90px;
border-bottom: 1px solid #c0150b;
/* Chrome, Safari */background: -webkit-gradient(linear, left top, left bottom, from(#ee271a), to(#d70e02));
/* Firefox */ background: -moz-linear-gradient(top,#ee271a,#d70e02);
/* IE */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee271a', endColorstr='#d70e02');
}
#header #headercontent
{
width: 960px;
margin: 0 auto;
padding: 35px 0px;
}
#header #headercontent #awesome
{
background-image: url('../img/awesome-logo.png');
background-repeat: no-repeat;
height: 0;
width: 0;
padding: 17px 0px 0px 120px;
margin: 0px 0px 0px 50px;
overflow: hidden;
display: block;
float: left;
}
#header #headercontent ul#nav
{
float: right;
margin: 0px 50px 0px 0px;
}
#header #headercontent ul#nav li
{
float: left;
}
#header #headercontent ul#nav li a
{
font-family: arial;
font-size: 12px;
color: #fefefe;
text-decoration: none;
text-shadow: 0px 1px 0px #88130e;
padding: 37px 22px;
}
#header #headercontent ul#nav li a:hover
{
text-decoration: underline;
background: #c0150b;
}
#header #headercontent ul#nav li a.contact
{
padding-right: -45px
}
#header #headercontent ul#nav li a.active
{
text-decoration: underline;
background: #c0150b;
}
Separating the Header and the Content
Remember in the PSD where we added a subtle gradient in the ‘gap’ between the header and the content?
#top-gradient
{
background-image: url('../img/gradient-seperator.png');
background-repeat: no-repeat;
background-color: #e8e8e8;
height: 40px;
width: 100%;
}
Creating the Content
Now we need to begin creating our content container so add the following in your HTML file below div#top-gradient
Give it a little styling…
#content-container
#content-container
{
width: 960px;
height: auto;
margin: 40px auto 0px auto;
background-color: #ffffff;
border: 1px solid #dbd8d8;
}
Adding an Intro
Add the following to your HTML inside the content-container div.
Hello, I'm Matthew Leak. A standards compliant Freelance Web Designer and Developer based in Manchester, UK and I Love clean and Minimal Web Design.
Now we need to style it. The #intro div will contain the width and margins of the intro text and the actual text styles will be placed inside #intro p. Now because we’ve got two a sentence with two colours, we’ll be adding the red colour to #intro p span and then “Hello” will be wrapped around <span></span> tags.
#content-container #intro
{
padding: 61px 50px;
border-bottom: 1px solid #dbd8d8;
}
#content-container #intro p
{
font-family: Georgia, Times New Roman, Times, serif
font-weight: normal;
font-size: 17px;
color: #555555;
text-transform: uppercase;
text-align: center;
line-height: 25px;
}
#content-container #intro p span
{
color: #fd2d15;
}
Creating the Portfolio Slider
All of the portfolio slider elements will be contained in a div with an ID of #slider. Unordered Lists (<ul>) are used to position the two navigation arrows and the macbook slider. If we were to add Javascript then we would target each element seperately, so make sure you give each element it’s own unique ID. The images inside the slider (the portfolio entries) will be contained in <li> tags inside ul#slides.
Now that we have the HTML structure of our slider, it’s time to add some styling. The slider div is given a width of 960px and then we style each of the navigation arrows separately. The previous arrow is moved into position by floating it left with a left margin of 50px and the next arrow is moved into position by floating it right with a right margin of 50px. Both arrows are given a top margin of 100px to position them vertically. The margins are placed in <li> and the actual arrow images are contained in the a tags of the <li>
#content-container #content #slider
{
width: 960px;
height: auto;
position: relative;
}
#content-container #content #slider ul#slidernav
{
display: block;
list-style: none;
position: relative;
}
#content-container #content #slider ul#slidernav li
{
}
#content-container #content #slider ul#slidernav li a
{
display: block;
width: 119px;
height: 119px;
text-indent: -9999px; /*removes the text from inside links */
}
#content-container #content #slider ul#slidernav li#prev
{
float: left;
margin: 100px 0px 0px 50px;
}
#content-container #content #slider ul#slidernav li#prev a
{
background-image: url('../img/arrowprev.png');
}
#content-container #content #slider ul#slidernav li#prev a:hover
{
background-image: url('../img/arrowprev-hover.png');
}
#content-container #content #slider ul#slidernav li#next
{
float: right;
margin: 100px 50px 0px 0px;
}
#content-container #content #slider ul#slidernav li#next a
{
background-image: url('../img/arrownext.png');
}
#content-container #content #slider ul#slidernav li#next a:hover
{
background-image: url('../img/arrownext-hover.png');
}
Now that our arrows are in position, we need to add styling to the actual macbook and the portfolio entries it contains. We style ul#slides by giving it a width of the image (580px) and add the top and bottom margins. Our portfolio entry doesn’t quite fit inside the macbook so we need to add some padding to the ul#slides li elements to move the entries into place.
#content-container #content ul#slides
{
background-image: url('../img/macbook.png');
background-repeat: no-repeat;
width: 580px;
height: 318px;
margin: 61px auto 61px auto;
list-style: none;
}
#content-container #content ul#slides li
{
padding: 20px 0px 0px 100px;
}
Adding Project Text
With our Portfolio slider firmly in place, it’s time add some project details. All of the text will be wrapped around a div with an ID of project-info which will contain the width and margins, but each separate column of text will have the same CSS class and also a name class that will just be for reference eg: project-details info – All the styles will be contained in the .info class. At the end of the HTML for the project text we’ve added a clear div which helps create a clean separation between this #project-info and #author-info
Client
Matthew Leak
Freelance Web Designer and Developer
Project Details
Clean & MNML Bespoke Website Design
Semantically-correct XHTML & CSS
http://blog.matthewleak.com
A Few Words
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis nisl turpis, vitae pretium diam." - Matthew Leak
With our HTML structure in place we need to add some styling to #project-info. Each ‘column’ will have the same styles so we just apply generic styling to to the a and p tags and each column will have a header (<h2>) with the same style.
#content-container #content #project-info
{
width: 960px;
margin: 61px 50px 61px 50px;
}
#content-container #content #project-info .info
{
float: left;
width: 230px;
margin: 0px 80px 0px 0px;
}
#content-container #content #project-info .info h2
{
font-family: georgia;
font-size: 16px;
font-weight: normal;
color: #fd2d15;
text-transform: uppercase;
padding: 0px 0px 5px 0px;
}
#content-container #content #project-info .info a
{
color: #fd2d15;
text-decoration: none;
}
#content-container #content #project-info .info a:hover
{
text-decoration: underline;
}
#content-container #content #project-info .info p
{
font-family: arial;
font-size: 12px;
color: #393939;
line-height: 18px;
}
If you go back and look at your HTML structure again you’ll see that extra styling has been added to the testimonial class to remove the right margin. So we’ve added margin-right: -80px to cancel out the margin-right: 80px style. If we didn’t do this then the testimonial would extend outside the project-info div, which we don’t really want.
Adding Author Info
Our author-info div has the exact same styles as the project-info div, so we can just copy and paste the project info styles and replace #project-info with #author-info. Remember to add the clear div before the closing author-info div tag.
This time we’re using “bio” as our generic class.
#content-container #content #author-info
{
width: 960px;
margin: 61px 0px 61px 0px;
border-top: 1px solid #dbd8d8;
padding: 61px 0px 0px 0px;
}
#content-container #content #author-info h2
{
font-family: georgia;
font-size: 16px;
font-weight: normal;
color: #fd2d15;
text-transform: uppercase;
padding: 0px 0px 5px 0px;
}
#content-container #content #author-info .bio
{
float: left;
width: 230px;
margin: 0px 80px 0px 0px;
}
#content-container #content #author-info .bio a
{
color: #fd2d15;
text-decoration: none;
}
#content-container #content #author-info .bio a:hover
{
text-decoration: underline;
}
#content-container #content #author-info .bio p
{
font-family: arial;
font-size: 12px;
color: #393939;
line-height: 18px;
}
The Footer
The footer can be added quickly by copying the styles from #topmenu. The only thing that needs to be edited is the width. Change the width from 100% to 960px
#content-container #content #footer
{
width: 960px;
height: 90px;
border-bottom: 1px solid #c0150b;
background: -webkit-gradient(linear, left top, left bottom, from(#ee271a), to(#d70e02));
background: -moz-linear-gradient(top, #ee271a, #d70e02);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee271a', endColorstr='#d70e02');
}
Now we need to style the text inside the footer. All text will be inside p tags so the first thing that we style in the footer is the p tag. Float the copyright text to left and float the “Take me to the top” text to the right.
#content-container #content #footer p
{
font-family: georgia;
font-size: 10px;
color: white;
text-shadow: 1px 0px 0px #000;
}
#content-container #content #footer #copyright
{
float: left;
padding: 40px 0px 40px 50px;
}
#content-container #content #footer #copyright a
{
color: white;
text-decoration: none;
}
#content-container #content #footer #copyright a:hover
{
text-decoration: underline;
}
#content-container #content #footer #top
{
float: right;
padding: 40px 50px 40px 0px;
}
#content-container #content #footer #top a
{
color: white;
text-decoration: none;
}
#content-container #content #footer #top a:hover
{
text-decoration: underline;
}
Validate. Validate. Validate.
Head over to the W3 XHTML validator. Copy & Paste your HTML mark up and validate it by direct input. Everything should be fine and that’s our awesome minimal web design in a fully functional website! (minus the scripting).
In Testking 70-649 tutorial you’ll learn the use of CSS3 and new features of web design. Learn how to create inspiriting design using Testking EX0-101 video and Testking 642-832 study guide.
This entry was posted on Tuesday, May 11th, 2010 at 15:00 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
very nice tutorial… 😀 clean and minimal
Love it. I can use this to fix some of my bugs for portfolio.
I have posted a link on my blog too.
Love the red!
Simples e bonito. Legal!
Really nice and clean design. Thanks for the tutorial.
Thanks for the kind words guys… it’s appreciated!
A great tut witha great result thanks alot!!!!
What’s the point of :
1 – #content-container #content #footer #copyright {….
Since the elements are IDed, thus unique, can’t you just
#copyright {…
?
2 –
You surely can get rid of one of them.
btw, it is a good practice to identify your body.
Thus, if some variations have to be done in IDed elements over different pages of the site, it becomes easy.
For instance variations of footer on Home page and Contact page
#home #footer {
#contact #footer {
Might you have used CSS sprites for the image rollovers instead? Fewer HTTP requests = $$$.
@Roni – No, you don’t need “#content-container #content #footer #copyright” to start styling #copyright. It’s just the way I write my CSS. I know #content-container and #content aren’t needed it’s just a habit I have become acustomed to. Bad practise? I’ll let you decide.
@Hugo – Image sprites are an option yes, but for something like this I don’t really see it as ‘necessary’. There are only two roll overs in the script so it’s not like a lot of HTTP requests are already being made.
@matthew – Actually using selectors like that : “#content-container #content #footer #copyright� is considered bad practice according to Google. Check out Google Page Speed. It covers all sorts of issues that help speed sites up. One of the most common problems is the use of inefficient rules in css.
But with that said. Great tutorial and nice design.
I have a question for you Matthew
I am trying to format the introduction like yours where the 2nd sentence is indented nicely on both the left and right hand side. However, I am unable to get it to work and I follow the code that you have provided.
Hello, I’m Matthew Leak. A standards compliant Freelance Web
Designer and Developer based in Manchester, UK and I Love clean and
Minimal Web Design.
Please help.
Nevermind…i got it. Sorry for the spam
It’s fine bro… I used text-align: center; on that paragraph if you’re still having trouble!
I am having some problems with the “project info divs”. For some reasons, my 3 columns just stack on top of each other instead of yours.
Do you mind I email you the code so you can have a look?
ya sure, go for it. If you go to my site my email address is on there.
Just going off what you’re saying though, if they’re ‘stacking on top of each other’ then you probably aren’t floating them. Add float: left; to your css if you haven’t already.
How safe is it to use background gradients?
I mean, which browsers doesn’t support it so far?