-
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
Showing
42 changed files
with
1,358 additions
and
409 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 |
|---|---|---|
| @@ -1,29 +1,30 @@ | ||
| doctype html | ||
| html(lang="en") | ||
| include includes/_data.jade | ||
| block vars | ||
| head | ||
| include includes/_data.jade | ||
| block vars | ||
| - | ||
| var project_name = 'Xmeter' | ||
| var page = {} | ||
| title= page.name + ' | ' + project_name | ||
| title= page.title() || (page.name() + ' | ' + Xmeter.DOCS.name()) | ||
| meta(charset="utf-8") | ||
| meta(name="description" content=Xmeter.DOCS.description()) | ||
| meta(name="viewport" content="width=device-width, initial-scale=1") | ||
| meta(name="description" content="A demo of Xmeter styles.") | ||
| link(rel="stylesheet" href="../xmeter.css") | ||
| link(rel="stylesheet" href="styles/docs.css") | ||
| body.docs-body | ||
| main.docs-main | ||
| block main | ||
| header | ||
| h1= project_name + ' — ' + page.name | ||
| p= page.description | ||
| //- h1= page.title() || (Xmeter.DOCS.name() + ' — ' + page.name()) | ||
| if page.title() | ||
| h1= page.title() | ||
| else | ||
| h1 #[a(href=Xmeter.DOCS.url())= Xmeter.DOCS.name()] — #{page.name()} | ||
| block mainIntro | ||
| p= page.description() | ||
| nav#table-contents | ||
| h2 Table of Contents | ||
| block toc | ||
| +doctoc({pages: page.sub, depth: Infinity}) | ||
| unless page === Xmeter.getPage('index.html') | ||
| +doctoc({pages: page.findAll(), depth: Infinity}) | ||
| block footer | ||
| footer: nav | ||
| h1 Sitemap | ||
| +doctoc({pages: Xmeter.PAGES}) | ||
| block scripts | ||
| +doctoc({pages: Xmeter.DOCS.findAll()}) |
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 |
|---|---|---|
| @@ -1,6 +1,34 @@ | ||
| <!DOCTYPE html><html lang="en"><head><title>Atoms | Xmeter</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="A demo of Xmeter styles."><link rel="stylesheet" href="../xmeter.css"><link rel="stylesheet" href="styles/docs.css"></head><body class="docs-body"><main class="docs-main"><header><h1>Xmeter — Atoms</h1><p>Very specific classes used for creating anomalies or fixing broken styles.</p><nav id="table-contents"><h2>Table of Contents</h2><ol><li><a href="atom.html#table-contents">Table of Contents</a></li><li><a href="atom.html#margin-bottom">margin-bottom</a></li><li><a href="atom.html#padding-top">padding-top</a></li></ol></nav></header><section id="margin-bottom"><h2>margin-bottom</h2><p>This atom sets the bottom margin to one <dfn>vertical rhythm unit</dfn> (1vru), | ||
| <!DOCTYPE html><html lang="en"><head><title>Atoms | Xmeter</title><meta charset="utf-8"><meta name="description" content="A demo of Xmeter styles."><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../xmeter.css"><link rel="stylesheet" href="styles/docs.css"></head><body class="docs-body"><main class="docs-main"><header><h1><a href="/docs/">Xmeter</a> — Atoms</h1><p>Very specific classes used for creating anomalies or fixing broken styles.</p><nav id="table-contents"><h2>Table of Contents</h2><ol><li><a href="atom.html#table-contents">Table of Contents</a></li><li><a href="atom.html#margin-bottom">margin-bottom</a></li><li><a href="atom.html#padding-top">padding-top</a></li><li><a href="atom.html#font-size">font-size</a></li></ol></nav></header><section id="margin-bottom"><h2>margin-bottom <a class="docs-_fragid" href="#margin-bottom"></a></h2><p>This atom sets the bottom margin to one <dfn>vertical rhythm unit</dfn> (1vru), | ||
| which is equal to the <code class="docs-code">html</code> element’s | ||
| <code class="docs-code">line-height</code> multiplied by | ||
| <code class="docs-code">1rem</code>.</p><pre class="docs-pre">@g-vru: @g-line_height * 1rem; | ||
| .-mb-1vru { margin-bottom: @g-vru; }</pre><figure class="docs-figure"><div class="-mb-1vru">Most typographical block elements like paragraphs and lists are automatically given this style.</div><pre class="docs-pre"><div class="<u>-mb-1vru</u>">Most ...</div></pre></figure></section><section id="padding-top"><h2>padding-top</h2><p>This atom sets the top padding to 1<b><abbr title="vertical rhythm unit">vru</abbr></b>.</p><pre class="docs-pre">@g-vru: @g-line_height * 1rem; | ||
| .-pt-1vru { padding-top: @g-vru; }</pre><figure class="docs-figure"><div class="-pt-1vru">Usually only Heading 1 is given this style, but it is also useful for moving an element down the page.</div><pre class="docs-pre"><div class="<u>-pt-1vru</u>">Usually only ...</div></pre></figure></section></main><footer><nav><h1>Sitemap</h1><ol><li><a href="index.html">Pattern Library</a></li><li><a href="base.html">Base Typography</a>: Bare, unstyled HTML elements. No classes.</li><li><a href="obj.html">Objects</a>: Patterns of structure that can be reused many times for many different purposes.</li><li><a href="help.html">Helpers</a>: Somewhat explicit classes used for enhancing default styles.</li><li><a href="atom.html">Atoms</a>: Very specific classes used for creating anomalies or fixing broken styles.</li></ol></nav></footer></body></html> | ||
| .-mb-1vru { margin-bottom: @g-vru; }</pre><figure class="docs-figure"><div class="-mb-1vru">Most typographical block elements like paragraphs and lists are automatically given this style.</div><pre class="docs-pre"><div class="<u>-mb-1vru</u>">Most ...</div></pre></figure></section><section id="padding-top"><h2>padding-top <a class="docs-_fragid" href="#padding-top"></a></h2><p>This atom sets the top padding to 1<b><abbr title="vertical rhythm unit">vru</abbr></b>.</p><pre class="docs-pre">@g-vru: @g-line_height * 1rem; | ||
| .-pt-1vru { padding-top: @g-vru; }</pre><figure class="docs-figure"><div class="-pt-1vru">Usually only Heading 1 is given this style, but it is also useful for moving an element down the page.</div><pre class="docs-pre"><div class="<u>-pt-1vru</u>">Usually only ...</div></pre></figure></section><section id="font-size"><h2>font-size <a class="docs-_fragid" href="#font-size"></a></h2><p>These are two groups of atoms. The first group simply sets the font size of an element. | ||
| The second group uses the <code class="docs-code">.font-size-el()</code> mixin, | ||
| for maintaining vertical rhythm.</p><p>See all the font sizes in the source file <code class="docs-code">/src/__settings.less</code>, | ||
| and all atoms in <code class="docs-code">/src/_atom.less</code></p><pre class="docs-pre">@g-font_size_peta: 96/16; | ||
| @g-font_size_tera: 64/16; | ||
| @g-font_size_giga: 48/16; | ||
| @g-font_size_mega: 32/16; | ||
| @g-font_size_kilo: 24/16; | ||
| @g-font_size_norm: 16/16; | ||
| @g-font_size_mill: 12/16; | ||
| @g-font_size_micr: 8/16; | ||
| .-fz-norm { font-size: @g-font_size_norm * 1em; } | ||
| .-fz-el-norm { .font-size-el(@g-font_size_norm); }</pre><figure class="docs-figure"><figcaption class="-mb-1vru">Use <code class="docs-code">.-fz-*</code> on inline elements. | ||
| Numbers shown are font-sizes(ems).</figcaption><ul><li><u class="-fz-peta">universe</u> (6.00)</li><li><u class="-fz-tera">galaxy </u> (4.00)</li><li><u class="-fz-giga">star </u> (3.00)</li><li><u class="-fz-mega">planet </u> (2.00)</li><li><u class="-fz-kilo">asteroid</u> (1.50)</li><li><u class="-fz-norm">molecule</u> (1.00)</li><li><u class="-fz-mill">atom </u> (0.75)</li><li><u class="-fz-micr">quark </u> (0.50)</li></ul><pre class="docs-pre"><li><u class="<u>-fz-peta</u>">universe</u> (6.00)</li> | ||
| <li><u class="<u>-fz-tera</u>">galaxy </u> (4.00)</li> | ||
| <li><u class="<u>-fz-giga</u>">star </u> (3.00)</li> | ||
| <li><u class="<u>-fz-mega</u>">planet </u> (2.00)</li> | ||
| <li><u class="<u>-fz-kilo</u>">asteroid</u> (1.50)</li> | ||
| <li><u class="<u>-fz-norm</u>">molecule</u> (1.00)</li> | ||
| <li><u class="<u>-fz-mill</u>">atom </u> (0.75)</li> | ||
| <li><u class="<u>-fz-micr</u>">quark </u> (0.50)</li></pre></figure><figure class="docs-figure"><figcaption>Use <code class="docs-code">.-fz-el-*</code> on block elements. | ||
| Numbers shown are font-sizes(ems)/line-heights.</figcaption><ul style="overflow:auto;white-space:nowrap"><li class="-fz-el-peta">universe (6.00/1.000)</li><li class="-fz-el-tera">galaxy (4.00/1.125)</li><li class="-fz-el-giga">star (3.00/1.000)</li><li class="-fz-el-mega">planet (2.00/1.500)</li><li class="-fz-el-kilo">asteroid (1.50/1.000)</li><li class="-fz-el-norm">molecule (1.00/1.500)</li><li class="-fz-el-mill">atom (0.75/2.000)</li><li class="-fz-el-micr">quark (0.50/3.000)</li></ul><pre class="docs-pre"><li class="<u>-fz-el-peta</u>">universe (6.00/1.000)</li> | ||
| <li class="<u>-fz-el-tera</u>">galaxy (4.00/1.125)</li> | ||
| <li class="<u>-fz-el-giga</u>">star (3.00/1.000)</li> | ||
| <li class="<u>-fz-el-mega</u>">planet (2.00/1.500)</li> | ||
| <li class="<u>-fz-el-kilo</u>">asteroid (1.50/1.000)</li> | ||
| <li class="<u>-fz-el-norm</u>">molecule (1.00/1.500)</li> | ||
| <li class="<u>-fz-el-mill</u>">atom (0.75/2.000)</li> | ||
| <li class="<u>-fz-el-micr</u>">quark (0.50/3.000)</li></pre></figure></section></main><footer><nav><h1>Sitemap</h1><ol><li><a href="index.html">Xmeter</a>: A demo of Xmeter styles.</li><li><a href="base.html">Base Typography</a>: Bare, unstyled HTML elements. No classes.</li><li><a href="obj.html">Objects</a>: Patterns of structure that can be reused many times for many different purposes.</li><li><a href="help.html">Helpers</a>: Somewhat explicit classes used for enhancing default styles.</li><li><a href="atom.html">Atoms</a>: Very specific classes used for creating anomalies or fixing broken styles.</li></ol></nav></footer></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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,15 @@ | ||
| extends _docs.tpl.jade | ||
|
|
||
| block append vars | ||
| - var page = Xmeter.getPage('atom.html') | ||
| - var page = Xmeter.DOCS.find('atom.html') | ||
|
|
||
| block append main | ||
| include includes/_atom.margin-bottom.docs.jade | ||
| +docs_marginBottom(Xmeter.DOCS_CLASSES) | ||
| include includes/_atom.padding-top.docs.jade | ||
| +docs_paddingTop(Xmeter.DOCS_CLASSES) | ||
| +newSection(2, Xmeter.DOCS.find('atom.html#margin-bottom')) | ||
| include includes/_atom.margin-bottom.docs.jade | ||
| +docs_marginBottom(Xmeter.DOCS_CLASSES) | ||
| +newSection(2, Xmeter.DOCS.find('atom.html#padding-top')) | ||
| include includes/_atom.padding-top.docs.jade | ||
| +docs_paddingTop(Xmeter.DOCS_CLASSES) | ||
| +newSection(2, Xmeter.DOCS.find('atom.html#font-size')) | ||
| include includes/_atom.font-size.docs.jade | ||
| +docs_fontSize(Xmeter.DOCS_CLASSES) |
Oops, something went wrong.