WordPress Style Guide Post Content

wp-styleguide

<section id="intro">
  <p class="intro">This is the style guide for your website. This document sets the styles and standards to be used when updating or contributing to your site. In this guide you will find examples of what your site is supposed to look like and the many HTML elements that you can use in your posts and pages.</p>
  <p class="intro">Not only can you view how the elements will appear on your site, but you can also see how these elements are implemented by viewing the <q>Your Website Style Guide</q> post within the WordPress post editor.</p>
</section><!-- END #intro -->

<section id="branding">
  <h2 class="font-script callout">Branding</h2>
  <h3>Colors &amp; Textures</h3>
  <ul class="colors">
    <li class="color-light"><var>#F5F5F5</var></li>
    <li class="color-dark"><var>#333333</var></li>
    <li class="color-brand"><var>#33FFFF</var></li>
    <li class="color-brand2"><var>#F78F1E</var></li>
    <li class="color-warning"><var>#FF8C00</var></li>
  </ul>
  <h3>Fonts</h3>
  <ul>
    <li class="font-sans">PT Sans</li>
    <li class="font-script">SF Comic Script</li>
    <li class="font-script-condensed">SF Comic Script Condensed</li>
  </ul>  
</section><!-- END #branding -->

<section id="headings">
  <h2 class="font-script callout" id="headings">Headings</h2>
  <h1>This is an example of an &lt;H1&gt; header.</h1>
  <h2>This is an example of an &lt;H2&gt; header.</h2>
  <h3>This is an example of an &lt;H3&gt; header.</h3>
  <h4>This is an example of an &lt;H4&gt; header.</h4>
  <h5>This is an example of an &lt;H5&gt; header.</h5>
  <h6>This is an example of an &lt;H6&gt; header.</h6>
</section><!-- END #headings -->

<section id="columns">
  <h2>Columns</h2>

  <div class="row">
    <div class="one-sixth first">
      <p>.one-sixth</p>
    </div>

    <div class="five-sixths">
      <p>.five-sixths</p>
    </div>    
  </div>

  <div class="row">
    <div class="one-fourth first">
      <p>.one-fourth</p>
    </div>

    <div class="three-fourths">
      <p>.three-fourths</p>
    </div>    
  </div>

  <div class="row">
    <div class="one-third first">
      <p>.one-third <em>or</em> .two-sixths</p>
    </div>

    <div class="two-thirds">
      <p>.two-thirds <em>or</em> .four-sixths</p>
    </div>    
  </div>

  <div class="row">
    <div class="one-half first">
      <p>.one-half <em>or</em> .two-fourths <em>or</em> .three-sixths</p>
    </div>

    <div class="one-half">
      <p>.one-half <em>or</em> .two-fourths <em>or</em> .three-sixths</p>
    </div>    
  </div>

  <div class="row">
    <div class="full">
      <p>.full</p>
    </div>
  </div>
</section><!-- END #columns -->

<section id="text-layout">
  <h2>Text Justification</h2>
  <div class="left">
    <h3>Left Justified</h3>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.</p>
  </div>

  <div class="center">
    <h3>Center Justified</h3>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.</p>
  </div>

  <div class="right">
    <h3>Right Justified</h3>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.</p>
  </div>

  <h3>Width Justified</h3>
  <p class="justified">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.</p>  
</section><!-- END #text-layout -->

<secion id="images">
  <h2>Images and Figures</h2>
  <div class="row">
    <h3>Left Aligned Image</h3>
    <p><img class="alignleft ph" src="http://lorempixel.com/250/250/nightlife/1" alt="Image Placeholder" />Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.</p>
  </div>
  <div class="row">
    <h3>Center Aligned Image</h3>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. <img class="aligncenter ph" src="http://lorempixel.com/250/250/nightlife/2" alt="Image Placeholder" /> Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.</p>
  </div>
  <div class="row">
    <h3>Right Aligned Image</h3>
    <p><img class="alignright ph" src="http://lorempixel.com/250/250/nightlife/3" alt="Image Placeholder" />Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.</p>
  </div>
  <div class="row">
    <h3>Left Aligned Figure with Caption</h3>
    <p><figure class="alignleft"><img class="ph" src="http://lorempixel.com/250/250/nightlife/4" alt="Image Placeholder" /><figcaption><a href="http://redcatchermedia.com/">Redcatcher Media</a></figcaption></figure>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam.</p>
  </div>
