Skip to content

Instantly share code, notes, and snippets.

@dennyweiss

dennyweiss/SassMeister-input-HTML.html

Created November 13, 2014 10:28
Show Gist options
  • Save dennyweiss/75c572bddd72d9ef70a3 to your computer and use it in GitHub Desktop.
Save dennyweiss/75c572bddd72d9ef70a3 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<h1>elbworx website style guide</h1>
<p>A quick-and-dirty frontend styleguide, designed to be copied and pasted into your CMS.</p>
<hr/>
<h1 id="headings">Headings</h1>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<hr/>
<h1 id="headings">Headings with Text</h1>
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
<h4>Heading 4</h4>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
<h5>Heading 5</h5>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
<h6>Heading 6</h6>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
<hr/>
<h1 id="paragraph">Content Section Shortcode Styles</h1>
<div class="content-section" style="width: 100%;" domflag>
<div class="cs__item-container-text">
<div class="cs__text-content">
<h3 class="scode__content-title-1">Title 1 [title-1]</h3>
<h3 class="scode__content-title-2">Title 2 [title-2]</h3>
<h4 class="scode__content-title-3">Title 3 [title-3]</h4>
<p>Standard paragraph with breaks</p>
<h4 class="scode__content-title-3">Title 3 [title-3]</h4>
<p>Standard paragraph with breaks</p>
<h4 class="scode__content-title-3">Title 3 [title-3]</h4>
<p>Standard paragraph with breaks</p>
<h4 class="scode__content-title-4">Title 4 [title-4]</h4>
<h5 class="scode__content-intro">Intro Text [intro]</h5>
<strong class="scode__content-strong">[bold]</strong>
<span class="scode__content-italic">[italic]</span>
<span class="scode__content-italic-bold">[italic-bold]</span>
<a class="scode__content-link">[link]</a>
<p>
Standard paragraph with breaks<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qualem igitur hominem natura inchoavit? An dolor longissimus quisque miserrimus, voluptatem non optabiliorem diuturnitas facit? Ergo adhuc, quantum equidem intellego, causa non videtur fuisse mutandi nominis. Qua ex cognitione facilior facta est investigatio rerum occultissimarum. Duo Reges: constructio interrete. Inquit, dasne adolescenti veniam?
</p>
<p></p>
<p></p>
<p></p>
<a href="#">Link</a>
<span>span</span>
</div>
</div>
</div>
<hr>
<h1 id="paragraph">Paragraph</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.</p>
<p>Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.</p>
<p><img alt="Placeholder Image and Some Alt Text" src="http://placehold.it/350x150"
title="A title element for this placeholder image."></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.</p>
<blockquote>
"This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl."
</blockquote>
<h1 id="text-elements"> Text Elements</h1>
<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/>
<h1 id="monospace">Monospace / Preformatted</h1>
<p>Code block wrapped in "pre" and "code" tags</p>
<pre><code>// Loop through Divs using Javascript.
var divs = document.querySelectorAll('div'), i;
for (i = 0; i < divs.length; ++i) {
divs[i].style.color = "green";
}</code></pre>
<p>Monospace Text wrapped in "pre" tags</p>
<pre><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p></pre>
<hr/>
<h1 id="list_types">List Types</h1>
<h3>Ordered List</h3>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
<h3>Unordered List</h3>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
<h3>Definition List</h3>
<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/>
<h1 id="tables">Tables</h1>
<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 class="even">
<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/>
<h1 id="form_elements">Media and Form Elements</h1>
<h2>Media</h2>
<p>The Audio Element:</p>
<audio controls>
<source src="http://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
<source src="http://www.w3schools.com/tags/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>The Video Element:</p>
<video width="320" height="240" controls>
<source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/tags/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<h2>Form Elements</h2>
<p>The Fieldset:</p>
<fieldset>
<legend>Legend</legend>
<p>The Form:</p>
<form>
<p><label for="text_field">Text Field:</label><br/>
<input type="text" id="text_field"/></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<br/>
<input type="radio" class="radio" name="radio_button" value="radio_2"/> Radio 2<br/>
<input type="radio" class="radio" name="radio_button" value="radio_3"/> Radio 3<br/>
</p>
<p><label for="checkboxes">Checkboxes:</label><br/>
<input type="checkbox" class="checkbox" name="checkboxes" value="check_1"/> Radio 1<br/>
<input type="checkbox" class="checkbox" name="checkboxes" value="check_2"/> Radio 2<br/>
<input type="checkbox" class="checkbox" name="checkboxes" value="check_3"/> Radio 3<br/>
</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>
<h3>HTML5-specific Form Elements</h3>
<p><label for="email">Email:</label><br/>
<input type="email">
</p>
<p><label for="url">URL:</label><br/>
<input type="url">
</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>
<p>
<input class="button" type="reset" value="Clear"/> <input class="button" type="submit" value="Submit"/>
</p>
</form>
</fieldset>
<!-- End of Styleguide -->
Raw
SassMeister-input.sass
// ----
// libsass (v3.0.1)
// ----
//--------------------------------------------------------------------
// _block-elements.sass
//--------------------------------------------------------------------
html
color: black
body
color: black
button
color: black
form
color: black
fieldset
color: black
//--------------------------------------------------------------------
//-- _typography.sass
//--------------------------------------------------------------------
//html
//html, body
//--------------------------------------------------------------------
//-- Headlines
//h1, h2, h3, h4, h5, h6
//h4, h5, h6
//h1
//h2
//h3
//h4
//h5
//h6
//--------------------------------------------------------------------
//-- Text
//--------------------------------------------------------------------
//p, a, li
//a
//li
//i
//p.strong
Raw
SassMeister-output.css
html {
color: black; }
body {
color: black; }
button {
color: black; }
form {
color: black; }
fieldset {
color: black; }
Raw
SassMeister-rendered.html
<h1>elbworx website style guide</h1>
<p>A quick-and-dirty frontend styleguide, designed to be copied and pasted into your CMS.</p>
<hr/>
<h1 id="headings">Headings</h1>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<hr/>
<h1 id="headings">Headings with Text</h1>
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
<h4>Heading 4</h4>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
<h5>Heading 5</h5>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
<h6>Heading 6</h6>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
<hr/>
<h1 id="paragraph">Content Section Shortcode Styles</h1>
<div class="content-section" style="width: 100%;" domflag>
<div class="cs__item-container-text">
<div class="cs__text-content">
<h3 class="scode__content-title-1">Title 1 [title-1]</h3>
<h3 class="scode__content-title-2">Title 2 [title-2]</h3>
<h4 class="scode__content-title-3">Title 3 [title-3]</h4>
<p>Standard paragraph with breaks</p>
<h4 class="scode__content-title-3">Title 3 [title-3]</h4>
<p>Standard paragraph with breaks</p>
<h4 class="scode__content-title-3">Title 3 [title-3]</h4>
<p>Standard paragraph with breaks</p>
<h4 class="scode__content-title-4">Title 4 [title-4]</h4>
<h5 class="scode__content-intro">Intro Text [intro]</h5>
<strong class="scode__content-strong">[bold]</strong>
<span class="scode__content-italic">[italic]</span>
<span class="scode__content-italic-bold">[italic-bold]</span>
<a class="scode__content-link">[link]</a>
<p>
Standard paragraph with breaks<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qualem igitur hominem natura inchoavit? An dolor longissimus quisque miserrimus, voluptatem non optabiliorem diuturnitas facit? Ergo adhuc, quantum equidem intellego, causa non videtur fuisse mutandi nominis. Qua ex cognitione facilior facta est investigatio rerum occultissimarum. Duo Reges: constructio interrete. Inquit, dasne adolescenti veniam?
</p>
<p></p>
<p></p>
<p></p>
<a href="#">Link</a>
<span>span</span>
</div>
</div>
</div>
<hr>
<h1 id="paragraph">Paragraph</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.</p>
<p>Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.</p>
<p><img alt="Placeholder Image and Some Alt Text" src="http://placehold.it/350x150"
title="A title element for this placeholder image."></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.</p>
<blockquote>
"This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl."
</blockquote>
<h1 id="text-elements"> Text Elements</h1>
<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/>
<h1 id="monospace">Monospace / Preformatted</h1>
<p>Code block wrapped in "pre" and "code" tags</p>
<pre><code>// Loop through Divs using Javascript.
var divs = document.querySelectorAll('div'), i;
for (i = 0; i < divs.length; ++i) {
divs[i].style.color = "green";
}</code></pre>
<p>Monospace Text wrapped in "pre" tags</p>
<pre><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p></pre>
<hr/>
<h1 id="list_types">List Types</h1>
<h3>Ordered List</h3>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
<h3>Unordered List</h3>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
<h3>Definition List</h3>
<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/>
<h1 id="tables">Tables</h1>
<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 class="even">
<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/>
<h1 id="form_elements">Media and Form Elements</h1>
<h2>Media</h2>
<p>The Audio Element:</p>
<audio controls>
<source src="http://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
<source src="http://www.w3schools.com/tags/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>The Video Element:</p>
<video width="320" height="240" controls>
<source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/tags/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<h2>Form Elements</h2>
<p>The Fieldset:</p>
<fieldset>
<legend>Legend</legend>
<p>The Form:</p>
<form>
<p><label for="text_field">Text Field:</label><br/>
<input type="text" id="text_field"/></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<br/>
<input type="radio" class="radio" name="radio_button" value="radio_2"/> Radio 2<br/>
<input type="radio" class="radio" name="radio_button" value="radio_3"/> Radio 3<br/>
</p>
<p><label for="checkboxes">Checkboxes:</label><br/>
<input type="checkbox" class="checkbox" name="checkboxes" value="check_1"/> Radio 1<br/>
<input type="checkbox" class="checkbox" name="checkboxes" value="check_2"/> Radio 2<br/>
<input type="checkbox" class="checkbox" name="checkboxes" value="check_3"/> Radio 3<br/>
</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>
<h3>HTML5-specific Form Elements</h3>
<p><label for="email">Email:</label><br/>
<input type="email">
</p>
<p><label for="url">URL:</label><br/>
<input type="url">
</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>
<p>
<input class="button" type="reset" value="Clear"/> <input class="button" type="submit" value="Submit"/>
</p>
</form>
</fieldset>
<!-- End of Styleguide -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment