diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 277 |
1 files changed, 277 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..01bd684 --- /dev/null +++ b/index.html @@ -0,0 +1,277 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Vanilla CSS | A minimal baseline stylesheet for any web project</title> + <link rel="stylesheet" href="vanilla.css"> + <link rel="icon" href="favicon.svg" type="image/svg"> + </head> + <body> + <div id="top" class="page" role="document"> + <header role="banner"> + <h1>Vanilla CSS</h1> + <p>Vanilla CSS is a <b>minimal baseline stylesheet</b> for any web project. It includes a basic reset and default styling for all HTML5 elements (which you can see live below).</p> + <ul> + <li>Built-in variables</li> + <li>Easy to extend</li> + <li>Only 5KB</li> + </ul> + <h3>Usage:</h3> + <p>Download the main stylesheet from this project, then copy and paste the following inside your <code>head</code> element:</p> + <pre><link rel="stylesheet" href="vanilla.css"></pre> + <p>Or import directly in your own CSS:</p> + <pre>@import url('vanilla.css');</pre> + <p><i>This project is completely free and open source.</i> Check it out on <a href="https://git.sr.ht/~bt/vanilla-css">sourcehut</a>.</p> + </header> + <nav role="navigation"> + <ul> + <li> + <a href="#text">Text</a> + <ul> + <li><a href="#text__typeface">Typeface</a></li> + <li><a href="#text__headings">Headings</a></li> + <li><a href="#text__paragraphs">Paragraphs</a></li> + <li><a href="#text__blockquotes">Blockquotes</a></li> + <li><a href="#text__lists">Lists</a></li> + <li><a href="#text__hr">Horizontal rules</a></li> + <li><a href="#text__tables">Tabular data</a></li> + <li><a href="#text__code">Code</a></li> + <li><a href="#text__inline">Inline elements</a></li> + <li><a href="#text__comments">HTML Comments</a></li> + </ul> + </li> + <li> + <a href="#embedded">Embedded content</a> + </li> + <li><a href="#inputs">Basic inputs</a></li> + <li> + <a href="#forms">Detailed form elements</a> + </li> + </ul> + </nav> + <main role="main"> + <section id="text"> + <header><h1>Text</h1></header> + <article id="text__typeface"> + <header> + <h1>Typeface</h1> + <p>Vanilla CSS will use whatever default system fonts are available for faster speed and optimization.</p> + </header> + <footer><p><a href="#top">[Top]</a></p></footer> + </article> + <article id="text__headings"> + <header> + <h1>Headings</h1> + </header> + <div> + <h1>Heading 1</h1> + <h2>Heading 2</h2> + <h3>Heading 3</h3> + <h4>Heading 4</h4> + <h5>Heading 5</h5> + <h6>Heading 6</h6> + </div> + <footer><p><a href="#top">[Top]</a></p></footer> + </article> + <article id="text__paragraphs"> + <header><h1>Paragraphs</h1></header> + <div> + <p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p> + </div> + <footer><p><a href="#top">[Top]</a></p></footer> + </article> + <article id="text__blockquotes"> + <header><h1>Blockquotes</h1></header> + <div> + <blockquote> + <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p> + <p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p> + <cite><a href="#!">Said no one, ever.</a></cite> + </blockquote> + </div> + <footer><p><a href="#top">[Top]</a></p></footer> + </article> + <article id="text__lists"> + <header><h1>Lists</h1></header> + <div> + <h3>Definition list</h3> + <dl> + <dt>Definition List Title</dt> + <dd>This is a definition list division.</dd> + </dl> + <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>Parent with Children List</h3> + <ul> + <li>List Item 1</li> + <li>List Item 2 + <ul> + <li>Child Item 1</li> + <li>Child Item 2</li> + <li>Child Item 3</li> + </ul> + </li> + <li>List Item 3</li> + </ul> + </div> + <footer><p><a href="#top">[Top]</a></p></footer> + </article> + <article id="text__hr"> + <header><h1>Horizontal rules</h1></header> + <div> + <hr> + </div> + <footer><p><a href="#top">[Top]</a></p></footer> + </article> + <article id="text__tables"> + <header><h1>Tabular data</h1></header> + <table> + <caption>Table Caption</caption> + <thead> + <tr> + <th>Table Heading 1</th> + <th>Table Heading 2</th> + <th>Table Heading 3</th> + <th>Table Heading 4</th> + </tr> + </thead> + <tbody> + <tr> + <td>Table Cell 1</td> + <td>Table Cell 2</td> + <td>Table Cell 3</td> + <td>Table Cell 4</td> + </tr> + <tr> + <td>Table Cell 1</td> + <td>Table Cell 2</td> + <td>Table Cell 3</td> + <td>Table Cell 4</td> + </tr> + <tr> + <td>Table Cell 1</td> + <td>Table Cell 2</td> + <td>Table Cell 3</td> + <td>Table Cell 4</td> + </tr> + <tr> + <td>Table Cell 1</td> + <td>Table Cell 2</td> + <td>Table Cell 3</td> + <td>Table Cell 4</td> + </tr> + </tbody> + <tfoot> + <tr> + <th>Table Footer 1</th> + <th>Table Footer 2</th> + <th>Table Footer 3</th> + <th>Table Footer 4</th> + </tr> + </tfoot> + </table> + <footer><p><a href="#top">[Top]</a></p></footer> + </article> + <article id="text__code"> + <header><h1>Code</h1></header> + <div> + <p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p> + <p><strong>Inline code:</strong> <code><div>code</div></code></p> + <p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p> + <h2>Pre-formatted text</h2> + <pre>P R E F O R M A T T E D T E X T + ! " # $ % & ' ( ) * + , - . / + 0 1 2 3 4 5 6 7 8 9 : ; < = > ? + @ A B C D E F G H I J K L M N O + P Q R S T U V W X Y Z [ \ ] ^ _ + ` a b c d e f g h i j k l m n o + p q r s t u v w x y z { | } ~ </pre> + </div> + <footer><p><a href="#top">[Top]</a></p></footer> + </article> + <article id="text__inline"> + <header><h1>Inline elements</h1></header> + <div> + <p><a href="#!">This is a text link</a>.</p> + <p><strong>Strong is used to indicate strong importance.</strong></p> + <p><em>This text has added emphasis.</em></p> + <p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p> + <p>The <i>i element</i> is text that is offset from the normal text.</p> + <p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p> + <p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p> + <p><s>This text has a strikethrough</s>.</p> + <p>Superscript<sup>®</sup>.</p> + <p>Subscript for things like H<sub>2</sub>O.</p> + <p><small>This small text is small for fine print, etc.</small></p> + <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p> + <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p> + <p><cite>This is a citation.</cite></p> + <p>The <dfn>dfn element</dfn> indicates a definition.</p> + <p>The <mark>mark element</mark> indicates a highlight.</p> + <p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p> + <p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p> + </div> + <footer><p><a href="#top">[Top]</a></p></footer> + </article> + <article id="text__comments"> + <header><h1>HTML Comments</h1></header> + <div> + <p>There is comment here: <!--This comment should not be displayed--></p> + <p>There is a comment spanning multiple tags and lines below here.</p> + <!--<p><a href="#!">This is a text link. But it should not be displayed in a comment</a>.</p> + <p><strong>Strong is used to indicate strong importance. But, it should not be displayed in a comment</strong></p> + <p><em>This text has added emphasis. But, it should not be displayed in a comment</em></p>--> + </div> + <footer><p><a href="#top">[Top]</a></p></footer> + </article> + </section> + <section id="embedded"> + <header><h1>Embedded content</h1></header> + <article id="embedded__images"> + <header><h2>Images</h2></header> + <div> + <h3>No <code><figure></code> element</h3> + <p><img src="https://placekitten.com/480/480" alt="Image alt text"></p> + <h3>Wrapped in a <code><figure></code> element, no <code><figcaption></code></h3> + <figure><img src="https://placekitten.com/420/420" alt="Image alt text"></figure> + <h3>Wrapped in a <code><figure></code> element, with a <code><figcaption></code></h3> + <figure> + <img src="https://placekitten.com/420/420" alt="Image alt text"> + <figcaption>Here is a caption for this image.</figcaption> + </figure> + </div> + <footer><p><a href="#top">[Top]</a></p></footer> + </article> + </section> + <section id="inputs"> + <header><h1>Basic inputs</h1></header> + <p>Very basic input styling is also supported:</p> + <input type="text" placeholder="I'm a text input field"> + <input type="email" placeholder="I'm an email input field"> + <input type="password" placeholder="I'm a password input field"> + </section> + <section id="forms"> + <header><h1>Form elements</h1></header> + <p>Looking for custom form styling?</p> + <h4>Check out <a href="https://normform.netlify.com">Normform</a> for beautiful and lightweight form CSS</h4> + </section> + </main> + <footer role="contentinfo"> + <hr> + <p><small>Created by <a href="https://bt.ht">Bradley Taunt</a>. Source on <a href="https://git.sr.ht/~bt/vanilla-css">sourcehut</a>. + <br>HTML5 element example page by <a href="https://twitter.com/cbracco">@cbracco</a>. Code on <a href="https://github.com/cbracco/html5-test-page">GitHub</a>.</small></p> + </footer> + </div> + </body> +</html> |