Basic HTML markup for use in style guides - it contains some of the standard BEM style class naming conventions I use.

style-guide.html

<h1>Style Guide</h1>

<hr>

<h2>Display Headings</h2>

<h1 class="font-family--tradegothic">Display Heading 1<br>
    <span class="sub-heading">Display Heading 1 Sub-heading</span></h1>
<h2 class="font-family--tradegothic">Display Heading 2<br>
    <span class="sub-heading">Display Heading 2 Sub-heading</span></h2>
<h3 class="font-family--tradegothic">Display Heading 3<br>
    <span class="sub-heading">Display Heading 3 Sub-heading</span></h3>
<h4 class="font-family--tradegothic">Display Heading 4<br>
    <span class="sub-heading">Display Heading 4 Sub-heading</span></h4>
<h5 class="font-family--tradegothic">Display Heading 5<br>
    <span class="sub-heading">Display Heading 5 Sub-heading</span></h5>
<h6 class="font-family--tradegothic">Display Heading 6<br>
    <span class="sub-heading">Display Heading 6 Sub-heading</span></h6>

<hr>

<h2>Article Body Headings</h2>

<h1>Article Body Heading 1</h1>
<h2>Article Body Heading 2</h2>
<h3>Article Body Heading 3</h3>
<h4>Article Body Heading 4</h4>
<h5>Article Body Heading 5</h5>
<h6>Article Body Heading 6</h6>

<hr>

<h2>Paragraph Text</h2>

<p class="lead">This is a lead paragraph. Lorem ipsum dolor sit amet, pro hinc possim audiam ut, sed prompta detraxit deseruisse an. Quo laudem repudiare eloquentiam id. Eligendi abhorreant sadipscing mei et, agam ludus id est, mel fabellas recusabo definitionem ad.</p>

<p>Lorem ipsum dolor sit amet, <strong>consectetuer adipiscing elit</strong>. Nullam dignissim convallis est. <em>Quisque aliquam donec faucibus</em>. Nunc iaculis suscipit dui. Nam sit amet sem.</p>

<p>Aliquam libero nisi, <a href="#">imperdiet at tincidunt</a> nec gravida vehicula nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.</p>

<hr>

<h2>Links</h2>

<p><a href="#">This is a standard link</a></p>
<p><a class="link--complex" href="#">This is a <span class="link-target">complex link</span></a></p>
<p><a class="link--clean" href="#">This is a clean link</a></p>

<hr>

<h2>Link lists</h2>

<p>Inline:</p>

<ul class="link-list--inline text-align--center">
    <li class="link-list__item link-list__group-heading">Jump To:</li>
    <li class="link-list__item">
        <a class="link-list__link link-list__link--active" href="#">Link Item 1 (active)</a>
    </li>
    <li class="link-list__item">
        <a class="link-list__link" href="#">Link Item 2</a>
    </li>
    <li class="link-list__item">
        <a class="link-list__link" href="#">Link Item 3</a>
    </li>
</ul>

<p>Blocks:</p>

<div class="grid">
    <div class="grid__cell unit-1-1 unit-1-2--medium">
        <ul class="link-list--blocks">
            <li class="link-list__item link-list__group-heading">Jump To:</li>
            <li class="link-list__item">
                <a class="link-list__link link-list__link--active" href="#">Link Item 1 (active)</a>
            </li>
            <li class="link-list__item">
                <a class="link-list__link" href="#">Link Item 2</a>
            </li>
            <li class="link-list__item">
                <a class="link-list__link" href="#">Link Item 3</a>
            </li>
        </ul>
    </div>
</div>

<p>Buttons:</p>

<div class="grid">
    <div class="grid__cell unit-1-1 unit-1-2--medium">
        <ul class="link-list--buttons">
            <li class="link-list__item link-list__group-heading">Jump To:</li>
            <li class="link-list__item">
                <a class="link-list__link link-list__link--active" href="#">Link Item 1 (active)</a>
            </li>
            <li class="link-list__item">
                <a class="link-list__link" href="#">Link Item 2</a>
            </li>
            <li class="link-list__item">
                <a class="link-list__link" href="#">Link Item 3</a>
            </li>
        </ul>
    </div>
