Skip to content

Instantly share code, notes, and snippets.

@gotoplanb

gotoplanb/category template

Created October 16, 2010 21:31
Show Gist options
  • Save gotoplanb/630290 to your computer and use it in GitHub Desktop.
Save gotoplanb/630290 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
category template
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Poynter skin</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="wrapper" class="container_16">
<div id="leaderboard">
<img src="gray.gif" width="728" height="90" />
<img src="gray.gif" width="220" height="90" />
<div class="clear"></div>
</div> <!-- END #leaderboard -->
<div id="main">
<div class="nav">
<ul id="menu-above-header" class="menu">
<li class="menu-item"><a href="#">Poynter.org</a></li>
<li class="menu-item"><a href="#">About Us</a></li>
<li class="menu-item"><a href="#">Training</a></li>
<li class="menu-item current-menu-item"><a href="#">Media News</a></li>
<li class="menu-item"><a href="#">Support Poynter</a></li>
</ul>
<div class="clear"></div>
</div>
<div id="logo"><span>Poynter</span></div> <!-- END #logo -->
<div class="nav">
<ul id="menu-primary-navigation" class="menu">
<li class="menu-item current-menu-item"><a href="#">Home</a></li>
<li class="menu-item menu-item-type-category"><a href="#">Latest News</a></li>
<li class="menu-item menu-item-type-category"><a href="#">How To&apos;s</a></li>
<li class="menu-item menu-item-type-category"><a href="#">Making Sense of Media</a></li>
<li class="menu-item menu-item-type-post_type"><a href="#">Blogs</a></li>
<li class="menu-item menu-item-type-post_type"><a href="#">Chats</a></li>
</ul> <!-- END #menu-primary-navigation -->
<div class="clear"></div>
</div> <!-- END .nav -->
<div class="nav">
<ul id="menu-secondary-navigation" class="menu">
<li class="menu-item menu-item-type-subcategory"><a href="#">Romenesko</a></li>
<li class="menu-item current-menu-item"><a href="#">Home</a></li>
<li class="menu-item menu-item-type-subcategory"><a href="#">Business</a></li>
<li class="menu-item menu-item-type-subcategory"><a href="#">Mobile Media</a></li>
</ul> <!-- END #menu-secondary-navigation -->
<div class="clear"></div>
</div> <!-- END .nav -->
<hr class="grid_12" />
<!-- THIS BEGINS THE CATEGORY TEMPLATE GUTS -->
<div id="category-articles" class="articles grid_8">
<h1>Category Name</h1>
<p class="description">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<hr />
<div class="article">
<h2>Millions of eggs recalled because of salmonella</h2>
<p class="excerpt">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p class="article-meta">
<span class="meta-byline">Testy McTesterson</span>
<span class="meta-date">Decembuary 42, 1909</span>
<span class="meta-time">2:19 p.m.</span>
</p>
<p class="breadcrumbs">
<span class="breadcrumb-parent">Latest News</span> &rarr;
<span class="breadcrumb-child">Romenesko</span>
</p>
</div>
<div class="article">
<h2>Millions of eggs recalled because of salmonella</h2>
<p class="excerpt">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p class="article-meta">
<span class="meta-byline">Testy McTesterson</span>
<span class="meta-date">Decembuary 42, 1909</span>
<span class="meta-time">2:19 p.m.</span>
</p>
<p class="breadcrumbs">
<span class="breadcrumb-parent">Latest News</span> &rarr;
<span class="breadcrumb-child">Romenesko</span>
</p>
</div>
<div class="article">
<h2>Millions of eggs recalled because of salmonella</h2>
<p class="excerpt">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p class="article-meta">
<span class="meta-byline">Testy McTesterson</span>
<span class="meta-date">Decembuary 42, 1909</span>
<span class="meta-time">2:19 p.m.</span>
</p>
<p class="breadcrumbs">
<span class="breadcrumb-parent">Latest News</span> &rarr;
<span class="breadcrumb-child">Romenesko</span>
</p>
</div>
<div class="article">
<h2>Millions of eggs recalled because of salmonella</h2>
<p class="excerpt">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p class="article-meta">
<span class="meta-byline">Testy McTesterson</span>
<span class="meta-date">Decembuary 42, 1909</span>
<span class="meta-time">2:19 p.m.</span>
</p>
<p class="breadcrumbs">
<span class="breadcrumb-parent">Latest News</span> &rarr;
<span class="breadcrumb-child">Romenesko</span>
</p>
</div>
<div class="article">
<h2>Millions of eggs recalled because of salmonella</h2>
<p class="excerpt">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p class="article-meta">
<span class="meta-byline">Testy McTesterson</span>
<span class="meta-date">Decembuary 42, 1909</span>
<span class="meta-time">2:19 p.m.</span>
</p>
<p class="breadcrumbs">
<span class="breadcrumb-parent">Latest News</span> &rarr;
<span class="breadcrumb-child">Romenesko</span>
</p>
</div>
<div class="article">
<h2>Millions of eggs recalled because of salmonella</h2>
<p class="excerpt">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p class="article-meta">
<span class="meta-byline">Testy McTesterson</span>
<span class="meta-date">Decembuary 42, 1909</span>
<span class="meta-time">2:19 p.m.</span>
</p>
<p class="breadcrumbs">
<span class="breadcrumb-parent">Latest News</span> &rarr;
<span class="breadcrumb-child">Romenesko</span>
</p>
</div>
<div class="article">
<h2>Millions of eggs recalled because of salmonella</h2>
<p class="excerpt">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p class="article-meta">
<span class="meta-byline">Testy McTesterson</span>
<span class="meta-date">Decembuary 42, 1909</span>
<span class="meta-time">2:19 p.m.</span>
</p>
<p class="breadcrumbs">
<span class="breadcrumb-parent">Latest News</span> &rarr;
<span class="breadcrumb-child">Romenesko</span>
</p>
</div>
<div class="article">
<h2>Millions of eggs recalled because of salmonella</h2>
<p class="excerpt">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p class="article-meta">
<span class="meta-byline">Testy McTesterson</span>
<span class="meta-date">Decembuary 42, 1909</span>
<span class="meta-time">2:19 p.m.</span>
</p>
<p class="breadcrumbs">
<span class="breadcrumb-parent">Latest News</span> &rarr;
<span class="breadcrumb-child">Romenesko</span>
</p>
</div>
<div class="article">
<h2>Millions of eggs recalled because of salmonella</h2>
<p class="excerpt">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p class="article-meta">
<span class="meta-byline">Testy McTesterson</span>
<span class="meta-date">Decembuary 42, 1909</span>
<span class="meta-time">2:19 p.m.</span>
</p>
<p class="breadcrumbs">
<span class="breadcrumb-parent">Latest News</span> &rarr;
<span class="breadcrumb-child">Romenesko</span>
</p>
</div>
<div class="article">
<h2>Millions of eggs recalled because of salmonella</h2>
<p class="excerpt">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p class="article-meta">
<span class="meta-byline">Testy McTesterson</span>
<span class="meta-date">Decembuary 42, 1909</span>
<span class="meta-time">2:19 p.m.</span>
</p>
<p class="breadcrumbs">
<span class="breadcrumb-parent">Latest News</span> &rarr;
<span class="breadcrumb-child">Romenesko</span>
</p>
</div>
<div class="clear"></div>
</div> <!-- END #category-articles -->
<div id="category-sidebar" class="articles grid_4">
<div class="widget">
<h3>Widget Name</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
<div class="widget">
<h3>Widget Name</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
<div class="widget">
<h3>Widget Name</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
<div class="widget">
<h3>Widget Name</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
</div> <!-- EMD #category-sidebar -->
<!-- THIS ENDS THE CATEGORY TEMPLATE GUTS -->
<hr class="grid_12" />
</div> <!-- END #main -->
<div id="rail">
<div id="welcome">explosion</div> <!-- END #foo -->
<div id="ad-tile">explosion</div> <!-- END #foo -->
<div id="list-popular">explosion</div> <!-- END #foo -->
<div id="list-jobs">explosion</div> <!-- END #foo -->
<div id="ad-skyscraper">explosion</div> <!-- END #foo -->
<div id="ad-coupon7">explosion</div> <!-- END #foo -->
</div> <!-- END #rail -->
<div class="clear"></div>
</div> <!-- END #wrapper -->
<div id="wrapper-footer"><div class="container_16">
<div id="footer-copyright" class="grid_4">
<p>&copy; 2010 The Poynter Institute</p>
</div>
<div id="footer-contact" class="grid_3">
<ul>
<li><a href="#">Foo</a></li>
<li><a href="#">Foo</a></li>
<li><a href="#">Foo</a></li>
</ul>
</div>
<div id="footer-distribution" class="grid_3">
<ul>
<li><a href="#">Foo</a></li>
<li><a href="#">Foo</a></li>
<li><a href="#">Foo</a></li>
</ul>
</div>
<div id="footer-static" class="grid_3">
<ul>
<li><a href="#">Foo</a></li>
<li><a href="#">Foo</a></li>
<li><a href="#">Foo</a></li>
</ul>
</div>
<div id="footer-tos" class="grid_3">
<ul>
<li><a href="#">Foo</a></li>
<li><a href="#">Foo</a></li>
<li><a href="#">Foo</a></li>
</ul>
</div>
<div class="clear"></div>
</div></div> <!-- END #wrapper-footer -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment