Style Guide

Larger Intro Text

This is an example of a slightly larger font that can be used in your pages and posts. You could use this larger size to define something in your content, or to provide a big impact first paragraph. You can still use your strong styling, your italic styling, or, your highlight within this larger text as you can in the regular sized body font.

<p class="intro">Your text here</p>

Skinny Content

 

Wrapping your text in a class of ‘skinny’ will center, and also constrain your content inside a slimmer 750px wide container. You can use this to great effect in your posts, pages or portfolio items.

<p class="skinny">Your text here</p>

You can mix your classes and have the larger ‘intro’ text style inside the narrow content area of a ‘skinny’ to allow you to define areas in your content with ultimate flexibility.

<p class="intro skinny">Your text here</p>

Centered Content

You can centralize your content by adding a class of ‘center’. This can be a great way of interrupting the flow of an article to highlight some content, or used for something like a product landing page.

<p class="center">Your text here</p>

This is an example using both the class of ‘intro’ and ‘center’ together which you can also use for laying out your content in style.

<p class="intro center">Your text here</p>

Standard Paragraph Text

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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Cras sed ante. Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.

Here's caption text for the image above

Here’s caption text for the image above


Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Blockquote Example

We can learn a lot from not just magazine designs of today, but also from history.

Jonathan Atkinson


Pre Tag

Use the pre tag whenever you wish to display code.

body {
    font-size: 100%;
    line-height: 1.6em;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    height: 100%;
}

Left Aligned Image

Here's caption text for the image above

Here’s caption text for the image above

Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin consectetuer velit in dui. Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis.


Right Aligned Image

portfolio5

This is a caption

Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin consectetuer velit in dui. Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis.


Ordered / unordered lists

  1. Nam malesuada ornare dolor
  2. Nam malesuada ornare dolor
  3. Nam malesuada ornare dolor
  4. Nam malesuada ornare dolor

Nested Lists

  1. Nam malesuada ornare dolor
  2. Nam malesuada ornare dolor
    1. Nam malesuada ornare dolor
    2. Nam malesuada ornare dolor
    3. Nam malesuada ornare dolor
    4. Nam malesuada ornare dolor
  3. Nam malesuada ornare dolor
  4. Nam malesuada ornare dolor

Mixed Lists

  • Unordered list item one
  • Unordered list item two
    1. Ordered list item one
    2. Ordered list item two
      • Unordered list item one
      • Unordered list item two
        1. Ordered list item one
        2. Ordered list item two
        3. Ordered list item three
      • Unordered list item three
    3. Ordered list item three
  • Unordered list item three

Default Table

Employee Salary
Jane $1 Because that’s all Steve Job’ needed for a salary.
John $100K For all the blogging he does.
Jane $100M Pictures are worth a thousand words, right? So Tom x 1,000.
Jane $100B With hair like that?! Enough said…

Standard Gallery

The WordPress standard gallery is also fully styled and with the inclusion of the free plugin you have an automatic pop-up lightbox if the image is linked to it’s full size image.

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match