</secion><!-- END #images-->

<section id="quotes">
  <h2>Quotes and Citations</h2>

  <h3>Block Quotes</h3>
  <blockquote cite="http://www.goodreads.com/author/quotes/229.Abraham_Lincoln">I can see how it might be possible for a man to look down upon the earth and be an atheist, but I cannot conceive how a man could look up into the heavens and say there is no God.<cite class="credit">Honest Abe</cite></blockquote>

  <h3>Pull Quotes</h3>
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

  <blockquote class="callout">Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</blockquote>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue.</p>

  <h3>Inline Quotes</h3>
  <p>Use the <code>&lt;q&gt;</code> tag for <q>inline</q> quotes.</p>

  <h3>Citations</h3>
  <p>You can <cite>cite a reference</cite> using the <code>&lt;cite&gt;</code> tag.</p>
</section><!-- END #quotes -->

<section id="lists">
  <h2>List Types</h2>
  <h3>Unordered List (Nested)</h3>
  <ul>
    <li>List item one
      <ul>
        <li>List item one
          <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
            <li>List item four</li>
          </ul>
        </li>
        <li>List item two</li>
        <li>List item three</li>
        <li>List item four</li>
      </ul>
    </li>
    <li>List item two</li>
    <li>List item three</li>
    <li>List item four</li>
  </ul>
  <h3>Ordered List</h3>
  <ol>
    <li>List item one
      <ol>
        <li>List item one
          <ol>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
            <li>List item four</li>
          </ol>
        </li>
        <li>List item two</li>
        <li>List item three</li>
        <li>List item four</li>
      </ol>
    </li>
    <li>List item two</li>
    <li>List item three</li>
    <li>List item four</li>
  </ol>
  <h3>Definition List</h3>
  <dl><dt><a href="#">Wordpress</a></dt><dd>WordPress is web software you can use to create a beautiful website or blog.</dd><dt><a href="#">Sublime Text</a></dt><dd>Sublime Text is a sophisticated text editor for code, markup and prose.</dd><dt><a href="#">HiDef, Inc</a></dt><dd>Catalysts for a Better World.</dd><dt><a href="#">Sheryle Gillihan</a></dt><dd>Ideas, insights, and inspiration from a project management wonder woman.</dd></dl>
</section><!-- END #lists -->

<section id="elements">
  <h2>HTML Element Tag Tests</h2>
  <p><a href="#">This</a> is an <code>&lt;anchor&gt;</code> tag (otherwise known as a link).</p>

  <p>Use the <code>&lt;strong&gt;</code> tag for <strong>bold</strong> text.</p>

  <p>Use the <code>&lt;em&gt;</code> tag to <em>emphasize(italics)</em> text.</p>

  <p>The <code>&lt;address&gt;</code> tag is used to represent the contact information for an article, post, or page. When marking up postal addresses the <code>&lt;p&gt;</code> tag is the appropriate element.
  <address>
    For more details contact:
    <a href="#">John Doe</a>
  </address></p>

  <p>This <abbr title="abbreviation">abbr.</abbr> is an example of an <code>&lt;abbr&gt;</code> tag in the middle of a sentence.</p>

  <p>You can write code using the <code>&lt;code&gt;</code> tag.</p>

  <p>You can <kbd>emulate keyboard text</kbd>, using the <code>&lt;kbd&gt;</code> text tag.</p>

  <p>You can mark text for <del>deletion</del> using the <code>&lt;del&gt;</code> tag.</p>

  <p>Use the <code>&lt;s&gt;</code> tag to mark content that is <s>no longer relevant or accurate</s>.</p>

  <p>Use the <code>&lt;ins&gt;</code> tag to <ins>mark inserted text</ins>.</p>

  <p>Use the <code>&lt;pre&gt;</code> tag to display blocks of code:
  <pre>#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
  }</pre></p>

    <p>Use the <code>&lt;sub&gt;</code> for <sub>subscripting</sub> text like H<sub>2</sub>O.</p>

    <p>Use the <code>&lt;sup&gt;</code> tag for <sup>superscripting</sup> text like E = MC<sup>2</sup>.</p>

    <p>Use the <code>&lt;var&gt;</code> tag to call out a <var>variable</var>.</p>
</section><!-- END #elements -->