Coding the Digg v4 Layout with HTML5 and CSS3

Home > Web development, Wordpress > Coding the Digg v4 Layout with HTML5 and CSS3

Coding the Digg v4 Layout with HTML5 and CSS3

May 16th, 2012

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.

Digg v4 clone in HTML5 and CSS3 - featured preview image

Live Preview Download Source Code

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:


	
		Diggy

		
			Top News
			Newswire
			Newsrooms

As you can tell I’m using a wrapper div to house the entire blue background. However the content is placed inside an HTML5

tag which is centered at 1000px width. For the top navigation I’ve also included the

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.



	
		
		60
		
		
	

	
		
		
			Obamas kick off campaigning with rallies in must-win states
			
			reuters.com
			â€” WASHINGTON (Reuters) - With his wife at his side and Air Force One as a campaign plane, President Barack Obama holds his first political rallies 2 mins ago
			
		
		
			via Mikeymicron
			2 Comments
			Save
			Bury

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.



	Prev
	Page 1
	Next

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.

Splitting Up the Footer

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

tag. And we’re also using

in the very bottom block of links.


	
		Original Design by Digg Inc.
		About Digg
		Advertise
		Partners
		API & Resources
		Blogs
		Contact Us
		Jobs
		Help & FAQ
		Terms of Service
		Privacy
		Top 100

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.

Digg v4 footer web design in HTML5

Live Preview Download Source Code

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.