Style Guide | MakBeta

2015-07-09

I often need to test all standard elements of the site to ensure that the look is uniform. The best way I found is with a style guide. I've seen many that give me only a fraction of HTML that I want to test for. So I came up with my own kitchen sink HMTL Ipsum.

This is a block of text entered without any html tags around it. It should be rendering properly. Fusce non erat volutpat lorem fermentum facilisis. Sed velit. Cras posuere justo non elit. Morbi tristique rhoncus est. Aliquam erat volutpat. Maecenas dignissim velit ac lectus vulputate tristique. Nam cursus risus in libero. Cras dapibus tortor sed lacus.
<hr>
<h1>H1- Lorem ipsum dolor sit amet</h1>
<p>Paragraph 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.</p>
<h2>H2- Consectetur adipiscing elit</h2>
<p>Paragraph 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.</p>
<h3>H3 - Fusce dictum magna id nulla</h3>
<p>Paragraph 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.</p>
<h4>H4- Quisque semper laoreet augue</h4>
<p>Vivamus eu mauris in sem aliquam elementum. <strong>Maecenas varius laoreet ligula. Sed purus tortor, hendrerit at,</strong> pellentesque vel, lacinia sed, ante. In hac habitasse platea dictumst. <em>Pellentesque habitant morbi tristique senectus et netus et malesuada</em> fames ac turpis egestas. Nulla vel ligula. Nam pretium bibendum mi.</p>
<h5>H5 - Pellentesque habitant morbi tristique</h5>
<p>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.</p>
<h6>H6 - Pellentesque habitant morbi tristique </h6>
<p>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.</p>
<ol>
  <li>Ordered list <a href="/preview!blueprint.pub30.convio.net/testing/pop-index.html">Aliquam nisl. Sed eros nulla, rhoncus sit amet</a></li>
  <li>sodales sit amet, viverra in, nunc. Nam neque dolor
    <ol>
      <li>Nesting <a href="/preview!blueprint.pub30.convio.net/testing/pop-index.html">Aliquam nisl. Sed eros nulla, rhoncus sit amet</a></li>
      <li>sodales sit amet, viverra in, nunc. Nam neque dolor</li>
      <li>rutrum ac, ultrices id, sem. Duis sit amet ligula eu ipsum venenatis fermentum.</li>
      <li>Integer rhoncus, diam quis feugiat viverra</li>
    </ol>
  </li>
  <li>rutrum ac, ultrices id, sem. Duis sit amet ligula eu ipsum venenatis fermentum.</li>
  <li>Integer rhoncus, diam quis feugiat viverra</li>
</ol>
<p>Mauris velit lorem, vestibulum nec, facilisis eget, congue ac, tortor. Pellentesque elementum congue lectus. Etiam ac odio non orci auctor aliquam. Donec iaculis augue non tortor. Vivamus mattis suscipit felis. Donec ligula diam, adipiscing ac, condimentum non, porta vitae, magna. Maecenas elit erat, aliquam posuere, viverra eget, tincidunt in, sapien.</p>
<ul>
  <li>Unordered list Maecenas egestas blandit orci
    <ul>
    <li>Unordered list nesting Maecenas egestas blandit orci</li>
    <li>Donec feugiat. Etiam ligula</li>
    <li>Duis sollicitudin commodo lorem</li>
    </ul>
  </li>
  <li>Donec feugiat. Etiam ligula</li>
  <li>Duis sollicitudin commodo lorem</li>
</ul>
<h4>Table with <em>border</em> class</h4>
<table class="border">
  <thead>
    <tr>
      <th>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</th>
      <th>In hac habitasse platea dictumst. Nulla fringilla ultrices nulla at ultricies.</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at turpis urna. Proin iaculis varius leo sed eleifend. Phasellus sapien ligula,</td>
      <td>Proin ligula sapien, bibendum a sagittis ut, dictum non ante. Phasellus a dui tellus, id viverra libero.</td>
    </tr>
    <tr>
      <td>Aenean luctus, odio eget vestibulum fermentum, nisl mauris condimentum nisl, dapibus lobortis tortor arcu consequat lorem. Suspendisse neque turpis, blandit ac blandit bibendum, cursus sed elit. Curabitur vel erat eu libero sodales commodo.</td>
      <td>Maecenas eget eros massa. Donec semper egestas lorem at faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent justo dolor, varius a dignissim non, interdum ac orci. Praesent gravida lacinia nunc et venenatis.</td>
    </tr>
    <tr>
      <td>Proin ligula sapien, bibendum a sagittis ut, dictum non ante. Phasellus a dui tellus, id viverra libero.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at turpis urna. Proin iaculis varius leo sed eleifend. Phasellus sapien ligula,</td>
    </tr>
  </tbody>
</table>

<blockquote>This is a blockquote Lorem ipsum dolor sit amet, consectetur adipiscing elit</blockquote>

<label for="email">Email:</label>
  <input type="email" id="email" placeholder="Enter your email address" />

<label for="message">Message:</label>
  <textarea id="message" placeholder="What's on your mind?"></textarea>

<label>Colors</label>
	<select name="colors" title="Colors" uniqueid="169735909" validation="type:string;defaultValue:blue"> <option label="Blue" selected="selected" value="blue">Blue</option> <option label="Red" value="red">Red</option></select>

<fieldset>
		<legend>Boolean</legend>
		<input name="boolean" title="Boolean :: Yes" type="radio" uniqueid="169735910" value="yes" /> <label>Yes </label>
		<input name="boolean" title="Boolean :: No" type="radio" uniqueid="169735910" value="yes" /> <label>No </label>
	</fieldset>

<fieldset>
		<legend>Boolean</legend>
		<input name="boolean" title="Boolean :: Yes" type="checkbox" uniqueid="169735910" value="yes" /> <label>Yes </label>
		<input name="boolean" title="Boolean :: No" type="checkbox" uniqueid="169735910" value="yes" /> <label>No </label>
	</fieldset>

<input type="submit" value="Send message" />
  <button>Send message </button>
</form>