Download 10 Free 
The social news community Digg has been online since 2004 and rapidly grew in popularity leading up to the 2008 elections. Come 2011 the Digg team performed an overhaul on the system and completely revamped the site layout. This also broke the friends system, allowing big-name publishers to game the front page. This upset many powerhouse users who were furious with the major changes.
Over time the site has slowly moved back towards its roots as a user-powered news community. And although the domain has lost some credibility, their design skills are still impeccable. So in this tutorial I want to explain how we can build a similar layout using static HTML5 and CSS3 properties. I won’t have time to cover every detail but you can download my attached source code and play around on your own.
Building the Header
I’ll tackle major areas in the layout beginning at the top and working down. For starters the heading band has a couple interesting features, namely the navigation links and search form. Here’s the first portion of the code:
<div id="header-wrap"> <header class="clearfix"> <a href="#" class="logo">Diggy</a> <nav class="clearfix"> <a href="#" class="sel">Top News</a> <a href="#">Newswire</a> <a href="#">Newsrooms</a> </nav>
As you can tell I’m using a wrapper div to house the entire blue background. However the content is placed inside an HTML5 <header> tag which is centered at 1000px width. For the top navigation I’ve also included the <nav> tag with internal anchor links.
#header-wrap { height: 48px; background-color: #14589e; border-bottom: 1px solid #0d4f92; }
#header-wrap header { display: block; width: 1000px; margin: 0 auto; padding: 7px 15px 5px 15px; }
#header-wrap header nav a {
margin: -2px 1px -5px 0;
padding: 0 10px;
height: 40px;
line-height: 49px;
display: block;
font-size: 1.3em;
font-weight: bold;
color: #fff;
float: left;
}
#header-wrap header nav a.sel {
background-color: #194989;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#header-wrap header nav a:hover {
background-color: #194989;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
cursor: pointer;
}
It’s so much easier to setup block-style links and float them right next to each other. Also I’ve taken advantage of the CSS3 rounded corner properties, both on these links and for the categories list. Even the register and login buttons are using rounded corners. They look fantastic and have been a luxury up until now.
Categories List
Instead of setting up another nav element I’ve instead used an unordered list of links. The categories block underneath the header is actually placed inside another div with the ID #core-content. This centers the rest of our page to the 1000px width while also letting the background flow 100% of the browser window.
I copied over most of the important CSS properties for this section. It’s easy to get lost, but the links do look incredible. In fact, both the containing div and unordered list have bottom borders. This gives off the illusion of a double division line.
#core-content .categories { border-bottom: 1px solid #ccdcef; padding-bottom: 2px; }
#core-content .categories ul { border-bottom: 1px solid #ccdcef; padding: 10px 0; list-style: none; width: 100%; }
#core-content .categories ul li { margin-right: 8px; float: left; }
#core-content .categories ul li a { display: block; float: left; font-size: 1.2em; line-height: 1.1em; border: 1px solid transparent; color: #105cb6; font-weight: bold; padding: 5px 9px 7px; text-decoration: none; }
#core-content .categories ul li a:hover { text-decoration: underline; }
#core-content .categories ul li.sel { }
#core-content .categories ul li.sel a { background-color: #e3e8f4; border-color: #ccdcef;
border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; }
Listing the Articles
The frontpage links list is probably Digg’s official calling card. You can tell these individual blocks consist of quite a bit of markup – but it’s fairly simple to explain.
<!-- begin story 1 --> <div class="story clearfix"> <div class="diggbtn"> <div class="badge"> <a href="#" class="count-wrap"><span class="numcount"><span>60</span></span></a> <a href="#" class="diggit"></a> </div> </div> <div class="story-content"> <div class="media"><a href="#"><img src="images/thumbs/s01.png"></a></div> <div class="details"> <h2><a href="#">Obamas kick off campaigning with rallies in must-win states</a></h2> <p> <a href="#" class="sourcedomain">reuters.com</a> <a href="#" class="teaser">— WASHINGTON (Reuters) - With his wife at his side and Air Force One as a campaign plane, President Barack Obama holds his first political rallies <span class="timestamp">2 mins ago</span></a> </p> </div> <ul class="meta"> <li class="submitter">via <a href="#">Mikeymicron</a></li> <li class="comment"><a href="#">2 Comments</a></li> <li class="save"><a href="#">Save</a></li> <li class="bury"><a href="#">Bury</a></li> </ul> </div> </div>
The wrapping div for each article has a class of .story. Inside are two more story classes: .badge for the voting bade and .story-content for everything to the right side. This would include the title, description, meta links, and thumbnail photo if available.
All of the styles for these elements are segregated into their own section of the stylesheet. The yellow digg badge uses a static BG image with dynamic text for the voting numbers. But overall there are way too many styles to go over, many of which do not contain anything new or interesting. But I have copied just the beginning portion for your reference.
/** stories **/
#core-content #left-col .story { display: block; border-bottom: 1px solid #ccdcef; padding: 10px 0; margin-bottom: 10px; }
#core-content #left-col .story .story-content { margin-left: 66px; }
#core-content #left-col .story .story-content .details { margin-bottom: 7px; }
#core-content #left-col .story .story-content .details h2 { display: block; font-size: 1.65em; line-height: 1.2em; margin-bottom: 8px; text-decoration: underline; font-weight: bold; }
#core-content #left-col .story .story-content .details h2 a { text-decoration: underline; }
#core-content #left-col .story .story-content .details h2 a:hover { text-decoration: none !important; color: #121212; }
#core-content #left-col .story .story-content .details p { margin-bottom: 12px; }
#core-content #left-col .story .story-content .details p a { color: #666; }
#core-content #left-col .story .story-content .details p a:hover { color: #898989; }
#core-content #left-col .story .story-content .details .sourcedomain { border-bottom: 1px solid #cedbf1; color: #5f88ce; }
#core-content #left-col .story .story-content .details .sourcedomain:hover { color: #5f88ce; }
#core-content #left-col .story .story-content .details .timestamp { font-size: 0.9em; color: #999; }
Pagination Buttons
There is a small block located after all of the stories containing pagination links. This is also setup with an unordered list attached with special class names. I copied over the basic HTML in the snippet below.
<!-- paged navigation --> <ul class="paged-navigation"> <li class="prev"><a href="#" class="btn-default disabled">Prev</a></li> <li class="num">Page 1</li> <li class="next"><a href="#" class="btn-default">Next</a></li> </ul>
The next and previous links are setup to float over to the left and right side. Meanwhile the main centered number text will actively display which page number you’re currently viewing. When you cannot go back or forward anymore the buttons are given an additional class .disabled. This simply drops the opacity down 50%, making the link appear inactive.
#core-content #left-col ul.paged-navigation {
display: block;
width: 100%;
background-color: #eee;
margin: 10px 0;
padding: 7px;
padding-top: 15px;
padding-bottom: 13px;
list-style: none;
text-align: center;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#core-content #left-col ul.paged-navigation .disabled { opacity: 0.5; cursor: default; }
#core-content #left-col ul.paged-navigation .disabled:hover { cursor: default; }
#core-content #left-col ul.paged-navigation .prev { float: left; }
#core-content #left-col ul.paged-navigation .next { float: right; }
#core-content #left-col ul.paged-navigation .prev a, #core-content #left-col ul.paged-navigation .next a {
width: 3em;
font-size: 1.1em;
padding: 6px 10px;
}
#core-content #left-col ul.paged-navigation a.btn-default {
background: -webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#f3f3f3));
background: -moz-linear-gradient(top,#ffffff,#f3f3f3);
background-color: #f3f3f3;
border: 1px solid #aaa;
color: #333;
text-shadow: #fff 0 1px 0;
zoom: 1;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-weight: bold;
letter-spacing: -0.03em;
line-height: 1.25em;
}
This is the last block piece we have before closing the main left column. The whole content div is made up of just a left and right side, plus a simple footer. The style is very minimalist and works in the same archetype as classic Digg.
Looking inside the main #core-content div I’ve actually squeezed three main blocks. The left and right columns are floating next to each other inside a cleared container. Both are fitted with the HTML5 <section> tag. And we’re also using <footer> in the very bottom block of links.
<footer> <ul class="data"> <li class="copy">Original Design by <a href="http://digg.com/">Digg Inc.</a></li> <li><a href="#">About Digg</a></li> <li><a href="#">Advertise</a></li> <li><a href="#">Partners</a></li> <li><a href="#">API & Resources</a></li> <li><a href="#">Blogs</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Jobs</a></li> <li><a href="#">Help & FAQ</a></li> <li><a href="#">Terms of Service</a></li> <li><a href="#">Privacy</a></li> <li><a href="#">Top 100</a></li> </ul> </footer>
All of the main components are fairly straightforward to understand. There are possibly some newer properties I’ve used which you have never encountered before. But with just a quick Google search you can look further into all of them.
I left the right column open so there’s much more room for different block areas. These could include popular stories or recently logged in users. Overall I wanted the layout to be simple – merely a template to pay homage to Digg’s fantastic work. And also to prove that you can really build anything in HTML5 and CSS3.
Conclusion
Rebuilding the Digg v4 layout from scratch is exciting and certainly fun. Their team is very talented, and I’ve always been a fan of the social news genre. As I mentioned earlier feel free to download my example source code and play around with some of the properties. It’s easy to reorganize page elements and sample them in your own layouts.
Related Topics
Top