├── .gitignore
├── README.md
├── package.json
├── base.css.map
├── base.css
├── base.scss
└── test.html


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # My CSS
2 | 
3 | Some utilities I like to have handy for CSS projects.
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "css",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "sass base.scss base.css"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/ireade/css.git"
12 |   },
13 |   "author": "",
14 |   "license": "ISC",
15 |   "bugs": {
16 |     "url": "https://github.com/ireade/css/issues"
17 |   },
18 |   "homepage": "https://github.com/ireade/css#readme",
19 |   "devDependencies": {
20 |     "sass": "^1.15.2"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/base.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sourceRoot":"","sources":["base.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AAAA;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAsBI;EACA;EACA;;;AAGJ;AAAA;AAGA;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;AAAA;EAEI;;;AAGJ;AAAA;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOI;;;AAGJ;EACI;;;AAGJ;AAAA;EAEI;;;AAGJ;AAAA;AAGA;EACI;EACA;;;AAGJ;AAAA;EAEI;;;AAGJ;AAAA;EAEI;;;AAGJ;EACI;;;AAGJ;AAAA;EAEI;;;AAGJ;AAAA;AAAA;AAAA;EAII;EACA;;;AAGJ;AAAA;AAGA;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;AAAA;AAGA;EACI;EACA;EACA;EACA","file":"base.css"}


--------------------------------------------------------------------------------
/base.css:
--------------------------------------------------------------------------------
  1 | /* ***********************************
  2 |  *
  3 |  *    Ire's CSS Reset & Base
  4 |  *
  5 |  * *********************************** */
  6 | /* Reset margin, padding, border
  7 |  * *********************************** */
  8 | html, body,
  9 | h1, h2, h3, h4, h5, h6,
 10 | a, p, span,
 11 | em, small, strong,
 12 | sub, sup,
 13 | mark, del, ins, strike,
 14 | abbr, dfn,
 15 | blockquote, q, cite,
 16 | code, pre,
 17 | ol, ul, li, dl, dt, dd,
 18 | div, section, article,
 19 | main, aside, nav,
 20 | header, hgroup, footer,
 21 | img, figure, figcaption,
 22 | address, time,
 23 | audio, video,
 24 | canvas, iframe,
 25 | details, summary,
 26 | fieldset, form, label, legend,
 27 | table, caption,
 28 | tbody, tfoot, thead,
 29 | tr, th, td {
 30 |   margin: 0;
 31 |   padding: 0;
 32 |   border: 0;
 33 | }
 34 | 
 35 | /* Typography
 36 |  * *********************************** */
 37 | html {
 38 |   font-size: 62.5%;
 39 | }
 40 | 
 41 | body {
 42 |   font-size: 1.6rem;
 43 |   line-height: 1.4;
 44 | }
 45 | 
 46 | * {
 47 |   font-family: inherit;
 48 |   font-size: inherit;
 49 |   line-height: inherit;
 50 | }
 51 | 
 52 | a,
 53 | a:visited {
 54 |   color: inherit;
 55 | }
 56 | 
 57 | /* Layout
 58 |  * *********************************** */
 59 | article,
 60 | aside,
 61 | footer,
 62 | header,
 63 | nav,
 64 | section,
 65 | main {
 66 |   display: block;
 67 | }
 68 | 
 69 | * {
 70 |   box-sizing: border-box;
 71 | }
 72 | 
 73 | *:before,
 74 | *:after {
 75 |   box-sizing: inherit;
 76 | }
 77 | 
 78 | /* Elements
 79 |  * *********************************** */
 80 | table {
 81 |   border-collapse: collapse;
 82 |   border-spacing: 0;
 83 | }
 84 | 
 85 | ol,
 86 | ul {
 87 |   list-style: none;
 88 | }
 89 | 
 90 | img,
 91 | video {
 92 |   max-width: 100%;
 93 | }
 94 | 
 95 | img {
 96 |   border-style: none;
 97 | }
 98 | 
 99 | blockquote,
100 | q {
101 |   quotes: none;
102 | }
103 | 
104 | blockquote:after,
105 | blockquote:before,
106 | q:after,
107 | q:before {
108 |   content: "";
109 |   content: none;
110 | }
111 | 
112 | /* Attributes & states
113 |  * *********************************** */
114 | [hidden] {
115 |   display: none !important;
116 | }
117 | 
118 | [disabled] {
119 |   cursor: not-allowed;
120 | }
121 | 
122 | :focus:not(:focus-visible) {
123 |   outline: none;
124 | }
125 | 
126 | /* Utility classes
127 |  * *********************************** */
128 | .sr-only {
129 |   position: absolute;
130 |   clip: rect(1px, 1px, 1px, 1px);
131 |   left: -9999px;
132 |   top: -9999px;
133 | }
134 | 
135 | /*# sourceMappingURL=base.css.map */
136 | 


--------------------------------------------------------------------------------
/base.scss:
--------------------------------------------------------------------------------
  1 | /* ***********************************
  2 |  *
  3 |  *    Ire's CSS Reset & Base
  4 |  *
  5 |  * *********************************** */
  6 | 
  7 | /* Reset margin, padding, border
  8 |  * *********************************** */
  9 | 
 10 | html, body,
 11 | h1, h2, h3, h4, h5, h6,
 12 | a, p, span,
 13 | em, small, strong,
 14 | sub, sup,
 15 | mark, del, ins, strike,
 16 | abbr, dfn,
 17 | blockquote, q, cite,
 18 | code, pre,
 19 | ol, ul, li, dl, dt, dd,
 20 | div, section, article,
 21 | main, aside, nav,
 22 | header, hgroup, footer,
 23 | img, figure, figcaption,
 24 | address, time,
 25 | audio, video,
 26 | canvas, iframe,
 27 | details, summary,
 28 | fieldset, form, label, legend,
 29 | table, caption,
 30 | tbody, tfoot, thead,
 31 | tr, th, td {
 32 |     margin: 0;
 33 |     padding: 0;
 34 |     border: 0;
 35 | }
 36 | 
 37 | /* Typography
 38 |  * *********************************** */
 39 | 
 40 | html {
 41 |     font-size: 62.5%;
 42 | }
 43 | 
 44 | body {
 45 |     font-size: 1.6rem;
 46 |     line-height: 1.4;
 47 | }
 48 | 
 49 | * {
 50 |     font-family: inherit;
 51 |     font-size: inherit;
 52 |     line-height: inherit;
 53 | }
 54 | 
 55 | a,
 56 | a:visited {
 57 |     color: inherit;
 58 | }
 59 | 
 60 | /* Layout
 61 |  * *********************************** */
 62 | 
 63 | article,
 64 | aside,
 65 | footer,
 66 | header,
 67 | nav,
 68 | section,
 69 | main {
 70 |     display: block;
 71 | }
 72 | 
 73 | * {
 74 |     box-sizing: border-box;
 75 | }
 76 | 
 77 | *:before,
 78 | *:after {
 79 |     box-sizing: inherit;
 80 | }
 81 | 
 82 | /* Elements
 83 |  * *********************************** */
 84 | 
 85 | table {
 86 |     border-collapse: collapse;
 87 |     border-spacing: 0;
 88 | }
 89 | 
 90 | ol,
 91 | ul {
 92 |     list-style: none;
 93 | }
 94 | 
 95 | img,
 96 | video {
 97 |     max-width: 100%;
 98 | }
 99 | 
100 | img {
101 |     border-style: none;
102 | }
103 | 
104 | blockquote,
105 | q {
106 |     quotes: none;
107 | }
108 | 
109 | blockquote:after,
110 | blockquote:before,
111 | q:after,
112 | q:before {
113 |     content: "";
114 |     content: none;
115 | }
116 | 
117 | /* Attributes & states
118 |  * *********************************** */
119 | 
120 | [hidden] {
121 |     display: none !important;
122 | }
123 | 
124 | [disabled] {
125 |     cursor: not-allowed;
126 | }
127 | 
128 | :focus:not(:focus-visible) {
129 |     outline: none;
130 | }
131 | 
132 | /* Utility classes
133 |  * *********************************** */
134 | 
135 | .sr-only {
136 |     position: absolute;
137 |     clip: rect(1px, 1px, 1px, 1px);
138 |     left: -9999px;
139 |     top: -9999px;
140 | }
141 | 


--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>HTML5 Test Page</title>
  7 | 
  8 |     <link rel="stylesheet" href="base.css">
  9 |   </head>
 10 |   <body>
 11 |     <div id="top" class="page" role="document">
 12 |       <header role="banner">
 13 |         <h1>HTML5 Test Page</h1>
 14 |         <p>This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.</p>
 15 |       </header>
 16 |       <nav role="navigation">
 17 |         <ul>
 18 |           <li>
 19 |             <a href="#text">Text</a>
 20 |             <ul>
 21 |               <li><a href="#text__headings">Headings</a></li>
 22 |               <li><a href="#text__paragraphs">Paragraphs</a></li>
 23 |               <li><a href="#text__blockquotes">Blockquotes</a></li>
 24 |               <li><a href="#text__lists">Lists</a></li>
 25 |               <li><a href="#text__hr">Horizontal rules</a></li>
 26 |               <li><a href="#text__tables">Tabular data</a></li>
 27 |               <li><a href="#text__code">Code</a></li>
 28 |               <li><a href="#text__inline">Inline elements</a></li>
 29 |               <li><a href="#text__comments">HTML Comments</a></li>
 30 |             </ul>
 31 |           </li>
 32 |           <li>
 33 |             <a href="#embedded">Embedded content</a>
 34 |             <ul>
 35 |               <li><a href="#embedded__images">Images</a></li>
 36 |               <li><a href="#embedded__audio">Audio</a></li>
 37 |               <li><a href="#embedded__video">Video</a></li>
 38 |               <li><a href="#embedded__canvas">Canvas</a></li>
 39 |               <li><a href="#embedded__meter">Meter</a></li>
 40 |               <li><a href="#embedded__progress">Progress</a></li>
 41 |               <li><a href="#embedded__svg">Inline SVG</a></li>
 42 |               <li><a href="#embedded__iframe">IFrames</a></li>
 43 |             </ul>
 44 |           </li>
 45 |           <li>
 46 |             <a href="#forms">Form elements</a>
 47 |             <ul>
 48 |               <li><a href="#forms__input">Input fields</a></li>
 49 |               <li><a href="#forms__select">Select menus</a></li>
 50 |               <li><a href="#forms__checkbox">Checkboxes</a></li>
 51 |               <li><a href="#forms__radio">Radio buttons</a></li>
 52 |               <li><a href="#forms__textareas">Textareas</a></li>
 53 |               <li><a href="#forms__html5">HTML5 inputs</a></li>
 54 |               <li><a href="#forms__action">Action buttons</a></li>
 55 |             </ul>
 56 |           </li>
 57 |         </ul>
 58 |       </nav>
 59 |       <main role="main">
 60 |         <section id="text">
 61 |           <header><h1>Text</h1></header>
 62 |           <article id="text__headings">
 63 |             <header>
 64 |               <h1>Headings</h1>
 65 |             </header>
 66 |             <div>
 67 |               <h1>Heading 1</h1>
 68 |               <h2>Heading 2</h2>
 69 |               <h3>Heading 3</h3>
 70 |               <h4>Heading 4</h4>
 71 |               <h5>Heading 5</h5>
 72 |               <h6>Heading 6</h6>
 73 |             </div>
 74 |             <footer><p><a href="#top">[Top]</a></p></footer>
 75 |           </article>
 76 |           <article id="text__paragraphs">
 77 |             <header><h1>Paragraphs</h1></header>
 78 |             <div>
 79 |               <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>
 80 |             </div>
 81 |             <footer><p><a href="#top">[Top]</a></p></footer>
 82 |           </article>
 83 |           <article id="text__blockquotes">
 84 |             <header><h1>Blockquotes</h1></header>
 85 |             <div>
 86 |               <blockquote>
 87 |                 <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>
 88 |                 <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>
 89 |                 <cite><a href="#!">Said no one, ever.</a></cite>
 90 |               </blockquote>
 91 |             </div>
 92 |             <footer><p><a href="#top">[Top]</a></p></footer>
 93 |           </article>
 94 |           <article id="text__lists">
 95 |             <header><h1>Lists</h1></header>
 96 |             <div>
 97 |               <h3>Definition list</h3>
 98 |               <dl>
 99 |                 <dt>Definition List Title</dt>
100 |                 <dd>This is a definition list division.</dd>
101 |               </dl>
102 |               <h3>Ordered List</h3>
103 |               <ol>
104 |                 <li>List Item 1</li>
105 |                 <li>List Item 2</li>
106 |                 <li>List Item 3</li>
107 |               </ol>
108 |               <h3>Unordered List</h3>
109 |               <ul>
110 |                 <li>List Item 1</li>
111 |                 <li>List Item 2</li>
112 |                 <li>List Item 3</li>
113 |               </ul>
114 |             </div>
115 |             <footer><p><a href="#top">[Top]</a></p></footer>
116 |           </article>
117 |           <article id="text__hr">
118 |             <header><h1>Horizontal rules</h1></header>
119 |             <div>
120 |               <hr>
121 |             </div>
122 |             <footer><p><a href="#top">[Top]</a></p></footer>
123 |           </article>
124 |           <article id="text__tables">
125 |             <header><h1>Tabular data</h1></header>
126 |             <table>
127 |               <caption>Table Caption</caption>
128 |               <thead>
129 |                 <tr>
130 |                   <th>Table Heading 1</th>
131 |                   <th>Table Heading 2</th>
132 |                   <th>Table Heading 3</th>
133 |                   <th>Table Heading 4</th>
134 |                   <th>Table Heading 5</th>
135 |                 </tr>
136 |               </thead>
137 |               <tfoot>
138 |                 <tr>
139 |                   <th>Table Footer 1</th>
140 |                   <th>Table Footer 2</th>
141 |                   <th>Table Footer 3</th>
142 |                   <th>Table Footer 4</th>
143 |                   <th>Table Footer 5</th>
144 |                 </tr>
145 |               </tfoot>
146 |               <tbody>
147 |                 <tr>
148 |                   <td>Table Cell 1</td>
149 |                   <td>Table Cell 2</td>
150 |                   <td>Table Cell 3</td>
151 |                   <td>Table Cell 4</td>
152 |                   <td>Table Cell 5</td>
153 |                 </tr>
154 |                 <tr>
155 |                   <td>Table Cell 1</td>
156 |                   <td>Table Cell 2</td>
157 |                   <td>Table Cell 3</td>
158 |                   <td>Table Cell 4</td>
159 |                   <td>Table Cell 5</td>
160 |                 </tr>
161 |                 <tr>
162 |                   <td>Table Cell 1</td>
163 |                   <td>Table Cell 2</td>
164 |                   <td>Table Cell 3</td>
165 |                   <td>Table Cell 4</td>
166 |                   <td>Table Cell 5</td>
167 |                 </tr>
168 |                 <tr>
169 |                   <td>Table Cell 1</td>
170 |                   <td>Table Cell 2</td>
171 |                   <td>Table Cell 3</td>
172 |                   <td>Table Cell 4</td>
173 |                   <td>Table Cell 5</td>
174 |                 </tr>
175 |               </tbody>
176 |             </table>
177 |             <footer><p><a href="#top">[Top]</a></p></footer>
178 |           </article>
179 |           <article id="text__code">
180 |             <header><h1>Code</h1></header>
181 |             <div>
182 |               <p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
183 |               <p><strong>Inline code:</strong> <code>&lt;div&gt;code&lt;/div&gt;</code></p>
184 |               <p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>
185 |               <h2>Pre-formatted text</h2>
186 |               <pre>P R E F O R M A T T E D T E X T
187 |   ! " # $ % &amp; ' ( ) * + , - . /
188 |   0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
189 |   @ A B C D E F G H I J K L M N O
190 |   P Q R S T U V W X Y Z [ \ ] ^ _
191 |   ` a b c d e f g h i j k l m n o
192 |   p q r s t u v w x y z { | } ~ </pre>
193 |             </div>
194 |             <footer><p><a href="#top">[Top]</a></p></footer>
195 |           </article>
196 |           <article id="text__inline">
197 |             <header><h1>Inline elements</h1></header>
198 |             <div>
199 |               <p><a href="#!">This is a text link</a>.</p>
200 |               <p><strong>Strong is used to indicate strong importance.</strong></p>
201 |               <p><em>This text has added emphasis.</em></p>
202 |               <p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p>
203 |               <p>The <i>i element</i> is text that is offset from the normal text.</p>
204 |               <p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p>
205 |               <p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
206 |               <p><s>This text has a strikethrough</s>.</p>
207 |               <p>Superscript<sup>®</sup>.</p>
208 |               <p>Subscript for things like H<sub>2</sub>O.</p>
209 |               <p><small>This small text is small for for fine print, etc.</small></p>
210 |               <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
211 |               <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
212 |               <p><cite>This is a citation.</cite></p>
213 |               <p>The <dfn>dfn element</dfn> indicates a definition.</p>
214 |               <p>The <mark>mark element</mark> indicates a highlight.</p>
215 |               <p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
216 |               <p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
217 |             </div>
218 |             <footer><p><a href="#top">[Top]</a></p></footer>
219 |           </article>
220 |           <article id="text__comments">
221 |             <header><h1>HTML Comments</h1></header>
222 |             <div>
223 |               <p>There is comment here: <!--This comment should not be displayed--></p>
224 |               <p>There is a comment spanning multiple tags and lines below here.</p>
225 |               <!--<p><a href="#!">This is a text link. But it should not be displayed in a comment</a>.</p>
226 |               <p><strong>Strong is used to indicate strong importance. But, it should not be displayed in a comment</strong></p>
227 |               <p><em>This text has added emphasis. But, it should not be displayed in a comment</em></p>-->
228 |             </div>
229 |             <footer><p><a href="#top">[Top]</a></p></footer>
230 |           </article>
231 |         </section>
232 |         <section id="embedded">
233 |           <header><h1>Embedded content</h1></header>
234 |           <article id="embedded__images">
235 |             <header><h2>Images</h2></header>
236 |             <div>
237 |               <h3>No <code>&lt;figure&gt;</code> element</h3>
238 |               <p><img src="http://placekitten.com/480/480" alt="Image alt text"></p>
239 |               <h3>Wrapped in a <code>&lt;figure&gt;</code> element, no <code>&lt;figcaption&gt;</code></h3>
240 |               <figure><img src="http://placekitten.com/420/420" alt="Image alt text"></figure>
241 |               <h3>Wrapped in a <code>&lt;figure&gt;</code> element, with a <code>&lt;figcaption&gt;</code></h3>
242 |               <figure>
243 |                 <img src="http://placekitten.com/420/420" alt="Image alt text">
244 |                 <figcaption>Here is a caption for this image.</figcaption>
245 |               </figure>
246 |             </div>
247 |             <footer><p><a href="#top">[Top]</a></p></footer>
248 |           </article>
249 |           <article id="embedded__audio">
250 |             <header><h2>Audio</h2></header>
251 |             <div><audio controls="">audio</audio></div>
252 |             <footer><p><a href="#top">[Top]</a></p></footer>
253 |           </article>
254 |           <article id="embedded__video">
255 |             <header><h2>Video</h2></header>
256 |             <div><video controls="">video</video></div>
257 |             <footer><p><a href="#top">[Top]</a></p></footer>
258 |           </article>
259 |           <article id="embedded__canvas">
260 |             <header><h2>Canvas</h2></header>
261 |             <div><canvas>canvas</canvas></div>
262 |             <footer><p><a href="#top">[Top]</a></p></footer>
263 |           </article>
264 |           <article id="embedded__meter">
265 |             <header><h2>Meter</h2></header>
266 |             <div><meter value="2" min="0" max="10">2 out of 10</meter></div>
267 |             <footer><p><a href="#top">[Top]</a></p></footer>
268 |           </article>
269 |           <article id="embedded__progress">
270 |             <header><h2>Progress</h2></header>
271 |             <div><progress>progress</progress></div>
272 |             <footer><p><a href="#top">[Top]</a></p></footer>
273 |           </article>
274 |           <article id="embedded__svg">
275 |             <header><h2>Inline SVG</h2></header>
276 |             <div><svg width="100px" height="100px"><circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle></svg></div>
277 |             <footer><p><a href="#top">[Top]</a></p></footer>
278 |           </article>
279 |           <article id="embedded__iframe">
280 |             <header><h2>IFrame</h2></header>
281 |             <div><iframe src="index.html" height="300"></iframe></div>
282 |             <footer><p><a href="#top">[Top]</a></p></footer>
283 |           </article>
284 |         </section>
285 |         <section id="forms">
286 |           <header><h1>Form elements</h1></header>
287 |           <form>
288 |             <fieldset id="forms__input">
289 |               <legend>Input fields</legend>
290 |               <p>
291 |                 <label for="input__text">Text Input</label>
292 |                 <input id="input__text" type="text" placeholder="Text Input">
293 |               </p>
294 |               <p>
295 |                 <label for="input__password">Password</label>
296 |                 <input id="input__password" type="password" placeholder="Type your Password">
297 |               </p>
298 |               <p>
299 |                 <label for="input__webaddress">Web Address</label>
300 |                 <input id="input__webaddress" type="url" placeholder="http://yoursite.com">
301 |               </p>
302 |               <p>
303 |                 <label for="input__emailaddress">Email Address</label>
304 |                 <input id="input__emailaddress" type="email" placeholder="name@email.com">
305 |               </p>
306 |               <p>
307 |                 <label for="input__phone">Phone Number</label>
308 |                 <input id="input__phone" type="tel" placeholder="(999) 999-9999">
309 |               </p>
310 |               <p>
311 |                 <label for="input__search">Search</label>
312 |                 <input id="input__search" type="search" placeholder="Enter Search Term">
313 |               </p>
314 |               <p>
315 |                 <label for="input__text2">Number Input</label>
316 |                 <input id="input__text2" type="number" placeholder="Enter a Number">
317 |               </p>
318 |               <p>
319 |                 <label for="input__text3" class="error">Error</label>
320 |                 <input id="input__text3" class="is-error" type="text" placeholder="Text Input">
321 |               </p>
322 |               <p>
323 |                 <label for="input__text4" class="valid">Valid</label>
324 |                 <input id="input__text4" class="is-valid" type="text" placeholder="Text Input">
325 |               </p>
326 |             </fieldset>
327 |             <p><a href="#top">[Top]</a></p>
328 |             <fieldset id="forms__select">
329 |               <legend>Select menus</legend>
330 |               <p>
331 |                 <label for="select">Select</label>
332 |                 <select id="select">
333 |                   <optgroup label="Option Group">
334 |                     <option>Option One</option>
335 |                     <option>Option Two</option>
336 |                     <option>Option Three</option>
337 |                   </optgroup>
338 |                 </select>
339 |               </p>
340 |             </fieldset>
341 |             <p><a href="#top">[Top]</a></p>
342 |             <fieldset id="forms__checkbox">
343 |               <legend>Checkboxes</legend>
344 |               <ul class="list list--bare">
345 |                 <li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
346 |                 <li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
347 |                 <li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
348 |               </ul>
349 |             </fieldset>
350 |             <p><a href="#top">[Top]</a></p>
351 |             <fieldset id="forms__radio">
352 |               <legend>Radio buttons</legend>
353 |               <ul class="list list--bare">
354 |                 <li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
355 |                 <li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
356 |                 <li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
357 |               </ul>
358 |             </fieldset>
359 |             <p><a href="#top">[Top]</a></p>
360 |             <fieldset id="forms__textareas">
361 |               <legend>Textareas</legend>
362 |               <p>
363 |                 <label for="textarea">Textarea</label>
364 |                 <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
365 |               </p>
366 |             </fieldset>
367 |             <p><a href="#top">[Top]</a></p>
368 |             <fieldset id="forms__html5">
369 |               <legend>HTML5 inputs</legend>
370 |               <p>
371 |                 <label for="ic">Color input</label>
372 |                 <input type="color" id="ic" value="#000000">
373 |               </p>
374 |               <p>
375 |                 <label for="in">Number input</label>
376 |                 <input type="number" id="in" min="0" max="10" value="5">
377 |               </p>
378 |               <p>
379 |                 <label for="ir">Range input</label>
380 |                 <input type="range" id="ir" value="10">
381 |               </p>
382 |               <p>
383 |                 <label for="idd">Date input</label>
384 |                 <input type="date" id="idd" value="1970-01-01">
385 |               </p>
386 |               <p>
387 |                 <label for="idm">Month input</label>
388 |                 <input type="month" id="idm" value="1970-01">
389 |               </p>
390 |               <p>
391 |                 <label for="idw">Week input</label>
392 |                 <input type="week" id="idw" value="1970-W01">
393 |               </p>
394 |               <p>
395 |                 <label for="idt">Datetime input</label>
396 |                 <input type="datetime" id="idt" value="1970-01-01T00:00:00Z">
397 |               </p>
398 |               <p>
399 |                 <label for="idtl">Datetime-local input</label>
400 |                 <input type="datetime-local" id="idtl" value="1970-01-01T00:00">
401 |               </p>
402 |             </fieldset>
403 |             <p><a href="#top">[Top]</a></p>
404 |             <fieldset id="forms__action">
405 |               <legend>Action buttons</legend>
406 |               <p>
407 |                 <input type="submit" value="<input type=submit>">
408 |                 <input type="button" value="<input type=button>">
409 |                 <input type="reset" value="<input type=reset>">
410 |                 <input type="submit" value="<input disabled>" disabled>
411 |               </p>
412 |               <p>
413 |                 <button type="submit">&lt;button type=submit&gt;</button>
414 |                 <button type="button">&lt;button type=button&gt;</button>
415 |                 <button type="reset">&lt;button type=reset&gt;</button>
416 |                 <button type="button" disabled>&lt;button disabled&gt;</button>
417 |               </p>
418 |             </fieldset>
419 |             <p><a href="#top">[Top]</a></p>
420 |           </form>
421 |         </section>
422 |       </main>
423 |       <footer role="contentinfo">
424 |         <p>Made by <a href="http://twitter.com/cbracco">@cbracco</a>. Code on <a href="http://github.com/cbracco/html5-test-page">GitHub</a>.</p>
425 |       </footer>
426 |     </div>
427 |   </body>
428 | </html>
429 | 


--------------------------------------------------------------------------------