SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Design a Full HTML5/CSS3 Template Replica of Digg v3

September 29, 2011 by Jake Rocheleau

Social media junkies on the turn of the year 2004 surely remember Digg. It was the powerhouse of social news, all the techies would flock to Digg on a daily basis. And it’s been through quite a few changes recently with the v4 redesign. However I fondly remember Digg’s classic appeal running under v3 as the most accepted web interface.

Thus I’ve taken the liberty to re-code the entire front page template into HTML5/CSS3! And in this short tutorial I’ll be introducing you to some of my techniques. Additionally I’ve offered the source code completely free to download for your own usage. Much of the design I’ve had to piece together through the Wayback Machine Internet archives.

Digg v3 Template hand-coded into HTML5/CSS3

Live Demo – Download Source Code

Examining HTML Structure

We should start off the tutorial by glossing over my core HTML page. Inside the source file we’re only working with a couple images and 2 files – index.html and global.css. I’ve included some light jQuery code towards the bottom of our index page as well. We use this to display the dropdown effect in the header menu area.

[html wraplines=”false”]<body>
<div id="w">
<!– @begin header –>
<header>
<h1><a href="#">digg</a></h1>

<a href="#" class="head-linking">Join Digg</a>
<a href="#" class="head-linking side-brdr">About</a>
<a href="#" class="head-linking side-brdr">Login</a>
[/html]

This is the first block entering our root body area. I’ve used the HTML5 header element to properly encase our top bar and navigation. Additionally the Digg logo is inside an h1 tag for clarity. The inner text is removed in the CSS with a negative text-indent property.

Another interesting portion of the home page is our top navigation. These include drop-down submenus where users can browse through the many different categories. I passed over the nav element here to instead use it on the bottom row.

[html wraplines=”false”] <div id="topnav">
<ul id="topmainnav">
<li>
<a href="#">Technology <em id="drop101"> more</em></a>
<ul class="catdrop" id="catdrop101" style="display:none;">
<li><a href="#">Apple</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Gadgets</a></li>
<li><a href="#">Hardware</a></li>
<li><a href="#">Industry News</a></li>
<li><a href="#">Linux/Unix</a></li>
<li><a href="#">Microsoft</a></li>
<li><a href="#">Mods</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Software</a></li>
</ul>
</li>
[/html]

Inside each of the root list item elements we nest another unordered list. The class .catdrop distinguishes between the dropdown category lists and apply styles accordingly. The additional em tag with an ID of “drop10X” actually displays the small arrow button off to the right. Whenever the user clicks the em tag jQuery will toggle the next unordered list.

[html wraplines=”false”]<div id="topsubnav">
<nav>
<a href="#" class="current" id="popped">Popular</a>
<a href="#" id="upcoming">Upcoming</a>
</nav>

<ul class="media">
<li><a href="#">News</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Images</a></li>
<li class="xtra"><a href="#" class="customize">Customize</a></li>
</ul>
</div>
[/html]

Now topsubnav is the last of our header area containing the final bottom bar. Notice that we use CSS3 techniques to add in rounded corners instead of Digg’s old sliding doors with images. The only HTML5 nav element we use holds the popular/upcoming links.

Designing News Articles

Now let’s look into the code I’ve written for each news article. Since the Digg layout needs to expand as the user re-sizes the browser I’ve set the sidebar area first in code. The width is static so our left content area can fluidly move back and forth for readjustments.

I just copied over the first news article content below. We’re using the HTML5 article element with a class of .news-itm for styles. Each article is broken down into a few segments. The first is a side thumbnail which is optional on some articles. Next we have a news body which holds our header, main content, and bottom links such as share and bury.

[html wraplines=”false”]<!– @begin news story –>
<article class="news-itm" id="fp0">
<a href="#" class="thumb"><img src="img/t/bball-001.jpg" /></a>
<div class="news-body">
<h3><a href="#">The 4 Best All-Time Players From Each NBA Franchise</a></h3>
<p><em class="source">sports.espn.go.com -</em> Trying to find four people to represent an NBA franchise’s history is tough. Probably harder than finding four decent presidents that represent what a country stands for… <a href="#" class="more">More</a> <em class="topic">(<a href="#">Basketball</a>)</em></p>
<div class="details">
<a href="#" class="story-comment">6 Comments</a>
<a href="#" class="story-share">Share</a>
<a href="#" class="story-bury">Bury</a>
<span class="user-details">
<a href="#"><img src="img/usr/diggleague.png" alt="diggleague" class="user-ava" />diggleague</a> made popular <em class="d">3 min ago</em>
</span>
</div>
</div>

<ul class="digg-badge">
<li class="counter"><a href="#"><strong>59</strong> diggs</a></li>
<li class="voter"><a href="#">digg it</a></li>
</ul>
</article>
<!– @end story –>
[/html]

Then next to all this we add the digg badge floating left. This is all stored in a single unordered list with the first list item comprising the top yellow portion of the badge. Below it the second list item holds an anchor link with the classic text “digg it”!

As I’ve moved down the page each new article has an updated ID number, along with newer submission times and amount of diggs. If you use this template on your own website most likely you can generate all this content dynamically from the database.

Digg’s Classic Footer