</div>

<hr>

<h2>Blockquotes</h2>

<blockquote>&#8220;This is a regular blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam.&#8221;</blockquote>

<blockquote class="fancy">This is a fancy blockquote. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</blockquote>

<hr>

<h2>Text Elements</h2>

<p>The <a href="#">a element</a> example</p>
<p>The <abbr>abbr element</abbr> and an <abbr title="Abbreviation">abbr</abbr> element with title examples</p>
<p>The <acronym title="A Cowboy Ran One New York Marathon">ACRONYM</acronym> element example
<p>The <b>b element</b> example</p>
<p>The <cite>cite element</cite> example</p>
<p>The <code>code element</code> example</p>
<p>The <em>em element</em> example</p>
<p>The <del>del element</del> example</p>
<p>The <dfn>dfn element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples</p>
<p>The <i>i element</i> example</p>
<p>The <ins>ins element</ins> example</p>
<p>The <kbd>kbd element</kbd> example</p>
<p>The <mark>mark element</mark> example</p>
<p>The <q>q element</q> example</p>
<p>The <q>q element <q>inside</q> a q element</q> example</p>
<p>The <s>s element</s> example</p>
<p>The <samp>samp element</samp> example</p>
<p>The <small>small element</small> example</p>
<p>The <span>span element</span> example</p>
<p>The <strong>strong element</strong> example</p>
<p>The <sub>sub element</sub> example</p>
<p>The <sup>sup element</sup> example</p>
<p>The <u>u element</u> example</p>
<p>The <var>var element</var> example</p>

<hr>

<h2>Lists</h2>

<ol>
    <li>Ordered List Item 1</li>
    <li>Ordered List Item 2</li>
    <li>Ordered List Item 3</li>
</ol>

<ul>
    <li>Unordered List Item 1</li>
    <li>Unordered List Item 2</li>
    <li>Unordered List Item 3</li>
</ul>

<dl>
    <dt>Definition List Term 1</dt>
    <dd>This is a definition list description.</dd>
    <dt>Definition List Term 2</dt>
    <dd>This is a definition list description.</dd>
    <dt>Definition List Term 3</dt>
    <dd>This is a definition list description.</dd>
</dl>

<hr>

<h2>Tables</h2>

<table cellspacing="0" cellpadding="0">
    <tr>
        <th>Table Header 1</th>
        <th>Table Header 2</th>
        <th>Table Header 3</th>
    </tr>
    <tr>
        <td>Division 1</td>
        <td>Division 2</td>
        <td>Division 3</td>
    </tr>
    <tr>
        <td>Division 1</td>
        <td>Division 2</td>
        <td>Division 3</td>
    </tr>
    <tr>
        <td>Division 1</td>
        <td>Division 2</td>
        <td>Division 3</td>
    </tr>
</table>

<hr>

<h2>Buttons</h2>

<p>Sizes:</p>

<p><input class="button--micro" type="submit" value="Submit" /><input class="button--sml" type="submit" value="Submit" /><input class="button" type="submit" value="Submit" /><input class="button--lrg" type="submit" value="Submit" /></p>

<p>Types:</p>

<p><input class="button" type="submit" value="Submit" /><input class="button" type="reset" value="Clear" /><input class="button--disabled" type="submit" value="Disabled" disabled="disabled" /></p>

<p>Inversed:</p>

<p><input class="button--inversed" type="submit" value="Submit" /><input class="button--inversed" type="reset" value="Clear" /><input class="button--inversed--disabled" type="submit" value="Disabled" disabled="disabled" /></p>

<hr>

<h2>Forms</h2>

