Full Width Post

This document's body tag is classed with full-width. You must wrap your content in <div class="post"></div> to inherit blog post styling.

Creating Columns

To create columned sections, markup your HTML similar to the example on your right. For 2, 3, or 4 columned sections, simply change the parent div's class to two-columns, three-columns, or four-columns and match the number of child divs. Remember to include the end class on the last column!

Example:

<div class="two-columns">
    <div class="col">content...</div>
    <div class="col end">content...</div>
</div>
<div class="four-columns">
    <div class="col">content...</div>
    <div class="col">content...</div>
    <div class="col">content...</div>
    <div class="col end">content...</div>
</div>
Four Columns:

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus.

Second Column

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus.

Third Column

Maecenas ultricies cursus lectus, eget bibendum lacus porttitor eget. Proin magna velit, condimentum eu ullamcorper a, commodo ut justo. Vivamus neque ante, sollicitudin eget mollis quis, adipiscing sodales ligula. Curabitur a mi nisl, et imperdiet nunc.

Last Column

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus.

<div class="space2left three">
	content goes here...
</div>

Lorem ipsum dolor sit amet…

You can play with the spaceXleft, spaceXright, and one, two, three, four, five classes to create some interesting layouts. Keep in mind, this template does not utilize an entire CSS Grid System. Instead I've brought to you a set of classes that mimic some of their properties and that work with the Full Width Template.

This paragraph was created by combining the classes: pull1left and sidenote

Pellentesque eu est a nulla placerat dignissim. Morbi a enim in. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl.

Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in.

Three Columns:

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus.

Middle Column

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus.

Last Column
  • Praesent eget neque eu eros interdum
  • Phasellus molestie magna non est bibendum
  • Praesent id metus massa, ut blandit
  • Aliquam erat volutpat. Mauris vel neque sit

Nam vestibulum, arcu sodales feugiat consectetur.

Vestibulum in mi vel lacus facilisis blandit a ut orci. Maecenas tempus felis quis justo dignissim pellentesque. Integer tincidunt elementum ante, vehicula egestas turpis pharetra eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan vestibulum nulla in fermentum. In vitae turpis et lorem luctus ullamcorper.

Shift objects by a portion of the grid:

Apply both left and pull1left classes to an image to create the effect on your left. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh.

Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis.

Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra.

"This is a pullquote. Simply enclose a paragraph with a div classed pullquote and pull1left for this effect."

Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo.

<div class="space1left three">
	content goes here...
</div>

Pellentesque eu est a nulla placerat dignissim. Morbi.

This paragraph was created with the two classes: pull2right and sidenote

Pellentesque eu est a nulla placerat dignissim. Morbi a enim in. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl.

Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in.

Vestibulum in mi vel lacus facilisis blandit a ut orci. Maecenas tempus felis quis justo dignissim pellentesque. Integer tincidunt elementum ante, vehicula egestas turpis pharetra eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan vestibulum nulla in fermentum. In vitae turpis et lorem luctus ullamcorper.

"This was created using the classes darkblock, pull1right and right., a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget."

Etiam scelerisque, nunc ac egestas.

Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit.

Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac.

<div class="three-columns">
	<div class="col"></div>
	<div class="col"></div>
	<div class="col end"></div>
</div>

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus.

Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci.

Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui.

Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac.

The End.