HTML5 Article Template

on December 31st, 2012

Mellentesque 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.

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 sample and sample leo.

Subheader

Subsubheader

ellentesque 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.

Figure caption is here

Lorem	ipsum	Numbers
Lorem	ipsum	45
Lorem	ipsum	789
Lorem	ipsum	6
Lorem	ipsum	789

Source: http://codepen.io/cianty/pen/dHiGh
Code:

HTML5 Article Template
 By Christian Templin
 on December 31st, 2012
 Mellentesque 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.
 Note:
Additional info not directly related to the main content. Maybe about the author, the website or ads.
Can contain texts, links, etc.
 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 sample and sample leo.
 
 Subheader
 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.
 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.
 Note:
Additional info not directly related to the main content. Maybe about the author, the website or ads.
Can contain texts, links, etc.
 Subsubheader
 ellentesque 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.
 
 Figure caption is here
 ellentesque 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.
 Lorem ipsum Numbers
Lorem ipsum 45
Lorem ipsum 789
Lorem ipsum 6
Lorem ipsum 789

CSS:

/* Box model: apply a natural box layout model to all elements */
 * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
 
 body { width: 800px; margin: auto; color: #333;
border-left: 5px solid #CCC; padding: 30px;
font-family: 'Merriweather', serif;
font-size:62.5%; line-height:1.125em;
background: none;
 }
 input, select, th, td {font-size:1em}
 img { max-width: 100%;}
 
 
 /* *** Article *** */
 article { position: relative; font-size: 1.6em;}
 
 
 /* *** Headers *** */
 header { display:block; border-bottom: 3px dotted #CCC;
margin: 0 0 16px 0; padding-bottom: 5px;}
 header p{ font-size:1.2em; font-style: italic;}
 header .byline { font-size: 1.3em; font-style: normal; margin-bottom: 8px; }
 header .byline address{ display: inline-block; font-style: normal;}
 header .byline a[rel='author']{ }
 
 
 /* *** Anchors *** */
 a{ outline: none; text-decoration: none; color: #339ccc; }
 a:link {}
 a:visited {}
 a:hover { text-decoration:underline; }
 a:active { text-decoration:underline; }
 a image {border: none; }
 
 /* File links. Usage: class="file-download" */
 a.file-download{}
 a.file-download:after{ content: ""; display: inline-block;
width: 12px; height: 16px; margin: 0px 5px;
background: url('https://dl.dropbox.com/u/43753212/dev/webprojects/article/filetype-icons.png'); background-repeat: no-repeat;}
 a.file-download:link{}
 a.file-download:visited{}
 a.file-download:hover{ }
 a.file-download:active{ }
 a.file-download:focus{text-decoration:underline;}
 a.file-download[href$=".pdf"]:after{ background-position: 0px 0px;}
 a.file-download[href$=".doc"]:after{ background-position: -12px 0px;}
 
 /* Links to external websites */
 a.file-download[target="_blank"]:before{content:url('https://dl.dropbox.com/u/43753212/dev/webprojects/article/target-blank.png') " ";}
 
 
 
 /* *** Paragraphs *** */
 p { font-size: 1em;
margin: 0px; padding:8px 0px 8px 0px; line-height: 150%; }
 article > p + p { text-indent: 1em; }
 p::first-letter { text-transform: uppercase;}
 /* First paragraph of article text*/
 article > p:first-of-type::first-letter { font-size: 3.5em; font-weight: 700;
text-transform: uppercase; line-height: 1em;
float: left; margin: 0 0.107em 0 0;
color: #CCC;
 }
 
 
 /* *** Headlines *** */
 h1 { /*Reserved for website title*/ }
 h2 { font-size: 3em; font-family: 'Merriweather', serif; margin: 0px; padding: 0px; line-height: 1.5em;}
 h3 { font-size: 2em; font-family: 'Merriweather', serif; margin: 0px; padding: 36px 0px 12px 0px;}
 h4 { font-size: 1.3em; font-family: 'Merriweather', sans-serif; margin: 0px; padding: 24px 0px 8px 0px; font-weight: 700px; }
 h5 { font-size: 1em; margin: 0px; padding: 24px 0px 8px 0px; font-weight: 700px; text-transform: uppercase; letter-spacing: 2px; }
 
 
 /* *** Figures *** */
 figure { display: inline-block; margin: 15px 0 15px 0; border: 2px solid #999; padding: 15px;
-moz-box-shadow: 3px 3px 3px #ccc;
-webkit-box-shadow: 3px 3px 3px #ccc;
box-shadow: 3px 3px 3px #ccc;
 }
 figcaption { font-size: 0.9em; color: #444; }
 
 
 /* *** Asides *** */
 aside { display: inline-block; float: right; position: relative;
width: 200px; margin: 10px 0 10px 10px;
border: 2px solid #CCC; padding: 12px 8px 10px 8px;
-moz-box-shadow: 3px 3px 3px #ddd;
-webkit-box-shadow: 3px 3px 3px #ddd;
box-shadow: 3px 3px 3px #ddd;
}
 aside h1, aside h2, aside h3, aside h4,aside h5,aside h6 {
font-size: 1.2em; font-weight: 700; }
 aside p { font-size: 0.9em; color: #444;}
 
 
 /* *** Tables *** */
 table { margin: 10px; padding: 0; border: 0; border-collapse: separate;
border-spacing: 0; width:100%;
border-top: 4px solid #999;
border-bottom: 4px solid #999;
 }
 th, td { text-align: left; font-weight: normal; line-height:1.2em;
padding: 5px;
 }
 thead th { padding-top:10px;padding-bottom:10px;}
 tr { background: #EEE; }
 tr:nth-child(even) { background: #FFF; }
 thead th { font-weight: 700; border-bottom: 2px solid #999;
background: #FFF;
 }
 tbody tr:hover { background: #339ccc; color: #FFF; }