diff options
| -rw-r--r-- | LICENSE | 21 | ||||
| -rw-r--r-- | README.md | 11 | ||||
| -rw-r--r-- | favicon.svg | 23 | ||||
| -rw-r--r-- | index.html | 277 | ||||
| -rw-r--r-- | vanilla.css | 187 |
5 files changed, 519 insertions, 0 deletions
@@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2018 Bradley Taunt + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..116d480 --- /dev/null +++ b/README.md @@ -0,0 +1,11 @@ +# Vanilla CSS + +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 at <a href="https://vanillacss.com">vanillacss.com</a>). + +## Usage + +If you want to use this CSS directly in your project, simply download the stylesheet below and include the following in your HTML `head` section: + +``` +<link rel="stylesheet" href="vanilla.css"> +``` diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 0000000..19ef141 --- /dev/null +++ b/favicon.svg @@ -0,0 +1,23 @@ +<svg id="emoji" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg"> + <g id="color"> + <path fill="#FFFFFF" stroke="none" d="M53.9354,36v4H18.3685v-4H19.37c-0.02-0.34,0.01-0.68,0.1-1c0.3-1.05,1.17-1.92,2.33-2.18l3.77-0.87 c-1.5,0.11-2.88-0.84-3.21-2.3c-0.37-1.61,0.68-3.23,2.36-3.62l3.77-0.87c-1.5,0.1-2.88-0.85-3.21-2.3 c-0.37-1.61,0.69-3.23,2.37-3.62l3.79-0.87c-1.51,0.13-2.9-0.82-3.23-2.29c-0.38-1.61,0.68-3.24,2.36-3.62l1.26-0.29h0.01 C33.86,11.67,36,7,34,5h3c1.66,0,3,1.34,3,3s-1,2.52-2.69,2.9l2.77-0.64c1.68-0.39,3.34,0.61,3.71,2.22 c0.34,1.45-0.47,2.89-1.84,3.46L43,15.7c1.68-0.39,3.35,0.6,3.72,2.22c0.33,1.44-0.48,2.88-1.85,3.45l1.06-0.24 c1.68-0.38,3.34,0.61,3.71,2.23c0.34,1.46-0.5,2.92-1.9,3.48l1.11-0.26c1.68-0.39,3.34,0.61,3.71,2.22 c0.38,1.62-0.68,3.24-2.36,3.63l-2.39,0.55L50,33c1.31,0,2.42,0.83,2.82,2C52.94,35.31,53.9354,35.65,53.9354,36z"/> + <rect x="17" y="40" width="38" height="10" fill="#fcea2b" stroke="none"/> + <path fill="#fcea2b" stroke="none" d="M52,50l-4,12c-0.873,2.6191-2.2393,5-5,5H29c-2.7607,0-4.127-2.3809-5-5l-4-12"/> + <rect x="42.333" y="40" width="12.667" height="10" fill="#f1b31c" stroke="none"/> + <path fill="#f1b31c" stroke="none" d="M43.3564,50L40,63.0303c-0.374,1.4541-0.8408,2.8486-1.4678,3.9697H43c2.7607,0,4.127-2.3809,5-5l4-12 H43.3564z"/> + </g> + <g id="hair"/> + <g id="skin"/> + <g id="skin-shadow"/> + <g id="line"> + <rect x="17" y="40" width="38" height="10" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/> + <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M53,36c0-1.6562-1.3428-3-3-3l-2.2187-0.0156"/> + <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.0397" d="M30.5713,12.4556c-1.6797,0.3877-2.7383,2.0112-2.3662,3.6255c0.373,1.6142,2.0361,2.6084,3.7158,2.2207l9.5088-2.1954 c1.6797-0.3876,2.7383-2.0107,2.3652-3.625c-0.372-1.6142-2.0351-2.6088-3.7148-2.2211L30.5713,12.4556z"/> + <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.0397" d="M27.6475,19.2402c-1.6797,0.3877-2.7383,2.0103-2.3653,3.6245c0.3721,1.6143,2.0352,2.6094,3.7149,2.2217l15.3554-3.5449 c1.6788-0.3877,2.7383-2.0112,2.3653-3.6255c-0.3721-1.6142-2.0362-2.6084-3.7158-2.2207L27.6475,19.2402z"/> + <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.0397" d="M49.6406,23.3555c-0.373-1.6143-2.0351-2.6094-3.7148-2.2212l-21.2012,4.8945c-1.6797,0.3877-2.7383,2.0112-2.3662,3.6255 c0.373,1.6143,2.0361,2.6084,3.7158,2.2207l21.2012-4.8945C48.9551,26.5928,50.0137,24.9697,49.6406,23.3555z"/> + <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2.0397" d="M35.9424,35.7168l14.2568-3.291c1.6787-0.3877,2.7383-2.0108,2.3653-3.625c-0.3731-1.6143-2.0362-2.6094-3.7149-2.2217 l-27.0478,6.2451c-1.5225,0.3506-2.5352,1.7168-2.4327,3.1729"/> + <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.9999" d="M34,5h3c1.6572,0,3,1.3433,3,3s-1,2.521-2.6875,2.896"/> + <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.9999" d="M34,5c2,2-0.1455,6.6875-2.167,7.1665"/> + <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M52,50l-4,12c-0.873,2.6191-2.2393,5-5,5H29c-2.7607,0-4.127-2.3809-5-5l-4-12"/> + </g> +</svg> 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> diff --git a/vanilla.css b/vanilla.css new file mode 100644 index 0000000..4765d61 --- /dev/null +++ b/vanilla.css @@ -0,0 +1,187 @@ +/* Reset */ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +* { + box-sizing: border-box; +} + +/* Variables */ +:root { + --desktop-font-size: 1.2rem/1.55; + --mobile-font-size: 1rem/1.45; + --text-color: #2d2d2d; + --link-color: blue; + --link-color-alt: darkblue; + --primary-color: lightsteelblue; + --secondary-color: aliceblue; + --tertiary-color: whitesmoke; +} + +/* Typography */ +body { + color: var(--text-color); + margin: 0 auto; + max-width: 75ch; + padding: 0 0.5rem; +} +body, input { + font: var(--desktop-font-size) -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol"; +} + +h1,h2,h3,h4,h5,h6,p,blockquote,dl,img,figure { + margin: 2rem 0; +} + +h1,h2,h3,h4,h5,h6 { font-weight: bold; line-height: 1.2; } +h1 { font-size: 200%; } +h2 { font-size: 150%; } +h3 { font-size: 120%; } +h4,h5,h6 { font-size: 100%; } +h5, h6 { text-transform: uppercase; } + +header h1 { border-bottom: 1px solid; } + +a,a:visited { color: var(--link-color); } +a:hover,a:focus { color: var(--link-color-alt); } + +strong, time, b { font-weight: bold; } +em, dfn, i { font-style: italic; } +sub { font-size: 60%; vertical-align: bottom; } +small { font-size: 80%; } + +blockquote, q { + background: var(--secondary-color); + border-left: 10px solid var(--primary-color); + display: block; + font-family: "Georgia", serif; + padding: 1rem; +} +blockquote p:first-child { margin-top: 0; } +blockquote p:last-child { margin-bottom: 0; } +cite { + font-family: "Georgia", serif; + font-style: italic; + font-weight: bold; + margin-top: 1rem; +} + +kbd,code,samp,pre,var { font: var(--mobile-font-size) monospace; } +code, pre { + background: var(--tertiary-color); + border: 1px solid; + overflow: auto; + padding: 0.25rem 0.5rem; +} +code pre , pre code { border: 0; padding: 0; } + +/* Elements */ +hr { + background: var(--text-color); + border: 0; + height: 1px; + margin: 4rem 0; +} + +img { + display: block; + height: auto; + max-width: 100%; +} + +figure { + border: 1px solid var(--primary-color); + display: inline-block; + padding: 1rem; + width: 100%; +} +figure img { margin: 0 auto; } +figure figcaption { font-size: 80%; margin-top: 0.5rem; text-align: center; } + +ul, ol { margin: 2rem 0; padding: 0 0 0 2rem; } +ul li, ol li { margin-bottom: 1rem; } +li > ul, li > ol { margin: 0.25rem 0 0.5rem; padding: 0 0 0 2rem; } +li > ul li, li > ol li { margin-bottom: 0.5rem; } + +dl dd { padding-left: 2rem; } + +table { + border: 1px solid var(--primary-color); + border-collapse: collapse; + table-layout: fixed; + text-align: left; + width: 100%; +} +table caption { margin: 2rem 0; } +table tr { border-bottom: 1px solid var(--primary-color); } +table thead { position: sticky; top: 0; } +table tbody tr:nth-child(even) { background: var(--tertiary-color); } +table th { background: var(--secondary-color); font-weight: bold; } +table th, table td { padding: 0.5rem; } + +input { + appearance: none; + border: 1px solid var(--text-color); + display: block; + margin: 0.5rem 0; + padding: 0.8rem; +} +input:focus, input:active { background-color: var(--secondary-color); border-color: var(--link-color); } + +sup { font-size: 80%; vertical-align: top; } + +/* Mobile Styling */ +@media screen and (max-width: 75ch) { + body, input { + font: var(--mobile-font-size) -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol"; + } + table { table-layout: auto; } +} + +/* Dark mode support */ +@media (prefers-color-scheme: dark) { + body { + background: #191919; + } + input:focus, input:active { + background-color: var(--text-color); + color: var(--secondary-color); + } + table, + table tr, + table th:not(:last-of-type), + table td:not(:last-of-type) { + border-color: var(--text-color); + } + table thead th, + table tfoot th { + background-color: var(--primary-color-light); + } + :root { + --text-color: #fff; + --link-color: orange; + --link-color-alt: yellow; + --primary-color: orange; + --primary-color-light: dimgrey; + --secondary-color: black; + --tertiary-color: #2d2d2d; + } +} |
