Content Baseplate

Posted May 8, 2011 | ~3 minute read

Ever handed over a project to a client, looked at the page a week later and gone "oh crap, i forgot to style *that* element", well rest assured you're not alone.

When writing the CSS for a project it's all too easy to forget tags that are less common, but your clients will always find and use them!

I've compiled a simple content base-plate that i use to test out my content styles whilst writing the css for the project.

Bookmark this page, add it to your workflow / base files or what ever you need. Hopefully this will help you too!

<h1>Page Title</h1>

 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sem orci, scelerisque porttitor egestas id, faucibus id justo. Aliquam erat volutpat. Nulla in condimentum sem. Nulla eu neque id nibh condimentum placerat. Pellentesque et metus eget nisl ultricies convallis ut quis massa. Morbi non lectus nulla, id aliquam mi. Phasellus consectetur, arcu vitae faucibus gravida, orci erat vulputate purus, eget tincidunt quam ipsum at lectus. Curabitur et nibh ut libero tincidunt sagittis. Phasellus pulvinar risus ultrices metus euismod at convallis elit auctor. Praesent et arcu turpis. Ut quis euismod risus. Curabitur at quam lectus. Quisque eget mi sem, eu porta tortor. Phasellus et tellus quis arcu ultrices lacinia. Nunc adipiscing consectetur interdum.</p>

 <h2>Page Secondary Title</h2>

 <p>Suspendisse porta placerat urna, et blandit sapien pellentesque quis. Nam consectetur lobortis magna, et dictum enim fringilla id. Vestibulum orci sem, consequat nec condimentum ut, aliquet quis massa. Nulla a lobortis nibh. Vivamus ornare ipsum vel arcu porta auctor. Maecenas dignissim, erat nec fermentum volutpat, libero purus ullamcorper felis, sit amet scelerisque velit lectus in augue. Vestibulum quis justo ac velit mattis vestibulum vel ac justo. Cras ac turpis felis, et egestas diam. Aenean dui magna, consequat non accumsan ac, vehicula vel leo. Morbi gravida condimentum metus at pulvinar. Ut ultricies, lorem vitae convallis aliquet, dolor velit mattis eros, sit amet eleifend ipsum leo et erat. Fusce et leo mauris. Nullam vitae elit arcu. Duis imperdiet imperdiet mauris a laoreet. Pellentesque neque mi, condimentum vel commodo sed, iaculis in sapien. Nullam rhoncus vestibulum lectus id luctus.</p>

 <h3>Third level</h3>

 <ul>
 <li>Unordered item 1</li>
 <li>Unordered item 2</li>
 <li>Unordered item 3</li>
 <li>Unordered item 4</li>
 <li>Unordered item 5</li>
 </ul>

 <h4>Fourth Level</h4>

 <ol>
 <li>Ordered item</li>
 <li>Ordered item</li>
 <li>Ordered item</li>
 <li>Ordered item</li>
 <li>Ordered item</li>
 </ol>

 <h5>Fifth level title</h5>

 <blockquote>This is a beautiful quote right here full of wonderful words about how lovely this quote is.</blockquote>
 <blockquote>This is a beautiful quote right here full of wonderful words about how lovely this quote is.</blockquote>