One last area to check out is the footer. Digg v3 had a really cool implementation which I was always in love with. Of course I’ve redefined the area with an HTML5 footer tag to start. Inside is our content div which houses a slew of definition lists. I’ve copied over just one for the sake of this tutorial.

[html wraplines=”false”]<footer>
<div id="footer-contents" class="clearfix">
<dl class="col">
<dt>Site Links</dt>
<dd><a href="#">Home</a></dd>
<dd><a href="#">Search Digg</a></dd>
<dd><a href="#">RSS Feeds</a></dd>
<dd><a href="#">Popular Archive</a></dd>
<dd><a href="#">Terms of Use</a>, <a href="#">Privacy</a></dd>
<dd><a href="#">Report a Website Bug</a></dd>
</dl>
[/html]

Each list is given a class of “col” to stand for column. In my demo I included 5 total columns with the last one appended to the respective class. Notice how this works very similar to an unordered list except we can break up links into headers and content.

The definition terms(dt) are used as global headers within each list column. Some columns actually contain 2 different dt elements, which is what gives this style of footer design such flexibility. The data definitions(dd) act as list items for each of the links, or perhaps some paragraph text. But enough about the static HTML – let’s finish off by checking out some really cool CSS3 effects!

Finalizing CSS Styles

Perhaps Digg v3 was best known for breaking out of the web 2.0 box templates. They did things other websites such as Delicious or MySpace wouldn’t. But what makes it easier to build this time around is how detailed CSS3 has become.

[css wraplines=”false”]/** @group heading **/
#w header { background: #1B5790; color: #fff; float: left; width: 100%; margin-top: -1px; margin-bottom: 20px; position: relative; z-index: 99999; height: 110px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; }

#w header h1 { font-size: 100%; margin: 0; float: left; }
#w header h1 a { display: block; height: 45px; width: 79px; text-indent: -2000em; z-index: 1000; background: url(‘../img/menu-items.gif’) -116px -733px no-repeat;}
[/css]

Above is the code for our main content wrapper and top heading area. Notice we’re using border-radius and its counterparts for Mozilla and Webkit to create the rounded effects. Digg often used background images in these scenarios – which still would be a fallback option for non-CSS3 compliant browsers. Additionally the h1 logo uses a background image instead of static text.

Also another interesting section is the pagination area. If you noticed on the template page we have a fake set of pagination links underneath the main stories. This was very popular on Digg’s original site and has since ported into other CMS communities. The code uses classes for previous and next links, and also removes styles from items without an anchor.

[css wraplines=”false”]#paginator { padding: 0.5em; margin: 1em 0px; clear: left; font-size: 1.1em; }
#paginator li.prev { border: 1px solid #ddd; color: #999; padding: 0.3em 0.5em; margin-right: 3px; }
#paginator li.next { font-weight: bold; }
#paginator li.current { border: 1px solid #2e6ab1; font-weight: bold; background: #2e6ab1; color: #fff; padding: 0.3em 0.5em; margin-right: 3px; }
#paginator li.sep { margin-right: 3px; }

#paginator li { display: block; float: left; }
#paginator li a { display: block; float: left; padding: 0.3em 0.5em; margin-right: 3px; border: 1px solid #9aafe5;
text-decoration: none; }
#paginator li a:hover { border-color: #176cb2; }
[/css]

This is also very similar to the Digg voting badge you see on each story. The positioning of some elements are set to absolute within a relative container. This just makes the template fall cleaner and much more adaptable for users who resize the window. It seems like such a small detail, but the crowning achievement of Digg v3 was that it just worked properly. I’ve tried to clone that ideology within this template.

[css wraplines=”false”].digg-badge { position: absolute; top: 0.8em; left: 0; text-align: center; font-size: 85%; margin: 0; padding: 0; list-style: none; background: url(‘../img/badge-bg.gif’) no-repeat; }
.digg-badge .counter { }
.digg-badge .counter a { display: block; padding: 10px 0 4px 0; text-decoration: none; width: 50px; min-height: 40px; color: #93883f; text-align: center; }
.digg-badge .counter a:hover, .digg-badge .counter a:hover strong { color: #998d43; }
.digg-badge .counter a strong { font-size: 2.2em; font-weight: normal; letter-spacing: -1px; line-height: 1; display: block; color: #736926; }

.digg-badge .voter { margin-top: 1px; padding: 0px 0px 5px; font-size: 1.3em; }
.digg-badge .voter a { font-weight: bold; display: block; margin-bottom: -5px; padding: 4px 1px 5px; width: 47px; text-decoration: none; text-align: center; border: 1px solid #ddeaf7; border-top-left-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; }
.digg-badge .voter a:hover { border-color: #a9caed; }
[/css]

Live Demo – Download Source Code

Conclusion

We touched upon some great talking points for this Digg re-design. Unfortunately the Internet is an ever-changing organism and websites will move on. But thanks to a wonderful community of designers we can relive the nostalgia of our past effortlessly. If you enjoy the template or use it for yourself we would love to check it out! Add your thoughts and ideas (along with any links) into the discussion area below.

Filed Under: CSS, HTML5

Recent Posts

  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022
  • How to Get Your First Web Design Client

Archives

  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022