blog-design-3-thumb

Blog Design from Pixelmator to WordPress – Part 3

by

Welcome to part 3 of this tutorial series! Last time we created a design mockup in Pixelmator, today we will convert this design mockup into a functioning webpage using HTML5, CSS3 and jQuery. You can view the final demo here.

At this stage we would usually open our mockup in Pixelmator and begin slicing, however, due to the design being very minimalist there is no need for us to slice any of the mockup. Our design will be made up entirely of HTML and CSS, without the need for any images. The only thing we need to do before we begin coding is to setup TypeKit so that we have access to Museo Slab on the web.

If you wish to use Museo Slab within this tutorial you will need to signup for a free account and create a kit, as instructed here. If not, the design will simply use the fallback font of Helvetica Neue.

Step 1 - Directory Structure

Let's begin by creating our folder structure which will help keep all of our assets organized. Create blank index.html, styles.css and ashleyrich.js files in the correct directories, as I have below. You will also need to download FitText and save it within the js directory.

directory structure

Step 2 - HTML Structure

Open index.html in your chosen text editor and begin by adding the basic structure, which sets the page doctype, charset, viewport, page title and links our CSS stylesheet, which we will create later on.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Blog Design from Pixelmator to WordPress - HTML5 and CSS3 Demo</title>

    <link rel="stylesheet" href="css/styles.css" media="screen">
</head>
<body>
    
</body>
</html>

Before we start adding our HTML markup let's link in our Javascript files for use later on. First, add the TypeKit embed code in the head section just below our stylesheet. Remember, you will need to replace this code with the one provided by TypeKit.

<script type="text/javascript" src="//use.typekit.net/hcr1xlm.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

Then before the closing body tag link the jQuery, Fittext and custom javascript files.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/ashleyrich.js"></script>

With everything in place let's begin adding our HTML markup. First, add a 'container' div, which will center the design.

The navigation will be fixed at the top of the page and span the full width of the browser window, therefore it is necessary for us to add an 'inner' div which will center the navigational elements. Within our navigation we have a level 3 heading for our site title and an unordered list for the dropdown menu - notice how the submenus are just nested unordered lists. We have also added classes to the social menu items so that we can style them differently.

<div id="container">
    <nav role="navigation">
        <div class="inner">
            <h3><a href="#">Ashley Rich</a></h3>
            <ul class="menu">
                <li><a href="#">Projects</a>
                    <ul>
                        <li><a href="#">Delightful Downloads</a></li>
                        <li><a href="#">PXM-Tuts</a></li>
                    </ul>
                </li>
                <li><a href="#">Search</a></li>
                <li><a href="#">Socials</a>
                    <ul>
                        <li><a href="#" class="facebook">Facebook</a></li>
                        <li><a href="#" class="twitter">Twitter</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>
</div>

Just below the navigation we add a simple header with a level 1 heading for the full width site title.

<header role="banner">
    <h1><a href="#">Ashley Rich</a></h1>
</header>

Below the header we add the post list in the form of a div. Each individual post is marked up using the article tag, which contains the post title as a level 2 heading and 2 paragraphs, the first of which is given a class of 'meta' so that we can style the date and post tags.

Below the post list we have another div to contain the previous and next links - nothing fancy, just links within a span so that we can position them.

<div role="main">
    <article>
        <h2><a href="#">Mollis Consectetur Pharetra</a></h2>
        <p class="meta">Published November 25, 2012 in <a href="#">Web Design</a>, <a href="#">WordPress</a></p>
        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. <a href="#">Read more...</a></p>
    </article>
    <div id="pagination">
        <span class="previous"><a href="#">Older Posts</a></span>
        <span class="next"><a href="#">Newer Posts</a></span>
    </div>
</div>

Finally, add the footer and copyright information within a small tag.

<footer role="contentinfo">
    <small>Copyright &copy; 2012 - 2013, Ashley Rich</small>
</footer>

HTML complete, let's move onto the CSS.

Step 3 - CSS

Before we begin adding our styles it's always a good idea to add a CSS reset so that we are building from a blank canvas. I like to use the CSS reset provided by HTML5 Doctor. Go ahead and grab the code and copy and paste it into the styles.css file.

Once the reset has been added we can start defining the global styles and links. Everything here is pretty straightforward, however you may notice a few things:

  • I have set the font family to Museo Slab and provided a fallback for those browsers that do not support TypeKit.
  • I have chosen to use rem for font sizing, which is one of the new units of measure in CSS3. The rem is similar to the em, however the rem unit calculates it's sizing relative to the html element (root), opposed to the elements parent. Check out this article for a more in depth look at the rem unit.
  • The attribute selector has been used to select the main header. This allows us to select the desired element without adding any additional classes or IDs to the element within our HTML markup, instead we use the already present WAI-ARIA roles.
/* Start styles */
html {
    font-size: 62.5%; /* Sets to 10px */
}

/* General */
body {
    background-color: #fff;
    font-family: "museo-slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.5em;
    color: #333;
}

