Post Content HTML Style Guide for WordPress

styleguide.html

Lorem <strong>something strong</strong> dolor <em>something emphasized</em>, <del>something struck through</del> adipiscing elit. <a href="http://wordpress.org">an actual link</a>, ipsum sed <span style="text-decoration: underline;">something underlined</span> gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.
<h1>Header level one</h1>
Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.
<h2>Header level two</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non quaeritur autem quid naturae tuae consentaneum sit, sed quid disciplinae. Et ille ridens: Video, inquit, quid agas; Duo Reges: constructio interrete. Istam voluptatem perpetuam quis potest praestare sapienti? Primum in nostrane potestate est, quid meminerimus? Falli igitur possumus. Itaque mihi non satis videmini considerare quod iter sit naturae quaeque progressio.<img class="alignright" src="http://place-hold.it/150&amp;text=150x+AlignRight&amp;fontsize=14" width="150" height="150" /> Atqui eorum nihil est eius generis, ut sit in fine atque extrerno bonorum. Ergo opifex plus sibi proponet ad formarum quam civis excellens ad factorum pulchritudinem? Istam voluptatem perpetuam quis potest praestare sapienti? Nam quibus rebus efficiuntur voluptates, eae non sunt in potestate sapientis. Sed nimis multa. Quid enim est a Chrysippo praetermissum in Stoicis? Qua ex cognitione facilior facta est investigatio rerum occultissimarum. Quod cum dixissent, ille contra. Nunc vides, quid faciat. Consequatur summas voluptates non modo parvo, sed per me nihilo, si potest; Sic, et quidem diligentius saepiusque ista loquemur inter nos agemusque communiter. <img class="alignleft" src="http://place-hold.it/150&amp;text=150x+AlignLeft&amp;fontsize=14" width="150" height="150" />Non laboro, inquit, de nomine. Quis animo aequo videt eum, quem inpure ac flagitiose putet vivere? Re mihi non aeque satisfacit, et quidem locis pluribus. Minime vero istorum quidem, inquit. Quae qui non vident, nihil umquam magnum ac cognitione dignum amaverunt. Zenonis est, inquam, hoc Stoici. Id enim volumus, id contendimus, ut officii fructus sit ipsum officium. Nam de isto magna dissensio est. Quia dolori non voluptas contraria est, sed doloris privatio. Sine ea igitur iucunde negat posse se vivere? Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis. Suspendisse sagittis ante a urna. Morbi a est quis orci consequat rutrum. <img class="aligncenter" src="http://place-hold.it/150&amp;text=150x+AlignCenter&amp;fontsize=14" width="150" height="150" />Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat,
id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. <img class="alignnone" src="http://place-hold.it/150&amp;text=150x+AlignNone&amp;fontsize=14" width="150" height="150" />Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis. Suspendisse sagittis ante a urna. Morbi a est quis orci consequat rutrum.
<h3>Header level three</h3>
Nullam egestas feugiat felis. Integer adipiscing semper ligula. Nunc molestie, nisl sit amet cursus convallis, sapien lectus pretium metus, vitae pretium enim wisi id lectus. Donec vestibulum. Etiam vel nibh. Nulla facilisi. Mauris pharetra. Donec augue. Fusce ultrices, neque id dignissim ultrices, tellus mauris dictum elit, vel lacinia enim metus eu nunc.
<h4>Header level four</h4>
Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem. Ut vitae enim eu est vehicula gravida. Morbi ipsum ipsum, porta nec, tempor id, auctor vitae, purus. Pellentesque neque. Nulla luctus erat vitae libero. Integer nec enim.
<h5>Header level five</h5>
Phasellus aliquam enim et tortor. Quisque aliquet, quam elementum condimentum feugiat, tellus odio consectetuer wisi, vel nonummy sem neque in elit. Curabitur eleifend wisi iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non velit non ligula laoreet ultrices. Praesent ultricies facilisis nisl. Vivamus luctus elit sit amet mi. Phasellus pellentesque, erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.
<h6>Header level six</h6>
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.
<blockquote>This is a block quote with a <a href="#">link to nowhere</a>! 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. Mauris sollicitudin, turpis in hendrerit sodales, lectus ipsum pellentesque ligula, sit amet scelerisque urna nibh ut arcu. Aliquam in lacus.</blockquote>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla placerat aliquam wisi. Mauris viverra odio. Quisque fermentum pulvinar odio. Proin posuere est vitae ligula. Etiam euismod. Cras a eros.

<hr />

<h2>Specific Custom HTML Modules</h2>
<h2>Author Box (example html module)</h2>
<section class="author-box"><img id="grav-f1c8858594659f20b4e99d65d0855f7c-0" src="https://www.gravatar.com/avatar/f1c8858594659f20b4e99d65d0855f7c.jpg?s=200&amp;r=X" width="100" height="100" align="left" />
<h4 class="author-box-title">About Jon Brown</h4>
<div class="author-box-content">

<a href="https://WanderingJon.com/">Jon Brown</a>, a digital nomad traveling the world while developing for and contributing to WordPress. An infrequent blogger who would rather write code than prose, but mostly these days just write emails and text messages. Follow him and say hey at <a href="https://twitter.com/jb510">@jb510</a>.

</div>
</section>
<h2></h2>

<hr />

<h2>Table Layout Test</h2>
Table with <code>.table</code> class.
<table class="table">
<tbody>
<tr>
<th>Title</th>
<th class="views">Views</th>
<th></th>
</tr>
<tr class="alternate">
<td class="label"><a href="http://wpthemetestdata.wordpress.com/about/">About Test User</a></td>
<td class="views">1</td>
<td class="more">More</td>
</tr>
<tr>
<td class="label"><a href="http://wpthemetestdata.wordpress.com/">260</a></td>
<td class="views">1</td>
<td class="more">More</td>
</tr>
<tr class="alternate">
<td class="label"><a href="http://wpthemetestdata.wordpress.com/archives/">Archives</a></td>
<td class="views">1</td>
<td class="more">More</td>
</tr>
<tr>
<td class="label"><a href="http://wpthemetestdata.wordpress.com/">235</a></td>
<td class="views">1</td>
<td class="more">More</td>
</tr>
</tbody>
</table>
<h2 id="buttons">Buttons</h2>
Button styles can be applied to anything with the <code>.button</code> class applied. However, typically you will want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements for the best rendering.
<table class="table">
<thead>
<tr>
<th>Button</th>
<th>class=""</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><button type="button">Default</button></td>
<td><code>button</code></td>
<td>Standard button</td>
</tr>
<tr>
<td><button class="button invert" type="button">Inverted</button></td>
<td><code>button invert</code></td>
<td>Standard button, but inverted</td>
</tr>
<tr>
<td><button class="button large" type="button">Large</button></td>
<td><code>button large</code></td>
<td>Standard button, large</td>
</tr>
<tr>
<td><button class="button small" type="button">Small</button></td>
<td><code>button small</code></td>
<td>Standard button, small</td>
</tr>
<tr>
<td><button class="button mini" type="button">Mini</button></td>
<td><code>button mini</code></td>
<td>Standard button, mini</td>
</tr>
<tr>
<td><button class="button block" type="button">Block</button></td>
<td><code>button button-block</code></td>
<td>Create block level buttons—those that span the full width of a parent</td>
</tr>
</tbody>
</table>
&nbsp;
<h2 id="forms">Fieldsets and Form Elements</h2>
<fieldset><form>
<h3>Form Element</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.

<label for="text_field">Text Field:</label>
<input class="" type="text" placeholder="Default input" />
<label for="text_area">Text Area:</label>
<textarea cols="50" rows="4" placeholder="textarea"></textarea>

<hr />

<label for="select_element">Select Element:</label>

<select name="select_element"><optgroup label="Option Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option></optgroup>
</select>

<select name="select_element"><optgroup label="Option Group 2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option></optgroup>
</select>

<select class="">
<option value="0">Default select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>

<hr />