<fieldset class="fieldset">

    <form>

        <p><label for="text_field">Text Field</label><br>
            <input type="text" id="text_field" placeholder="Type something..." /></p>

        <p><label for="text_area">Text Area</label><br>
            <textarea id="text_area"></textarea></p>

        <p><label for="select_element">Select Element</label><br>
            <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>
                <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>
        </p>

        <p><label for="radio_buttons">Radio Buttons</label><br>
            <input type="radio" class="radio" name="radio_button" value="radio_1" /> Radio 1 <input type="radio" class="radio" name="radio_button" value="radio_2" /> Radio 2 <input type="radio" class="radio" name="radio_button" value="radio_3" /> Radio 3
        </p>

        <p><label for="checkboxes">Checkboxes</label><br>
            <input type="checkbox" class="checkbox" name="checkboxes" value="check_1" /> Radio 1 <input type="checkbox" class="checkbox" name="checkboxes" value="check_2" /> Radio 2 <input type="checkbox" class="checkbox" name="checkboxes" value="check_3" /> Radio 3
        </p>

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

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

        <h2><strong>HTML5-specific Form Elements</strong></h2>

        <p><label for="email">Email</label><br>
            <input type="email" placeholder="you@your-domain.com">
        </p>

        <p><label for="url">URL</label><br>
            <input type="url" placeholder="http://">
        </p>

        <p><label for="tel">Telephone</label><br>
            <input type="tel">
        </p>

        <p><label for="number">Number</label><br>
            <input type="number" min="0" max="10" step="1" value="5">
        </p>

        <p><label for="search">Search</label><br>
            <input type="search">
        </p>

        <p><label for="date">Date</label><br>
            <input type="date">
        </p>

        <p><label for="time">Time</label><br>
            <input type="time">
        </p>

        <p><label for="color">Color</label><br>
            <input type="color">
        </p>

        <p><label for="datalist">Datalist</label><br>
            <input list="browsers" name="browser" type="datalist">
            <datalist id="browsers">
                <option value="Internet Explorer">
                <option value="Firefox">
                <option value="Chrome">
                <option value="Opera">
                <option value="Safari">
            </datalist>
        </p>

        <p><label for="range">Range</label><br>
            <input type="range" name="points" min="1" max="10">
        </p>

    </form>

</fieldset>

<hr>

<h2>Image Outset</h2>

<p>Images can be outset to the left, right, or both sides.</p>

<p class="outset--center"><img src="assets/Uploads/Cute-Cat.jpg" alt="Cute Cat" title="" class="leftAlone" mce_advimageresize_id="Form_ItemEditForm_WidgetContent_mce_1"></p>

<hr>

<h2>Grid</h2>

<div class='grid grid--has-gutter'>
    <div class='grid__cell unit-1-1'>
        <div class="width--one-whole background-color--blue">&nbsp;</div>
    </div>
    <div class='grid__cell unit-1-1 unit-1-2--medium'>
        <div class="width--one-whole background-color--blue">&nbsp;</div>
    </div>
    <div class='grid__cell unit-1-1 unit-1-2--medium'>
        <div class="width--one-whole background-color--blue">&nbsp;</div>
    </div>
    <div class='grid__cell unit-1-1 unit-1-3--medium'>
        <div class="width--one-whole background-color--blue">&nbsp;</div>
    </div>
    <div class='grid__cell unit-1-1 unit-1-3--medium'>
        <div class="width--one-whole background-color--blue">&nbsp;</div>
    </div>
    <div class='grid__cell unit-1-1 unit-1-3--medium'>
        <div class="width--one-whole background-color--blue">&nbsp;</div>
    </div>
    <div class='grid__cell unit-1-1 unit-1-2--medium unit-1-4--large'>
        <div class="width--one-whole background-color--blue">&nbsp;</div>
    </div>
    <div class='grid__cell unit-1-1 unit-1-2--medium unit-1-4--large'>
        <div class="width--one-whole background-color--blue">&nbsp;</div>
    </div>
    <div class='grid__cell unit-1-1 unit-1-2--medium unit-1-4--large'>
        <div class="width--one-whole background-color--blue">&nbsp;</div>
    </div>
    <div class='grid__cell unit-1-1 unit-1-2--medium unit-1-4--large'>
        <div class="width--one-whole background-color--blue">&nbsp;</div>
    </div>
</div>