/* Links */
a, a:visited {
    color: #f60;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

header[role="banner"] h1 a, nav[role="navigation"] h3 a {
    color: #f60;
}

header[role="banner"] h1 a:hover, nav[role="navigation"] h3 a:hover {
    color: #333;
}

.menu li a,  .menu li a:visited {
    color: #333;
}

.menu li a:hover {
    color: #f60;
    text-decoration: none;
}

.menu a.twitter, .menu a.twitter:visited {
    color: #00b1eb;
}

.menu a.facebook, .menu a.facebook:visited {
    color: #3b5998;
}

.menu a.twitter:hover, .menu a.facebook:hover {
    color: #f60;
}

h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited, h4 a, h4 a:visited {
    color: #333;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
    color: #f60;
    text-decoration: none;
}

.meta a, .meta a:visited {
    color: #999;
}

With the base styling in place, let's address the page structure. Begin by centering the 'container' div and setting it's width. You'll notice that I have specified the width as a percentage and set a maximum width in pixels. The reason behind this is that it makes the design fluid on smaller devices, giving us a great start towards a responsive design - a topic beyond the scope of this tutorial, but you can learn more here.

Next up, we set the navigation to a fixed position and set the top, right and left values so that it permanently sits at the top of the browser window. The 'inner' class centers the navigation in the same way that the 'container' div does.

/* Structure */
#container {
    position: relative;
    margin: 0 auto;
    width: 90%;
    max-width: 960px;
}

nav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background-color: #fff;
    line-height: 60px;
}

nav .inner {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
    border-bottom: 1px solid #eee;
    overflow: hidden;
}

The navigation consists of a simple level 3 heading, which we float to the left and an unordered list floated to the right. We make use of the :before pseudo-element so that we can add the small separator between each menu item. Notice that we do not remove the separator on the first menu item, we simply change the color to that of the background color. This allows us to hide the separator and doesn't cause issues when trying to align the submenus.

nav h3 {
    float: left;
    font-weight: 500;
}

nav .menu {
    float: right;
    font-size: 1.8rem;
    list-style: none;
}

nav .menu li {
    float: left;
    margin-left: 10px;
}

nav .menu > li:before {
    content: '▪';
    margin-right: 10px;
    color: #333;
}

nav .menu > li:first-of-type:before {
    color: #fff;
}

nav .menu li ul {
    position: absolute;
    visibility: hidden;
    margin: 0 0 0 -5px;
    padding: 0 20px;
    background-color: #fff;
    border: 1px solid #eee;
    border-top-color: #fff;
    z-index: 1;
}

nav .menu li:hover ul {
    visibility: visible;
}

nav .menu li ul li {
    float: none;
    margin: 0 0 0 0;
}

The header will rely on FitText to dynamically size the heading so that it spans the full width of the design, however we need to set a fallback for those that have javascript turned off.

header {
    margin-bottom: 12rem;
    padding: 16rem 0 12rem;
    border-bottom: 1px solid #eee;
}

header h1 {
    display: block;
    width: 100%;
    font-size: 16rem;
    color: #f60;
}

Next up we have the post previews, which we declare the spacings and font color for the meta data.

article {
    margin-bottom: 12rem;
}

article h2 {
    margin-bottom: 2rem;
    font-size: 4.8rem;
    line-height: 1.2em;
}

article .meta {
    margin-bottom: 2rem;
    color: #999;
}

The pagination next and previous links are floated right and left, respectively.

#pagination {
    overflow: hidden;
    margin-bottom: 1rem;
}

#pagination .previous {
    float: left;
}

#pagination .next {
    float: right;
}

Finally, we declare the footer styles.

footer {
    padding: 12rem 0;
    border-top: 1px solid #eee;
    font-size: 1.4rem;
    text-align: center;
    color: #eee;
}

CSS complete, onto the javascript.

Step 4 - jQuery

At this stage we have a functioning webpage, however for those with javascript enabled we want to add a few enhancements. The first thing we need to do is tell FitText to stretch our site title, we do this once the DOM has fully loaded:

$(document).ready(function() {
    //Fittext   
    $("header h1").fitText(0.6);
});

Next, we want to hide the smaller site title when the larger version is visible. To do this we first hide the smaller title by default (we do this in javascript so that those with javascript disabled still see the title). We then calculate the height of the header and subtract the height of the navigation. We can then hook into the window scroll event and once the top of the browser reaches the bottom of the header element we fade the smaller title in.

We add this code just below the FitText function. This is important because we need the height of the header after the heading has been resized.

// Hide smaller branding
$("nav h3").hide();

// Get height of header 
var headerHeight = $("header").outerHeight() - $("nav").outerHeight();

//  Toggle smaller site title on scroll
$(window).scroll(function() {
    var pos = $(window).scrollTop();
    
    if ( pos >= headerHeight ) {
        $("nav h3").fadeIn("slow");
    }
    else {
        $("nav h3").fadeOut("slow");   
    }
});

Well, that's us done! Take a look at the functioning demo here. Thanks for reading and stay tuned for part 4 where we will convert this webpage into a functioning WordPress template.

Comments