Skip to content
Browse files

Add html template

  • Loading branch information...
1 parent 405faf9 commit f7d88cda9cc1a3a19a92b00b2217efcc885c6393 @garethrees committed Aug 21, 2012
Showing with 546 additions and 0 deletions.
  1. +546 −0 templates/vanilla.html
View
546 templates/vanilla.html
@@ -0,0 +1,546 @@
+<!--
+ Vanilla CSS: http://github.com/garethrees/vanillacss
+
+ This HTML document can be styled by Vanilla CSS to use as a prototype stylesheet
+ so that you can be more concerned with the layout over the aesthetics.
+-->
+<DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width">
+ <title>Vanilla CSS</title>
+</head>
+
+<body>
+
+ <!-- A typical banner -->
+ <header role="banner">
+ <hgroup>
+ <h1>Grouped Heading 1</h1>
+ <h2>Grouped Heading 2</h2>
+ </hgroup>
+ <nav>
+ <ul>
+ <li><a href="#">navigation item #1</a></li>
+ <li><a href="#">navigation item #2</a></li>
+ <li><a href="#">navigation item #3</a></li>
+ </ul>
+ </nav>
+ </header>
+
+ <!-- A typical article -->
+ <article role="main">
+ <header>
+ <hgroup>
+ <h1>An Article Headline</h1>
+ <h2>A longer article subheading that explains the article in a sentence</h2>
+ </hgroup>
+ <span>Published on <time datetime="2011-09-06">Tuesday September 6<sup>th</sup> 2011</time></span>
+ </header>
+
+ <section>
+ <h1>Section One</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ </section>
+
+ <section>
+ <h1>Section Two</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ </section>
+
+ <aside>
+ <p>An aside to illustrate a key point in the article, maybe with a list</p>
+ <ul>
+ <li>Lorem ipsum dolor</li>
+ <li>Consectetur adipisicing elit</li>
+ <li>Eiusmod tempor incididunt</li>
+ </ul>
+ </aside>
+
+ <section>
+ <h1>Section Three</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+ <h2>Part of Section Three</h2>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ </section>
+
+ <footer>
+ <details>
+ <summary>By Gareth Rees</summary>
+ <p>All pages and graphics on this web site are <s>Copyright &copy;</s> implemented by Gareth Rees 2011</p>
+ </details>
+ </footer>
+
+ </article>
+
+ <!-- Horizontal Rule -->
+ <hr />
+
+ <!-- Headings -->
+ <h1>Heading 1</h1>
+ <h2>Heading 2</h2>
+ <h3>Heading 3</h3>
+ <h4>Heading 4</h4>
+ <h5>Heading 5</h5>
+ <h6>Heading 6</h6>
+
+ <h1><a href="#">Heading 1 (linked)</a></h1>
+ <h2><a href="#">Heading 2 (linked)</a></h2>
+ <h3><a href="#">Heading 3 (linked)</a></h3>
+ <h4><a href="#">Heading 4 (linked)</a></h4>
+ <h5><a href="#">Heading 5 (linked)</a></h5>
+ <h6><a href="#">Heading 6 (linked)</a></h6>
+
+ <section>
+ <h1>Heading 1 (in section)</h1>
+ <h2>Heading 2 (in section)</h2>
+ <h3>Heading 3 (in section)</h3>
+ <h4>Heading 4 (in section)</h4>
+ <h5>Heading 5 (in section)</h5>
+ <h6>Heading 6 (in section)</h6>
+ </section>
+
+ <article>
+ <h1>Heading 1 (in article)</h1>
+ <h2>Heading 2 (in article)</h2>
+ <h3>Heading 3 (in article)</h3>
+ <h4>Heading 4 (in article)</h4>
+ <h5>Heading 5 (in article)</h5>
+ <h6>Heading 6 (in article)</h6>
+ </article>
+
+ <!-- Headings followed by paragraphs -->
+ <div id="headings">
+ <h1>Heading 1</h1>
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+
+ <h2>A h2 header</h2>
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+
+ <h3>A h3 header</h3>
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+
+ <h4>A h4 header</h4>
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+
+ <h5>A h5 header</h5>
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+
+ <h6>A h6 header</h6>
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+ </div>
+
+ <!-- Inline text elements -->
+ <div id="text">
+
+ <!-- Full sentence containing some usual inline elements -->
+ <h1>Paragraphs</h1>
+ <p><strong>Pellentesque habitant morbi tristique</strong> 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. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+ <!-- Address -->
+ <address>
+ The House,<br />
+ The Street,<br />
+ The Town,<br />
+ The City,<br />
+ The Zip<br />
+ </address>
+
+ <!-- Inline Elements -->
+ <h1>Inline Elements</h1>
+
+ <p>
+ The <a href="#">a element</a> example<br />
+ The <abbr>abbr element</abbr> and <abbr title="Title text">abbr element with title</abbr> examples<br />
+ The <b>b element</b> example<br />
+ The <cite>cite element</cite> example<br />
+ The <code>code element</code> example<br />
+ The <del>del element</del> example<br />
+ The <dfn>dfn element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples<br />
+ The <em>em element</em> example<br />
+ The <i>i element</i> example<br />
+ The img element <img src="http://placekitten.com/16/16" alt=""> example<br />
+ The <ins>ins element</ins> example<br />
+ The <kbd>kbd element</kbd> example<br />
+ The <mark>mark element</mark> example<br />
+ The <q>q element <q>inside</q> a q element</q> example<br />
+ The <s>s element</s> example<br />
+ The <samp>samp element</samp> example<br />
+ The <small>small element</small> example<br />
+ The <span>span element</span> example<br />
+ The <strong>strong element</strong> example<br />
+ The <sub>sub element</sub> example<br />
+ The <sup>sup element</sup> example<br />
+ The <time>time</time> example<br />
+ The <var>var element</var> example<br />
+ The <u>u element</u> example<br />
+ </p>
+
+ <!-- Blockquote -->
+ <h1>Blockquote</h1>
+ <blockquote>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
+ <cite>&mdash; A. Wise-Person</cite>
+ </blockquote>
+
+ <!-- Code -->
+ <h1>pre</h1>
+
+ <pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.</pre>
+
+ <pre>
+ <code>
+&lt;html&gt;
+ &lt;head&gt;
+ &lt;/head&gt;
+ &lt;body&gt;
+ &lt;div class="main"&gt; &lt;div&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+ </code>
+ </pre>
+ </div>
+
+ <div id="lists">
+
+ <h1>Ordered List</h1>
+ <ol>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li><a href="#" title="#">Aliquam tincidunt mauris eu risus.</a></li>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ </ol>
+
+ <h1>Un-ordered list</h1>
+ <ul>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li><a href="#" title="#">Aliquam tincidunt mauris eu risus.</a></li>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ </ul>
+
+ <h1>Definition List</h1>
+ <dl>
+ <dt>Definition Title</dt>
+ <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</dd>
+
+ <dt>Another Definition</dt>
+ <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris commodo consequat.</dd>
+ </dl>
+
+ <h1>Lists In Lists</h1>
+ <ul>
+ <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
+ <li>
+ <p><strong>A paragraph</strong> in an <code>&lt;li&gt;</code>, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
+ <ul>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>
+ Aliquam tincidunt mauris eu risus:
+ <ol>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+ <li>Vestibulum auctor dapibus neque.</li>
+ </ol>
+ </li>
+ <li>Vestibulum auctor dapibus neque.</li>
+ </ul>
+ </li>
+ <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
+ <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
+ </ul>
+ </div>
+
+ <!-- Embedded Content -->
+ <div id="embedded-content">
+ <h1>Embedded content</h1>
+
+ <h3>Audio</h3>
+
+ <audio controls></audio>
+ <audio></audio>
+
+ <h3>Images</h3>
+
+ <img src="http://placehold.it/100" alt="An Image" />
+ <a href="#"><img src="http://placehold.it/100" alt="A Linked Image" /></a>
+
+ <h3>Figure</h3>
+
+ <figure>
+ <img src="http://placehold.it/400x200" alt="A Figure">
+ <figcaption>A caption describing the image</figcaption>
+ </figure>
+
+ <h3>SVG</h3>
+
+ <svg width="100px" height="100px">
+ <circle cx="100" cy="100" r="100" fill="#ff0000" />
+ </svg>
+
+ <h3>Video</h3>
+
+ <video controls></video>
+ <video></video>
+ </div>
+
+ <!-- Tables -->
+ <div id="tables">
+ <table>
+ <caption>Jimi Hendrix - albums</caption>
+ <thead>
+ <tr>
+ <th>Album</th>
+ <th>Year</th>
+ <th>Price</th>
+ </tr>
+ </thead>
+ <tfoot>
+ <tr>
+ <th>Album</th>
+ <th>Year</th>
+ <th>Price</th>
+ </tr>
+ </tfoot>
+ <tbody>
+ <tr>
+ <td>Are You Experienced</td>
+ <td>1967</td>
+ <td>$10.00</td>
+ </tr>
+ <tr>
+ <td>Axis: Bold as Love</td>
+ <td>1967</td>
+ <td>$12.00</td>
+ </tr>
+ <tr>
+ <td>Electric Ladyland</td>
+ <td>1968</td>
+ <td>$10.00</td>
+ </tr>
+ <tr>
+ <td>Band of Gypsys</td>
+ <td>1970</td>
+ <td>$12.00</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <!-- Forms -->
+ <div id="forms">
+ <h3>Form</h3>
+
+ <form>
+
+ <fieldset>
+ <legend>Fieldset Level 1</legend>
+ <input />
+
+ <fieldset>
+ <legend>Fieldset Level 2</legend>
+ <input />
+ </fieldset>
+ </fieldset>
+
+ <!-- Text Inputs -->
+ <fieldset>
+ <legend>Text Inputs</legend>
+
+ <div>
+ <label>Textarea</label>
+ <textarea cols="30" rows="5" >Textarea text</textarea>
+ </div>
+
+ <div>
+ <label>Email input</label>
+ <input type="email" placeholder="test@example.com" />
+ </div>
+
+ <div>
+ <label>Password input</label>
+ <input type="password" value="secret" />
+ </div>
+
+ <div>
+ <label>Search input</label>
+ <input type="search" placeholder="Search" />
+ </div>
+
+ <div>
+ <label>Tel input</label>
+ <input type="tel" placeholder="01234 567 890" />
+ </div>
+
+ <div>
+ <label>Text input</label>
+ <input type="text" value="default value" />
+ </div>
+
+ <div>
+ <label>URL input</label>
+ <input type="url" placeholder="http://" />
+ </div>
+
+ </fieldset>
+
+ <!-- Mouse Inputs -->
+ <fieldset>
+ <legend>Mouse Inputs</legend>
+
+ <!-- Single inputs -->
+
+ <div>
+ <label>Radio input</label>
+ <input type="radio" name="rad" />
+ </div>
+
+ <div>
+ <label>Checkbox input</label>
+ <input type="checkbox" />
+ </div>
+
+ <!-- More inputs -->
+
+ <div>
+ <label for="ic">Color input</label>
+ <input type="color" id="ic" value="#000000" />
+ </div>
+
+ <div>
+ <label for="idd">Date input</label>
+ <input type="date" id="idd" value="1970-01-01" />
+ </div>
+
+ <div>
+ <label for="idt">Datetime input</label>
+ <input type="datetime" id="idt" value="1970-01-01T00:00:00Z" />
+ </div>
+
+ <div>
+ <label for="idtl">Datetime-local input</label>
+ <input type="datetime-local" id="idtl" value="1970-01-01T00:00" />
+ </div>
+
+ <div>
+ <label>File input</label>
+ <input type="file" />
+ </div>
+
+ <div>
+ <label for="idm">Month input</label>
+ <input type="month" id="idm" value="1970-01" />
+ </div>
+
+ <div>
+ <label for="in">Number input</label>
+ <input type="number" id="in" min="0" max="10" value="5" />
+ </div>
+
+ <div>
+ <label for="ir">Range input</label>
+ <input type="range" id="ir" value="10" />
+ </div>
+
+ <div>
+ <label for="ir">Time input</label>
+ <input type="time" id="ir" value="00:00" />
+ </div>
+
+ <div>
+ <label for="idw">Week input</label>
+ <input type="week" id="idw" value="1970-W01" />
+ </div>
+
+ <!-- Select fields -->
+
+ <div>
+ <label>Select field</label>
+ <select>
+ <option disabled selected>Select an option</option>
+ <optgroup label="Option set 1">
+ <option>Option 01</option>
+ <option>Option 02</option>
+ </optgroup>
+ <optgroup label="Option set 2">
+ <option>Option 01</option>
+ <option>Option 02</option>
+ </optgroup>
+ </select>
+ </div>
+
+ <div>
+ <label>Multiple select field</label>
+ <select multiple>
+ <option disabled selected>Select an option</option>
+ <optgroup label="Option set 1">
+ <option>Option 01</option>
+ <option>Option 02</option>
+ </optgroup>
+ <optgroup label="Option set 2">
+ <option>Option 01</option>
+ <option>Option 02</option>
+ </optgroup>
+ </select>
+ </div>
+
+ <!-- Misc -->
+
+ <div>
+ <label>Datalist input</label>
+ <datalist>
+ <option value="Option 1">
+ <option value="Option 2">
+ </datalist>
+ </div>
+
+ <div>
+ <label>Keygen input</label>
+ <keygen name="security" />
+ </div>
+ </fieldset>
+
+ <!-- Buttons -->
+ <fieldset>
+ <legend>Buttons</legend>
+
+ <div>
+ <input type="image" src="http://placehold.it/90x24&text=Submit" alt="Image (input)" />
+ </div>
+
+ <div>
+ <input type="reset" value="Reset (input)" />
+ </div>
+
+ <div>
+ <input type="button" value="Button (input)" />
+ </div>
+
+ <div>
+ <input type="submit" value="Submit (input)" />
+ </div>
+
+ <div>
+ <button type="reset">Reset (button)</button>
+ </div>
+
+ <div>
+ <button type="button">Button (button)</button>
+ </div>
+
+ <div>
+ <button type="submit">Submit (button)</button>
+ </div>
+ </fieldset>
+ </form>
+ </section>
+
+ <footer role="contentinfo">
+ <p>Vanilla CSS by <a href="http://garethrees.co.uk" title="Gareth Rees' Homepage">Gareth Rees</a>, borrowing elements from <a href="http://necolas.github.com/normalize.css" title="Normalize CSS – a CSS Reset">Normalize CSS</a>, <a href="http://csswizardry.com/inuitcss" title="Inuit CSS – A Responsive CSS Framework ">Inuit CSS</a> and <a href="http://hanger-designs.co.uk/html_markup/index.html" title="Kitchen Sink – A HTML Example Page">Kitchen Sink</a>.</p>
+ <p><a href="http://github.com/garethrees/vanillacss" title="garethrees/vanillacss on GitHub">Get the source on GitHub</a></p>
+ </footer>
+
+</body>
+</html>
+

0 comments on commit f7d88cd

Please sign in to comment.
Something went wrong with that request. Please try again.