<div class="one-half first"><label for="radio_buttons">Radio Buttons:</label>
<label><input class="radio" name="radio_button" type="radio" value="radio_1" /> Radio 1</label>
<label><input class="radio" name="radio_button" type="radio" value="radio_2" /> Radio 2</label>
<label><input class="radio" name="radio_button" type="radio" value="radio_3" /> Radio 3</label></div>
<div class="one-half last"><label for="checkboxes">Checkboxes:</label>
<label><input class="checkbox" name="checkboxes" type="checkbox" value="check_1" /> Checkbox 1</label>
<label><input class="checkbox" name="checkboxes" type="checkbox" value="check_2" /> Checkbox 2</label>
<label><input class="checkbox" name="checkboxes" type="checkbox" value="check_3" /> Checkbox 3</label></div>

<hr />

<label for="password">Password:</label>
<input class="password" name="password" type="password" />

<hr />

<label for="file">File Input:</label>
<input class="file" name="file" type="file" />

<input type="submit" value="Submit" />

</form></fieldset>

<hr />

<h2 id="list_types">List Types</h2>
<h3>Definition List</h3>
<dl>
 	<dt>Definition List Title</dt>
 	<dd>This is a definition list division.</dd>
</dl>
<div class="one-half first">
<h3>Ordered List</h3>
<ol>
 	<li>List Item 1
<ol>
 	<li>List Item 1</li>
 	<li>List Item 2</li>
 	<li>List Item 3</li>
</ol>
</li>
 	<li>List Item 2</li>
 	<li>List Item 3</li>
</ol>
</div>
<div class="one-half last">
<h3>Unordered List</h3>
<ul>
 	<li>List Item 1
<ul>
 	<li>List Item 1</li>
 	<li>List Item 2</li>
 	<li>List Item 3</li>
</ul>
</li>
 	<li>List Item 2</li>
 	<li>List Item 3</li>
</ul>
</div>
<div class="one-half first">
<h3>%default-ol Ordered List</h3>
<ol class="default">
 	<li>List Item 1
<ol>
 	<li>List Item 1
<ol>
 	<li>List Item 1</li>
 	<li>List Item 2</li>
</ol>
</li>
 	<li>List Item 2</li>
 	<li>List Item 3</li>
</ol>
</li>
 	<li>List Item 2</li>
 	<li>List Item 3</li>
</ol>
</div>
<div class="one-half last">
<h3>%default-ul Unordered List</h3>
<ul class="default">
 	<li>List Item 1
<ul>
 	<li>List Item 1
<ul>
 	<li>List Item 1</li>
 	<li>List Item 2</li>
</ul>
</li>
 	<li>List Item 2</li>
 	<li>List Item 3</li>
</ul>
</li>
 	<li>List Item 2</li>
 	<li>List Item 3</li>
</ul>
</div>

<hr />

<h2>Misc</h2>
<h3>Alerts/Notifications</h3>
<div class="flash-alert">This is an alert with <code>.flash-alert</code></div>
<div class="flash-error">This is an alert error with <code>.flash-error</code></div>
<div class="flash-notice">This is an alert info with <code>.flash-info</code></div>
<div class="flash-success">This is an alert success with <code>.flash-success</code></div>
<h3>Code</h3>
This is a CSS reset <code>article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}</code>, awesome!
<h3>Pre</h3>
<pre>/**
		* This is a test docblock
		*
		* @package  SomePackage
		* @since    1.0.1
		*/
</pre>
<h2 id="columns">Columns</h2>
Below are examples of column classes that are available
<h3>Two-Columns</h3>
<div class="one-half first">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>
<div class="one-half">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>
<div class="clear-line"></div>
<h3>Three-Columns</h3>
<div class="one-third first">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</div>
<div class="one-third">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</div>
<div class="one-third">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</div>
<div class="clear-line"></div>
<h3>Four-Columns</h3>
<div class="one-fourth first">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>
<div class="one-fourth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>
<div class="one-fourth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>
<div class="one-fourth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>
<div class="clear-line"></div>
<h3>Five-Columns</h3>
<div class="one-fifth first">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>
<div class="one-fifth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>
<div class="one-fifth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>
<div class="one-fifth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>
<div class="one-fifth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>
<div class="clear-line"></div>
<h3>Six-Columns</h3>
<div class="one-sixth first">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</div>
<div class="one-sixth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</div>
<div class="one-sixth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</div>
<div class="one-sixth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</div>
<div class="one-sixth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</div>
<div class="one-sixth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</div>