Rob Scott

<p>Eazy HTML5 Elements is a WordPress plugin that displays most HTML elements using a shortcode.<br />
This allows theme developers to visualize how HTML elements will display.</p>
<p>Eazy HTML5 Elements includes material copied from or derived from HTML5. Copyright © 2014 W3C® (MIT, ERCIM, Keio, Beihang).</p>
<p>HTML elements are grouped into 5 sections following the HTML5 spec by W3C</p>
<h4>HTML HEADINGS</h4>
<p>h1, h2, h3, h4, h5, h6</p>
<h4>GROUPING HTML CONTENT</h4>
<p>p, br, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, div, main</p>
<h4>TEXT LEVEL SEMANTICS</h4>
<p>a, em, strong, small, s, cite, q, dfn, abbr, data, time, code, var, samp, kbd, sub, sup, i, b, u, mark, ruby, bdi, bdo, span, br, wbr</p>
<h4>EDITS</h4>
<p>ins, del</p>
<h4>EMBEDDED CONTENT</h4>
<p>img, iframe, embed, object, param, video, audio, source, track</p>
<h4>TABLES</h4>
<p>table, thead, tfoot, tbody, tr, th, td</p>
<h4>FORMS</h4>
<p>form, input<br />
Input types include:<br />
Text Field, Password Field, Radio Buttons, Checkbox, Number, Date, Color, Range, Month, Week, Time, Datetime, Datetime Local, E-mail, Telephone Number, URL, File, Select, Datalist, Optgroup, Option, Textarea, Keygen, Progress, Meter, Submit Button</p>


Eazy HTML5 Elements

Eazy HTML5 Elements displays most HTML elements using a shortcode. This allows theme developers to visualize how HTML elements will display.

Simon Fairbairn

<p>“You know, for grids.” #obscurefilmreferences</p>
<p>This plugin allows you to overlay a 12 or 16 column fluid grid to check your positioning when developing fluid or responsive sites.</p>
<p>It also assists you by overlaying lines based on your theme’s line height so that you can correctly set your vertical rhythm and line up all of your typography to a baseline grid like the titan of typography that I’m certain you are.</p>
<p>One should be aware that this is a plugin primarily promoted to pixel pushers and isn’t for production use. You would do well to know quite a bit about CSS and you should know how your theme is laid out in the HTMLs before using this plugin.</p>
<p>Much to my deep sorrow, it is but a certainty that this fine piece of positional plugin prowess won’t work with IE 8 and below (but, surely, one would not be so foolish as to create sites using IE as a development browser) as it requires the magnificent <code>background-size: 100%</code> CSS3 property to be present. Which in IE, to my great distress, it’s not.</p>
<h3>Roadmap</h3>
<h4>0.3.0</h4>
<ul>
<li>Allow user to set the wrapping element that the line-height is derived from</li>
<li>Consistent styling on overlay box ( not overridden by theme styles)</li>
<li>More thorough validation checks (check for either a . or a # on each of the DOM elements coming in and make sure there are no spaces)</li>
<li>Ability to upload custom column images</li>
</ul>
<h4>0.4.0</h4>
<ul>
<li>Better UI and more clear instructions</li>
<li>Better cross-browser support</li>
<li>Option to set grid/lines to on or off on page load</li>
</ul>
<h4>0.5.0</h4>
<ul>
<li>Option to have the control panel hidden or shown and to have the previous state remembered</li>
</ul>


Line In Typography for WordPress

This magical piece of markup monkery will make your mission to muster magnificent missives on your monitor much more manageable.

Eazy HTML5 Elements vs Line In Typography for WordPress