-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Chris Harvey
committed
Mar 26, 2016
1 parent
870665d
commit c68aad3
Showing
4 changed files
with
121 additions
and
91 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\ | ||
| xmeter | ||
| \*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ | ||
| /*================================*\ | ||
| doc.less | ||
| \*================================*/ | ||
| body { | ||
| background-image: url('https://chharvey.github.io/core/images/crossgrid-lined.svg'); | ||
| background-size: 1px 24px; | ||
| background-repeat: repeat; | ||
| background-position: left top; | ||
| } | ||
| .x-c-Code { | ||
| padding: 1px 2px; | ||
| border-radius: 3px; | ||
| background-color: #f4f8f0; | ||
| color: #008080; | ||
| } | ||
| .x-c-Fig { | ||
| margin-left: 1rem; | ||
| margin-right: 1rem; | ||
| padding: 0.75rem 0.5rem; | ||
| border-width: 1px; | ||
| margin-top: -2px; | ||
| border-style: solid; | ||
| border-color: #e5eaef; | ||
| border-radius: 8px; | ||
| position: relative; | ||
| background: rgba(245, 250, 255, 0.5); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| <!DOCTYPE html><html lang="en"><head><title>Base Typography | Xmeter</title><meta charset="utf-8"><meta name="description" content="A test of bare, unclassed elements."><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../xmeter.min.css"><link rel="stylesheet" href="styles/doc.css"></head><body><main><header><h1>Xmeter — Base Typography</h1><nav id="table-contents"><h2>Table of Contents</h2><ol><li><a href="#table-contents">Table of Contents</a></li><li><a href="#headings-paragraphs">Headings & Paragraphs</a></li><li><a href="#lists">Lists</a></li><li><a href="#tables">Tables</a></li><li><a href="#text-level-elements">Text-Level Elements</a><ol><li><a href="#links">Links</a></li><li><a href="#stress">Stress</a></li><li><a href="#documentation">Documentation</a></li><li><a href="#data">Data</a></li></ol></li><li><a href="#embedded-elements">Embedded Elements</a></li><li><a href="#forms">Forms</a></li><li><a href="#interactive-elements">Interactive Elements</a></li></ol></nav></header><section id="headings-paragraphs"><h2>Headings & Paragraphs</h2><figure class="x-c-Fig"><h1>Heading 1 <code class="x-c-Code">h1</code></h1><p>Paragraph <code class="x-c-Code">p</code> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | ||
| Aliquam sagittis suscipit nunc, a cursus libero euismod at. | ||
| Nulla placerat neque massa, quis interdum leo efficitur vel. | ||
| Donec feugiat varius arcu non volutpat. | ||
| Mauris eget mauris ut mauris auctor mattis id vel justo. | ||
| Nulla dictum arcu nec suscipit mollis. | ||
| Maecenas a iaculis nisl, ut pretium est. Nulla facilisi.</p><h2>Heading 2 <code class="x-c-Code">h2</code></h2><p>Paragraph <code class="x-c-Code">p</code> | ||
| Suspendisse ut auctor enim. | ||
| Aliquam viverra enim vitae ante aliquet venenatis. | ||
| Sed vel nibh sit amet sapien fermentum mattis nec non arcu. | ||
| Praesent dapibus velit quis lectus tempus, ut ullamcorper nibh facilisis. | ||
| Aenean tincidunt ante risus, semper malesuada libero consectetur id. | ||
| Praesent vel ligula ut enim porttitor porta. Aenean eu ullamcorper mi. | ||
| Integer blandit est quam, eget mattis urna scelerisque quis. | ||
| Maecenas sapien sapien, ornare nec lobortis eget, tincidunt sed ligula. | ||
| Maecenas risus nibh, volutpat sed euismod non, semper eget neque. | ||
| Integer varius egestas risus, volutpat sagittis turpis convallis eget. | ||
| Vivamus pulvinar ligula eget mi tincidunt, eget faucibus justo laoreet. | ||
| In sapien lacus, egestas faucibus laoreet eu, tempor sit amet lorem. | ||
| Sed luctus congue tortor a scelerisque.</p><h3>Heading 3 <code class="x-c-Code">h3</code></h3><p>Paragraph <code class="x-c-Code">p</code> | ||
| Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. | ||
| Nunc sit amet scelerisque lectus. Cras cursus sed dui quis convallis. | ||
| Quisque id justo elit. | ||
| Fusce ut quam non sem efficitur accumsan sed id neque. | ||
| Mauris finibus dignissim gravida. | ||
| In dignissim mauris ac odio molestie volutpat. | ||
| Nulla tellus justo, finibus sed volutpat sed, tristique ac lacus. | ||
| Suspendisse sit amet fermentum sapien. | ||
| Aliquam luctus laoreet iaculis. | ||
| Proin lacinia orci vitae tellus pellentesque porttitor.</p><h4>Heading 4 <code class="x-c-Code">h4</code></h4><p>Paragraph <code class="x-c-Code">p</code> | ||
| Aenean consectetur suscipit urna, non vehicula lacus blandit et. | ||
| Integer at lacus et diam tristique suscipit. | ||
| Ut cursus massa sit amet nisl convallis, elementum accumsan sapien mattis. | ||
| Vestibulum vitae magna ac tellus accumsan pharetra vulputate vitae erat. | ||
| Vestibulum est dui, elementum non sagittis ac, sagittis accumsan justo. | ||
| Donec at vestibulum diam. Nam et volutpat dolor, at pulvinar nisi. | ||
| Curabitur aliquam maximus nulla eu venenatis. | ||
| Nam aliquam lorem non felis dignissim dictum. | ||
| Pellentesque sagittis vehicula nisl non luctus. | ||
| Pellentesque eget ligula hendrerit, blandit enim consequat, dictum sem. | ||
| In quis lectus in lectus interdum laoreet eu quis quam. | ||
| Fusce auctor posuere purus, quis semper libero dignissim euismod. | ||
| Curabitur commodo mauris a sapien vulputate, eget pharetra urna facilisis.</p><h5>Heading 5 <code class="x-c-Code">h5</code></h5><p>Paragraph <code class="x-c-Code">p</code> | ||
| Donec finibus ut lectus finibus pellentesque. | ||
| Nulla euismod feugiat nulla nec posuere. | ||
| Sed ac est id sem sagittis rhoncus eu ac neque. | ||
| Aliquam eu metus sagittis, porta turpis id, scelerisque magna. | ||
| Nulla venenatis elementum est, semper viverra felis tristique sit amet. | ||
| Mauris nec ipsum id orci porttitor auctor sed sit amet sem. | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | ||
| Etiam tellus leo, venenatis sit amet ipsum non, sagittis feugiat ante.</p><h6>Heading 6 <code class="x-c-Code">h6</code></h6><p>Paragraph <code class="x-c-Code">p</code> | ||
| Donec vel dolor ut felis dapibus ultricies vitae a nibh. | ||
| Ut semper odio est, sed lacinia ligula gravida ut. | ||
| Vestibulum facilisis viverra pulvinar. | ||
| Suspendisse maximus nisl sit amet augue vulputate, vel porta nunc molestie. | ||
| Aliquam mauris diam, pharetra vel consectetur quis, rhoncus in risus. | ||
| Donec ut quam massa. | ||
| Vestibulum sapien justo, commodo a eros in, rhoncus interdum nisl. | ||
| Etiam a porta lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></figure><figure class="x-c-Fig"><h1>Lorem Ipsum <code class="x-c-Code">h1</code></h1><h2>Lorem Ipsum <code class="x-c-Code">h2</code></h2><h3>Lorem Ipsum <code class="x-c-Code">h3</code></h3><h4>Lorem Ipsum <code class="x-c-Code">h4</code></h4><h5>Lorem Ipsum <code class="x-c-Code">h5</code></h5><h6>Lorem Ipsum <code class="x-c-Code">h6</code></h6></figure><figure class="x-c-Fig"><address>12345 <code class="x-c-Code">address</code> Ave <code class="x-c-Code">br</code><br> | ||
| Washington, DC 00000 <code class="x-c-Code">br</code><br> | ||
| United States of America</address></figure><figure class="x-c-Fig"><pre>Pellentesque <code class="x-c-Code">pre</code> habitant() { | ||
| morbi.tristique = senectus; | ||
| et (netus = malesuada; fames < ac; turpis.egestas++) { | ||
| Nunc.sit += [amet, scelerisque][et]; | ||
| Cras = { | ||
| lectus: cursus | ||
| , sed: dui | ||
| , quis: convallis(id () { justo Quisque.elit; }) | ||
| }; | ||
| } | ||
| }</pre></figure><figure class="x-c-Fig"><figure>Aenean consectetur <code class="x-c-Code">figure</code> suscipit urna, non vehicula lacus blandit et.<figcaption>Integer at lacus et diam tristique <code class="x-c-Code">figure</code> <code class="x-c-Code">figcaption</code> suscipit.</figcaption></figure></figure><figure class="x-c-Fig"><blockquote>Donec <code class="x-c-Code">blockquote</code> vel dolor ut felis dapibus ultricies vitae a nibh.</blockquote></figure><!-- figure(class=classnames.figure)figcaption. | ||
| A horizontal rule <code class="x-c-Code">hr</code> is shown below. I’m honestly not sure when | ||
| you would ever use this instead of a CSS border. | ||
| hr--></section><section id="lists"><h2>Lists</h2><figure class="x-c-Fig"><figcaption>Ordered List <code class="x-c-Code">ol</code></figcaption><ol><li>List item <code class="x-c-Code">li</code></li><li>List item <code class="x-c-Code">li</code><ol><li>Nested list item</li><li>Nested list item<ol><li>Another nested list item</li><li>Another nested list item</li></ol></li></ol></li></ol></figure><figure class="x-c-Fig"><figcaption>Unrdered List <code class="x-c-Code">ul</code></figcaption><ul><li>List item <code class="x-c-Code">li</code></li><li>List item <code class="x-c-Code">li</code><ul><li>Nested list item</li><li>Nested list item<ul><li>Another nested list item</li><li>Another nested list item</li></ul></li></ul></li></ul></figure><figure class="x-c-Fig"><figcaption>Dictionary List <code class="x-c-Code">dl</code></figcaption><dl><dt>key <code class="x-c-Code">dt</code></dt><dd>value <code class="x-c-Code">dd</code></dd><dt><ul><li>1st key</li><li>2nd key</li></ul></dt><dd>value</dd><dt>key</dt><dd><ul><li>1st value</li><li>2nd value</li></ul></dd></dl></figure></section><section id="tables"><h2>Tables</h2><figure class="x-c-Fig"><table><caption><code class="x-c-Code">table</code> <code class="x-c-Code">caption</code></caption><thead><tr><th scope="col"><code class="x-c-Code">thead</code>er <code class="x-c-Code">tr</code>ow 1 <code class="x-c-Code">th</code>eading 1</th><th scope="col"><code class="x-c-Code">thead</code>er <code class="x-c-Code">tr</code>ow 1 <code class="x-c-Code">th</code>eading 2</th><th scope="col"><code class="x-c-Code">thead</code>er <code class="x-c-Code">tr</code>ow 1 <code class="x-c-Code">th</code>eading 3</th></tr></thead><tfoot><tr><td><code class="x-c-Code">tfoot</code>er <code class="x-c-Code">tr</code>ow 1 <code class="x-c-Code">td</code>ata 1</td><td><code class="x-c-Code">tfoot</code>er <code class="x-c-Code">tr</code>ow 1 <code class="x-c-Code">td</code>ata 2</td><td><code class="x-c-Code">tfoot</code>er <code class="x-c-Code">tr</code>ow 1 <code class="x-c-Code">td</code>ata 3</td></tr><tr><td><code class="x-c-Code">tfoot</code>er <code class="x-c-Code">tr</code>ow 2 <code class="x-c-Code">td</code>ata 1</td><td><code class="x-c-Code">tfoot</code>er <code class="x-c-Code">tr</code>ow 2 <code class="x-c-Code">td</code>ata 2</td><td><code class="x-c-Code">tfoot</code>er <code class="x-c-Code">tr</code>ow 2 <code class="x-c-Code">td</code>ata 3</td></tr></tfoot><tbody><tr><td><code class="x-c-Code">tbody</code> <code class="x-c-Code">tr</code>ow 1 <code class="x-c-Code">td</code>ata 1</td><td><code class="x-c-Code">tbody</code> <code class="x-c-Code">tr</code>ow 1 <code class="x-c-Code">td</code>ata 2</td><td><code class="x-c-Code">tbody</code> <code class="x-c-Code">tr</code>ow 1 <code class="x-c-Code">td</code>ata 3</td></tr><tr><td><code class="x-c-Code">tbody</code> <code class="x-c-Code">tr</code>ow 2 <code class="x-c-Code">td</code>ata 1</td><td><code class="x-c-Code">tbody</code> <code class="x-c-Code">tr</code>ow 2 <code class="x-c-Code">td</code>ata 2</td><td><code class="x-c-Code">tbody</code> <code class="x-c-Code">tr</code>ow 2 <code class="x-c-Code">td</code>ata 3</td></tr><tr><td><code class="x-c-Code">tbody</code> <code class="x-c-Code">tr</code>ow 3 <code class="x-c-Code">td</code>ata 1</td><td><code class="x-c-Code">tbody</code> <code class="x-c-Code">tr</code>ow 3 <code class="x-c-Code">td</code>ata 2</td><td><code class="x-c-Code">tbody</code> <code class="x-c-Code">tr</code>ow 3 <code class="x-c-Code">td</code>ata 3</td></tr></tbody></table></figure></section><section id="text-level-elements"><h2>Text-Level Elements</h2><section id="links"><h3>Links</h3><figure class="x-c-Fig"><ul><li><a>a</a></li><li><a href>a[href]</a></li></ul></figure></section><section id="stress"><h3>Stress</h3><figure class="x-c-Fig"><ul><li><em> emphasized text <code class="x-c-Code">em</code></em></li><li><strong>important text <code class="x-c-Code">strong</code></strong></li><li><i> alternate voice/mood (scare quotes, mentioning words, foreign expressions) <code class="x-c-Code">i</code></i></li><li><mark> relevant in some context <code class="x-c-Code">mark</code></mark></li><li><u> unarticulated annotation <code class="x-c-Code">u</code></u></li><li><small> side comment <code class="x-c-Code">small</code></small></li><li><s> text shown to be no longer relevant <code class="x-c-Code">s</code></s></li></ul></figure></section><section id="documentation"><h3>Documentation</h3><figure class="x-c-Fig"><ul><li><ins> content shown to be inserted into a document <code class="x-c-Code">ins</code></ins></li><li><del> content shown to be deleted from a document <code class="x-c-Code">del</code></del></li><li><dfn> definining instance of a term <code class="x-c-Code">dfn</code></dfn></li><li><b> keyword or technical term <code class="x-c-Code">b</code></b></li><li><abbr title>abbreviation or acronym <code class="x-c-Code">abbr[title]</code></abbr></li><li><var> variable <code class="x-c-Code">var</code></var></li><li><q> quoted material <code class="x-c-Code">q</code></q></li><li><cite>reference to a work, some part of a work, or the creator of a work <code class="x-c-Code">cite</code></cite></li><li><sup> superscript <code class="x-c-Code">sup</code></sup></li><li><sub> subscript <code class="x-c-Code">sub</code></sub></li></ul></figure></section><section id="data"><h3>Data</h3><figure class="x-c-Fig"><ul><li><time datetime="Z">a specific date or time <code class="x-c-Code">time</code></time></li><li><data value> generic machine-readable data <code class="x-c-Code">data</code></data></li><li><code> a fragment of code <code class="x-c-Code">code</code></code></li><li><kbd> user input <code class="x-c-Code">kbd</code></kbd></li><li><kbd><kbd> a button or key on a physical device <code class="x-c-Code">kbd > kbd</code></kbd></kbd></li><li><samp> sample computer output <code class="x-c-Code">samp</code></samp></li></ul></figure></section></section><section id="embedded-elements"><h2>Embedded Elements</h2></section><section id="forms"><h2>Forms</h2><form><figure class="x-c-Fig"><fieldset><legend>Integer at lacus et diam tristique <code class="x-c-Code">fieldset legend</code> suscipit.</legend>Aenean consectetur <code class="x-c-Code">fieldset</code> suscipit urna, non vehicula lacus blandit et.</fieldset></figure><figure class="x-c-Fig"><fieldset><legend>single line text inputs</legend><input type="text" placeholder="input type text"><input type="email" placeholder="input type email"><input type="password" placeholder="input type password"><input type="search" placeholder="input type search"><input type="tel" placeholder="input type tel"><input type="url" placeholder="input type url"></fieldset></figure><figure class="x-c-Fig"><fieldset><legend>date/time</legend><input type="datetime"><input type="datetime-local"><input type="date"><input type="time"><input type="week"><input type="month"></fieldset></figure><figure class="x-c-Fig"><fieldset><legend>without text input</legend><input type="color"><input type="file"><input type="hidden"><input type="number" placeholder="input type number"><input type="range"></fieldset></figure><figure class="x-c-Fig"><fieldset><legend>check boxes</legend><input type="checkbox"><label>select</label><label><input type="checkbox">all</label><input type="checkbox"><label>applicable</label></fieldset></figure><figure class="x-c-Fig"><fieldset><legend>radio buttons</legend><input type="radio" name="radiogroup1"><label>select</label><label><input type="radio" name="radiogroup1">only</label><input type="radio" name="radiogroup1"><label>one</label></fieldset></figure><figure class="x-c-Fig"><fieldset><legend>drop-down list (select only one)</legend><select><option>option 1</option><optgroup label="label for option 2"><option>option 2a</option><option>option 2b</option><option>option 2c</option></optgroup><option>option 3</option></select><input list="b" placeholder="select it or type it"><datalist id="b"><option>option 1</option><option>option 2</option><option>option 3</option></datalist></fieldset></figure><figure class="x-c-Fig"><fieldset><legend>drop-down list (select multiple)</legend><select multiple=""><option>option 1</option><optgroup label="label for option 2"><option>option 2a</option><option>option 2b</option><option>option 2c</option></optgroup><option>option 3</option></select></fieldset></figure><figure class="x-c-Fig"><fieldset><legend>buttons</legend><input type="button" value="button"><input type="reset"><input type="submit"><button type="button">button</button><button type="reset"> reset</button><button type="submit">submit</button></fieldset></figure><figure class="x-c-Fig"><fieldset><legend>textarea</legend><textarea></textarea></fieldset></figure></form></section><section id="interactive-elements"><h2>Interactive Elements</h2><figure class="x-c-Fig"><details><summary>Integer at lacus et diam tristique <code class="x-c-Code">details summary</code> suscipit.</summary>Aenean consectetur <code class="x-c-Code">details</code> suscipit urna, non vehicula lacus blandit et.</details></figure></section></main><script>document.querySelectorAll('#forms > form')[0].style.backgroundColor = '#fff'</script></body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.