From 348082f99406b0684505266035dfdbca8916510d Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Mon, 4 Jul 2016 01:24:26 -0400 Subject: [PATCH 01/53] add section anchors to docs --- docs/_docs.tpl.jade | 12 +++++++++++- docs/styles/docs.less | 16 ++++++++++++++++ 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/docs/_docs.tpl.jade b/docs/_docs.tpl.jade index a9900f6..53f39a9 100644 --- a/docs/_docs.tpl.jade +++ b/docs/_docs.tpl.jade @@ -32,4 +32,14 @@ html(lang="en") footer: nav h1 Sitemap +doctoc({pages: Xmeter.PAGES}) - block scripts + script(src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous") + script. + function toURL(string) { + return encodeURIComponent(string.toLowerCase().replace(/[\W]+/g, '-')) + } + $('h1, h2, h3, h4, h5, h6').each(function () { + if (!$(this).parents('figure').length) { + var id = '_' + toURL($(this).text()) + $(this).append($('').addClass('docs-_fragid').attr('id', id).attr('href', '#' + id)) + } + }) diff --git a/docs/styles/docs.less b/docs/styles/docs.less index de8a6ba..ca6d41f 100644 --- a/docs/styles/docs.less +++ b/docs/styles/docs.less @@ -50,3 +50,19 @@ .docs-form { background: #fff; } + + +.docs-_fragid { + display: inline; + line-height: 0; + margin-left: 1rem; + font-weight: 100; + &::before { + content: '\00a7'; + } +} +h1, h2, h3, h4, h5, h6 { + &:not(:hover) > .docs-_fragid { + visibility: hidden; + } +} From 5c535a0e7beaba6fdab16c40132fddfe0fc56f38 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Mon, 4 Jul 2016 11:32:20 -0400 Subject: [PATCH 02/53] add tool.jade --- docs/_docs.tpl.jade | 3 ++- docs/includes/_content-tool.jade | 31 +++++++++++++++++++++++++++++++ docs/includes/_data.jade | 20 ++++++++++++++++++++ docs/tool.jade | 16 ++++++++++++++++ 4 files changed, 69 insertions(+), 1 deletion(-) create mode 100644 docs/includes/_content-tool.jade create mode 100644 docs/tool.jade diff --git a/docs/_docs.tpl.jade b/docs/_docs.tpl.jade index 53f39a9..1d721a7 100644 --- a/docs/_docs.tpl.jade +++ b/docs/_docs.tpl.jade @@ -23,7 +23,8 @@ html(lang="en") block main header h1= project_name + ' — ' + page.name - p= page.description + block mainIntro + p= page.description nav#table-contents h2 Table of Contents block toc diff --git a/docs/includes/_content-tool.jade b/docs/includes/_content-tool.jade new file mode 100644 index 0000000..e13ae07 --- /dev/null +++ b/docs/includes/_content-tool.jade @@ -0,0 +1,31 @@ +- var classname = classname || {} +section#fallback-tools + h2 Fallback Tools + section#box-sizing + h3 box-sizing + section#flexbox-tools + h3 The Flexbox Tools + section#transform + h3 transform + section#transform-origin + h3 transform-origin + section#column-count + h3 column-count + section#column-width + h3 column-width + section#filter + h3 filter +section#module-tools + h2 Module Tools + section#borders + h3 borders + section#border-radius + h3 border-radius + section#font-size + h3 font-size + section#vertspacing + h3 vertspacing + section#delims + h3 delims + section#sprite + h3 sprite diff --git a/docs/includes/_data.jade b/docs/includes/_data.jade index d6d2c22..6710225 100644 --- a/docs/includes/_data.jade +++ b/docs/includes/_data.jade @@ -6,6 +6,26 @@ name: 'Pattern Library', url: 'index.html' , description: '' } + , { + name: 'Tools', url: 'tool.html' + , description: 'Functions and mixins used for development.' + , sub: [ + { name: 'Table of Contents' , url: 'tool.html#table-contents' } + , { name: 'box-sizing' , url: 'tool.html#box-sizing' } + , { name: 'The Flexbox Tools' , url: 'tool.html#flexbox-tools' } + , { name: 'transform' , url: 'tool.html#transform' } + , { name: 'transform-origin' , url: 'tool.html#transform-origin' } + , { name: 'column-count' , url: 'tool.html#column-count' } + , { name: 'column-width' , url: 'tool.html#column-width' } + , { name: 'filter' , url: 'tool.html#filter' } + , { name: 'borders' , url: 'tool.html#borders' } + , { name: 'border-radius' , url: 'tool.html#border-radius' } + , { name: 'font-size' , url: 'tool.html#font-size' } + , { name: 'vertspacing' , url: 'tool.html#vertspacing' } + , { name: 'delims' , url: 'tool.html#delims' } + , { name: 'sprite' , url: 'tool.html#sprite' } + ] + } , { name: 'Visual Design', url: 'visual.html' , description: 'Color and font schemes, look-and-feel, overall mood and tone.' diff --git a/docs/tool.jade b/docs/tool.jade new file mode 100644 index 0000000..0e3abae --- /dev/null +++ b/docs/tool.jade @@ -0,0 +1,16 @@ +extends _docs.tpl.jade + +block append vars + - var page = Xmeter.getPage('tool.html') + +block append main + include includes/_content-tool.jade + +block append mainIntro + p. + Tools are mixins and/or functions in the codebase that are used in development. + These rules don’t output any CSS, but they do make writing CSS a lot easier + by encapsulating reusable sets of property declarations. + #[a(href="#fallback-tools") Fallback Tools] are simply mixins that address + browser vendor prefixes for CSS properties and values, + whereas #[a(href="#module-tools") Module Tools] combine properties commonly used together. From d496a50477bdae4fa093a770684f934d1480e389 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Mon, 4 Jul 2016 13:27:37 -0400 Subject: [PATCH 03/53] add box-sizing api --- docs/includes/_content-tool.jade | 29 +++++++++++++++++++++++++++++ docs/includes/_data.jade | 17 +++++++++++++++++ docs/styles/docs.less | 17 +++++++++++++++++ 3 files changed, 63 insertions(+) diff --git a/docs/includes/_content-tool.jade b/docs/includes/_content-tool.jade index e13ae07..5a92cbd 100644 --- a/docs/includes/_content-tool.jade +++ b/docs/includes/_content-tool.jade @@ -3,6 +3,35 @@ section#fallback-tools h2 Fallback Tools section#box-sizing h3 box-sizing + +markupify({ + "name": "box-sizing" + , "description": "Alters the CSS box model used to calculate width and height." + , "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing" + , "syntax": ".box-sizing(@box);" + , "params": [ + { + "name": "@box" + , "description": "the way the box is sized" + , "values": [ + { + "value": "content-box" + , "description": "`width` and `height` properties measured include only the content" + , "default": true + } + , { + "value": "border-box" + , "description": "`width` and `height` properties measured include padding and border as well as content" + } + ] + } + ] + }, {list:'docs-c-Api'}) + pre.docs-pre. + .box-sizing(@box: content-box) { + -webkit-box-sizing: @box; + -moz-box-sizing: @box; + box-sizing: @box; + } section#flexbox-tools h3 The Flexbox Tools section#transform diff --git a/docs/includes/_data.jade b/docs/includes/_data.jade index 6710225..f1b7f28 100644 --- a/docs/includes/_data.jade +++ b/docs/includes/_data.jade @@ -93,6 +93,7 @@ } return Xmeter })() + //- mixin doctoc(args) //- //- use this mixin if you want classes //- - var pages = args.pages || [] @@ -107,6 +108,7 @@ //- | #{' '}—#{' ' + item.description} //- if item.sub && depth > 0 //- +doctoc({pages: item.sub, class_obj: (class_obj.sub || {}), depth: depth-1}) + mixin doctoc(args) - var pages = args.pages || [] - var depth = +args.depth || 0 @@ -119,3 +121,18 @@ mixin doctoc(args) = ': ' + item.description if item.sub && depth > 0 +doctoc({pages: item.sub, depth: depth-1}) + +mixin markupify(thing, classes) + - classes = classes || {} + if typeof thing === 'object' + if Array.isArray(thing) + ul(class=classes.list) + each val,key in thing + li(class=classes.val): +markupify(val) + else + dl(class=classes.list) + each val,key in thing + dt(class=classes.key)= key + dd(class=classes.val): +markupify(val) + else + = thing diff --git a/docs/styles/docs.less b/docs/styles/docs.less index ca6d41f..bdf62e6 100644 --- a/docs/styles/docs.less +++ b/docs/styles/docs.less @@ -52,6 +52,23 @@ } +.docs-c-Api { + dt, + dd { + display: inline; + } + dt { + padding-right: 1rem; + font-weight:700; + } + dd::after { + content: ''; + display:block; + clear:both; + } +} + + .docs-_fragid { display: inline; line-height: 0; From e6c2f257e291291f94e2b0a8a87e89ac71a8a704 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Tue, 5 Jul 2016 09:50:32 -0400 Subject: [PATCH 04/53] remove Api component --- docs/includes/_content-tool.jade | 23 ----------------------- docs/includes/_data.jade | 2 +- docs/styles/docs.less | 30 +++++++++++++++--------------- 3 files changed, 16 insertions(+), 39 deletions(-) diff --git a/docs/includes/_content-tool.jade b/docs/includes/_content-tool.jade index 5a92cbd..1e108d7 100644 --- a/docs/includes/_content-tool.jade +++ b/docs/includes/_content-tool.jade @@ -3,29 +3,6 @@ section#fallback-tools h2 Fallback Tools section#box-sizing h3 box-sizing - +markupify({ - "name": "box-sizing" - , "description": "Alters the CSS box model used to calculate width and height." - , "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing" - , "syntax": ".box-sizing(@box);" - , "params": [ - { - "name": "@box" - , "description": "the way the box is sized" - , "values": [ - { - "value": "content-box" - , "description": "`width` and `height` properties measured include only the content" - , "default": true - } - , { - "value": "border-box" - , "description": "`width` and `height` properties measured include padding and border as well as content" - } - ] - } - ] - }, {list:'docs-c-Api'}) pre.docs-pre. .box-sizing(@box: content-box) { -webkit-box-sizing: @box; diff --git a/docs/includes/_data.jade b/docs/includes/_data.jade index f1b7f28..bc48d77 100644 --- a/docs/includes/_data.jade +++ b/docs/includes/_data.jade @@ -122,7 +122,7 @@ mixin doctoc(args) if item.sub && depth > 0 +doctoc({pages: item.sub, depth: depth-1}) -mixin markupify(thing, classes) +//- mixin markupify(thing, classes) - classes = classes || {} if typeof thing === 'object' if Array.isArray(thing) diff --git a/docs/styles/docs.less b/docs/styles/docs.less index bdf62e6..3b145cc 100644 --- a/docs/styles/docs.less +++ b/docs/styles/docs.less @@ -52,21 +52,21 @@ } -.docs-c-Api { - dt, - dd { - display: inline; - } - dt { - padding-right: 1rem; - font-weight:700; - } - dd::after { - content: ''; - display:block; - clear:both; - } -} +// .docs-c-Api { +// dt, +// dd { +// display: inline; +// } +// dt { +// padding-right: 1rem; +// font-weight:700; +// } +// dd::after { +// content: ''; +// display:block; +// clear:both; +// } +// } .docs-_fragid { From 78c656628b9cded57ba93aa544fb4474bae6f8fe Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Tue, 5 Jul 2016 09:55:35 -0400 Subject: [PATCH 05/53] refine preformatted examples --- docs/includes/_content-tool.jade | 7 +++---- docs/styles/docs.less | 3 +++ docs/tool.jade | 4 ++-- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/docs/includes/_content-tool.jade b/docs/includes/_content-tool.jade index 1e108d7..3775ab9 100644 --- a/docs/includes/_content-tool.jade +++ b/docs/includes/_content-tool.jade @@ -4,10 +4,9 @@ section#fallback-tools section#box-sizing h3 box-sizing pre.docs-pre. - .box-sizing(@box: content-box) { - -webkit-box-sizing: @box; - -moz-box-sizing: @box; - box-sizing: @box; + @import (reference) url('__tool.fallback.box-sizing.less'); + .your-class { + .box-sizing([#[strong content-box] | border-box]?); } section#flexbox-tools h3 The Flexbox Tools diff --git a/docs/styles/docs.less b/docs/styles/docs.less index 3b145cc..63dacf3 100644 --- a/docs/styles/docs.less +++ b/docs/styles/docs.less @@ -9,6 +9,7 @@ \*================================*/ @import (reference) url('../../src/__settings.less'); @import (reference) url('../../src/__tool.module.borders.less'); +@import (reference) url('../../src/__tool.module.delims.less'); // Stylesheet for Xmeter documentation files. @@ -26,6 +27,8 @@ color: #ccc; border-radius: 0.25rem; u { color: #6c6; } // override bad contrast ratio + strong { color: #eee; } + var { .guillemets-single(); } } .docs-pre, .docs-figure { diff --git a/docs/tool.jade b/docs/tool.jade index 0e3abae..a471bfe 100644 --- a/docs/tool.jade +++ b/docs/tool.jade @@ -11,6 +11,6 @@ block append mainIntro Tools are mixins and/or functions in the codebase that are used in development. These rules don’t output any CSS, but they do make writing CSS a lot easier by encapsulating reusable sets of property declarations. - #[a(href="#fallback-tools") Fallback Tools] are simply mixins that address + #[a(href="#fallback-tools") Fallback Tools] are simply mixins that address browser vendor prefixes for CSS properties and values, - whereas #[a(href="#module-tools") Module Tools] combine properties commonly used together. + whereas #[a(href="#module-tools") Module Tools] combine properties commonly used together. From 346de8a33f054335ff6c37e43dc3e6624fea4f95 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Tue, 5 Jul 2016 12:11:43 -0400 Subject: [PATCH 06/53] add example usage syntax --- docs/includes/_content-tool.jade | 75 ++++++++++++++++++++++++++- docs/styles/docs.less | 1 - src/__tool.fallback.column-width.less | 2 +- 3 files changed, 74 insertions(+), 4 deletions(-) diff --git a/docs/includes/_content-tool.jade b/docs/includes/_content-tool.jade index 3775ab9..22b7843 100644 --- a/docs/includes/_content-tool.jade +++ b/docs/includes/_content-tool.jade @@ -4,33 +4,104 @@ section#fallback-tools section#box-sizing h3 box-sizing pre.docs-pre. - @import (reference) url('__tool.fallback.box-sizing.less'); + @import (reference) url('/node_modules/xmeter/src/__tool.fallback.box-sizing.less'); .your-class { - .box-sizing([#[strong content-box] | border-box]?); + .box-sizing([content-box | border-box]:#[strong content-box]); } section#flexbox-tools h3 The Flexbox Tools section#transform h3 transform + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.fallback.transform.less'); + .your-class { + .transform(#[var @transform-list]:#[strong none]); + } section#transform-origin h3 transform-origin + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.fallback.transform-origin.less'); + .your-class { + .transform-origin(#[var @point]:(#[strong 50% 50% 0])); + } section#column-count h3 column-count + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.fallback.column-count.less'); + .your-class { + .column-count(#[var @integer]:#[strong auto]); + } section#column-width h3 column-width + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.fallback.column-width.less'); + .your-class { + .column-width(#[var @length]:#[strong auto]); + } section#filter h3 filter + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.fallback.filter.less'); + .your-class { + .column-width(#[var @filter-function-list]:#[strong none]); + } section#module-tools h2 Module Tools section#borders h3 borders + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.module.borders.less'); + .your-class { + .border-vert([top | bot | topbot | all]; #[var @length:#[strong 0]]); + } section#border-radius h3 border-radius + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.module.border-radius.less'); + .your-class { + .border-left-radius(#[var @length]:#[strong 0]); + .border-right-radius(#[var @length]:#[strong 0]); + .border-top-radius(#[var @length]:#[strong 0]); + .border-bottom-radius(#[var @length]:#[strong 0]); + } section#font-size h3 font-size + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.module.fontsize.less'); + .your-module { + .font-size-mod(#[var @number]:#[strong 1]); + .your-element { + .font-size-el(#[var @number]:#[strong 1]; #[var @integer]:#[strong 1]; #[var @number]:#[strong @g-line_height]); + } + } section#vertspacing h3 vertspacing + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.module.vertspacing.less'); + .your-module { + .vertspacing(#[var @length]:#[strong @g-vru]); + } section#delims h3 delims + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.module.delims.less'); + .your-class { + .delims(#[var @strings]:#[strong @none]); + .parens(); // ( ) + .brackets(); // [ ] + .braces(); // { } + .angles(); // < > + .apos(); // ' ' + .quot(); // " " + .quotes-single(); // ‘ ’ + .quotes-double(); // “ ” + .guillemets-single(); // ‹ › + .guillemets-double(); // « » + } section#sprite h3 sprite + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.module.delims.less'); + .your-class { + .sprite([horizontal | vertical]; #[var @integer]; #[var @length]; #[var @length]); + } diff --git a/docs/styles/docs.less b/docs/styles/docs.less index 63dacf3..08f8945 100644 --- a/docs/styles/docs.less +++ b/docs/styles/docs.less @@ -28,7 +28,6 @@ border-radius: 0.25rem; u { color: #6c6; } // override bad contrast ratio strong { color: #eee; } - var { .guillemets-single(); } } .docs-pre, .docs-figure { diff --git a/src/__tool.fallback.column-width.less b/src/__tool.fallback.column-width.less index 401a84c..3c5fb50 100644 --- a/src/__tool.fallback.column-width.less +++ b/src/__tool.fallback.column-width.less @@ -7,7 +7,7 @@ // Sets the width of columns of text. // See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-width) for more info. // -// @n - a positive integer indicating the number of columns, or +// @n - a length indicating the optimal width of the columns, or // - auto (initial) - indicates the width of columns should be determined by the `column-count` property // ^author // : Chris Harvey From 7a087b305ff210c88f80d1da0debfc8a9bd5df8e Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Wed, 6 Jul 2016 21:50:04 -0400 Subject: [PATCH 07/53] separate content-tool into partials --- docs/includes/_content-tool.jade | 107 ------------------ docs/includes/_data.jade | 4 +- .../_docs.tool.fallback.box-sizing.jade | 9 ++ .../_docs.tool.fallback.column-count.jade | 9 ++ .../_docs.tool.fallback.column-width.jade | 9 ++ docs/includes/_docs.tool.fallback.filter.jade | 9 ++ .../_docs.tool.fallback.flexbox-tools.jade | 4 + .../_docs.tool.fallback.transform-origin.jade | 9 ++ .../_docs.tool.fallback.transform.jade | 9 ++ .../_docs.tool.module.border-radius.jade | 12 ++ docs/includes/_docs.tool.module.borders.jade | 9 ++ docs/includes/_docs.tool.module.delims.jade | 19 ++++ .../_docs.tool.module.font-sizing-tools.jade | 12 ++ docs/includes/_docs.tool.module.sprite.jade | 9 ++ .../_docs.tool.module.vertspacing.jade | 9 ++ docs/tool.jade | 31 ++++- 16 files changed, 160 insertions(+), 110 deletions(-) delete mode 100644 docs/includes/_content-tool.jade create mode 100644 docs/includes/_docs.tool.fallback.box-sizing.jade create mode 100644 docs/includes/_docs.tool.fallback.column-count.jade create mode 100644 docs/includes/_docs.tool.fallback.column-width.jade create mode 100644 docs/includes/_docs.tool.fallback.filter.jade create mode 100644 docs/includes/_docs.tool.fallback.flexbox-tools.jade create mode 100644 docs/includes/_docs.tool.fallback.transform-origin.jade create mode 100644 docs/includes/_docs.tool.fallback.transform.jade create mode 100644 docs/includes/_docs.tool.module.border-radius.jade create mode 100644 docs/includes/_docs.tool.module.borders.jade create mode 100644 docs/includes/_docs.tool.module.delims.jade create mode 100644 docs/includes/_docs.tool.module.font-sizing-tools.jade create mode 100644 docs/includes/_docs.tool.module.sprite.jade create mode 100644 docs/includes/_docs.tool.module.vertspacing.jade diff --git a/docs/includes/_content-tool.jade b/docs/includes/_content-tool.jade deleted file mode 100644 index 22b7843..0000000 --- a/docs/includes/_content-tool.jade +++ /dev/null @@ -1,107 +0,0 @@ -- var classname = classname || {} -section#fallback-tools - h2 Fallback Tools - section#box-sizing - h3 box-sizing - pre.docs-pre. - @import (reference) url('/node_modules/xmeter/src/__tool.fallback.box-sizing.less'); - .your-class { - .box-sizing([content-box | border-box]:#[strong content-box]); - } - section#flexbox-tools - h3 The Flexbox Tools - section#transform - h3 transform - pre.docs-pre. - @import (reference) url('/node_modules/xmeter/src/__tool.fallback.transform.less'); - .your-class { - .transform(#[var @transform-list]:#[strong none]); - } - section#transform-origin - h3 transform-origin - pre.docs-pre. - @import (reference) url('/node_modules/xmeter/src/__tool.fallback.transform-origin.less'); - .your-class { - .transform-origin(#[var @point]:(#[strong 50% 50% 0])); - } - section#column-count - h3 column-count - pre.docs-pre. - @import (reference) url('/node_modules/xmeter/src/__tool.fallback.column-count.less'); - .your-class { - .column-count(#[var @integer]:#[strong auto]); - } - section#column-width - h3 column-width - pre.docs-pre. - @import (reference) url('/node_modules/xmeter/src/__tool.fallback.column-width.less'); - .your-class { - .column-width(#[var @length]:#[strong auto]); - } - section#filter - h3 filter - pre.docs-pre. - @import (reference) url('/node_modules/xmeter/src/__tool.fallback.filter.less'); - .your-class { - .column-width(#[var @filter-function-list]:#[strong none]); - } -section#module-tools - h2 Module Tools - section#borders - h3 borders - pre.docs-pre. - @import (reference) url('/node_modules/xmeter/src/__tool.module.borders.less'); - .your-class { - .border-vert([top | bot | topbot | all]; #[var @length:#[strong 0]]); - } - section#border-radius - h3 border-radius - pre.docs-pre. - @import (reference) url('/node_modules/xmeter/src/__tool.module.border-radius.less'); - .your-class { - .border-left-radius(#[var @length]:#[strong 0]); - .border-right-radius(#[var @length]:#[strong 0]); - .border-top-radius(#[var @length]:#[strong 0]); - .border-bottom-radius(#[var @length]:#[strong 0]); - } - section#font-size - h3 font-size - pre.docs-pre. - @import (reference) url('/node_modules/xmeter/src/__tool.module.fontsize.less'); - .your-module { - .font-size-mod(#[var @number]:#[strong 1]); - .your-element { - .font-size-el(#[var @number]:#[strong 1]; #[var @integer]:#[strong 1]; #[var @number]:#[strong @g-line_height]); - } - } - section#vertspacing - h3 vertspacing - pre.docs-pre. - @import (reference) url('/node_modules/xmeter/src/__tool.module.vertspacing.less'); - .your-module { - .vertspacing(#[var @length]:#[strong @g-vru]); - } - section#delims - h3 delims - pre.docs-pre. - @import (reference) url('/node_modules/xmeter/src/__tool.module.delims.less'); - .your-class { - .delims(#[var @strings]:#[strong @none]); - .parens(); // ( ) - .brackets(); // [ ] - .braces(); // { } - .angles(); // < > - .apos(); // ' ' - .quot(); // " " - .quotes-single(); // ‘ ’ - .quotes-double(); // “ ” - .guillemets-single(); // ‹ › - .guillemets-double(); // « » - } - section#sprite - h3 sprite - pre.docs-pre. - @import (reference) url('/node_modules/xmeter/src/__tool.module.delims.less'); - .your-class { - .sprite([horizontal | vertical]; #[var @integer]; #[var @length]; #[var @length]); - } diff --git a/docs/includes/_data.jade b/docs/includes/_data.jade index c740e8f..93dff0c 100644 --- a/docs/includes/_data.jade +++ b/docs/includes/_data.jade @@ -18,10 +18,10 @@ , { name: 'column-count' , url: 'tool.html#column-count' } , { name: 'column-width' , url: 'tool.html#column-width' } , { name: 'filter' , url: 'tool.html#filter' } + , { name: 'vertspacing' , url: 'tool.html#vertspacing' } , { name: 'borders' , url: 'tool.html#borders' } , { name: 'border-radius' , url: 'tool.html#border-radius' } - , { name: 'font-size' , url: 'tool.html#font-size' } - , { name: 'vertspacing' , url: 'tool.html#vertspacing' } + , { name: 'Font Sizing Tools' , url: 'tool.html#font-sizing-tools' } , { name: 'delims' , url: 'tool.html#delims' } , { name: 'sprite' , url: 'tool.html#sprite' } ] diff --git a/docs/includes/_docs.tool.fallback.box-sizing.jade b/docs/includes/_docs.tool.fallback.box-sizing.jade new file mode 100644 index 0000000..cf535c4 --- /dev/null +++ b/docs/includes/_docs.tool.fallback.box-sizing.jade @@ -0,0 +1,9 @@ +mixin docs_boxSizing(classname) + - var classname = classname || {} + section#box-sizing + h3 box-sizing + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.fallback.box-sizing.less'); + .your-class { + .box-sizing([content-box | border-box]:#[strong content-box]); + } diff --git a/docs/includes/_docs.tool.fallback.column-count.jade b/docs/includes/_docs.tool.fallback.column-count.jade new file mode 100644 index 0000000..173ca5f --- /dev/null +++ b/docs/includes/_docs.tool.fallback.column-count.jade @@ -0,0 +1,9 @@ +mixin docs_columnCount(classname) + - var classname = classname || {} + section#column-count + h3 column-count + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.fallback.column-count.less'); + .your-class { + .column-count(#[var @integer]:#[strong auto]); + } diff --git a/docs/includes/_docs.tool.fallback.column-width.jade b/docs/includes/_docs.tool.fallback.column-width.jade new file mode 100644 index 0000000..762e076 --- /dev/null +++ b/docs/includes/_docs.tool.fallback.column-width.jade @@ -0,0 +1,9 @@ +mixin docs_columnWidth(classname) + - var classname = classname || {} + section#column-width + h3 column-width + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.fallback.column-width.less'); + .your-class { + .column-width(#[var @length]:#[strong auto]); + } diff --git a/docs/includes/_docs.tool.fallback.filter.jade b/docs/includes/_docs.tool.fallback.filter.jade new file mode 100644 index 0000000..97122e8 --- /dev/null +++ b/docs/includes/_docs.tool.fallback.filter.jade @@ -0,0 +1,9 @@ +mixin docs_filter(classname) + - var classname = classname || {} + section#filter + h3 filter + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.fallback.filter.less'); + .your-class { + .column-width(#[var @filter-function-list]:#[strong none]); + } diff --git a/docs/includes/_docs.tool.fallback.flexbox-tools.jade b/docs/includes/_docs.tool.fallback.flexbox-tools.jade new file mode 100644 index 0000000..3bbbc2a --- /dev/null +++ b/docs/includes/_docs.tool.fallback.flexbox-tools.jade @@ -0,0 +1,4 @@ +mixin docs_flexboxTools(classname) + - var classname = classname || {} + section#flexbox-tools + h3 The Flexbox Tools diff --git a/docs/includes/_docs.tool.fallback.transform-origin.jade b/docs/includes/_docs.tool.fallback.transform-origin.jade new file mode 100644 index 0000000..36aa45c --- /dev/null +++ b/docs/includes/_docs.tool.fallback.transform-origin.jade @@ -0,0 +1,9 @@ +mixin docs_transformOrigin(classname) + - var classname = classname || {} + section#transform-origin + h3 transform-origin + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.fallback.transform-origin.less'); + .your-class { + .transform-origin(#[var @point]:(#[strong 50% 50% 0])); + } diff --git a/docs/includes/_docs.tool.fallback.transform.jade b/docs/includes/_docs.tool.fallback.transform.jade new file mode 100644 index 0000000..3440d12 --- /dev/null +++ b/docs/includes/_docs.tool.fallback.transform.jade @@ -0,0 +1,9 @@ +mixin docs_transform(classname) + - var classname = classname || {} + section#transform + h3 transform + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.fallback.transform.less'); + .your-class { + .transform(#[var @transform-list]:#[strong none]); + } diff --git a/docs/includes/_docs.tool.module.border-radius.jade b/docs/includes/_docs.tool.module.border-radius.jade new file mode 100644 index 0000000..71f83d4 --- /dev/null +++ b/docs/includes/_docs.tool.module.border-radius.jade @@ -0,0 +1,12 @@ +mixin docs_borderRadius(classname) + - var classname = classname || {} + section#border-radius + h3 border-radius + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.module.border-radius.less'); + .your-class { + .border-left-radius(#[var @length]:#[strong 0]); + .border-right-radius(#[var @length]:#[strong 0]); + .border-top-radius(#[var @length]:#[strong 0]); + .border-bottom-radius(#[var @length]:#[strong 0]); + } diff --git a/docs/includes/_docs.tool.module.borders.jade b/docs/includes/_docs.tool.module.borders.jade new file mode 100644 index 0000000..c5850a2 --- /dev/null +++ b/docs/includes/_docs.tool.module.borders.jade @@ -0,0 +1,9 @@ +mixin docs_borders(classname) + - var classname = classname || {} + section#borders + h3 borders + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.module.borders.less'); + .your-class { + .border-vert([top | bot | topbot | all]; #[var @length:#[strong 0]]); + } diff --git a/docs/includes/_docs.tool.module.delims.jade b/docs/includes/_docs.tool.module.delims.jade new file mode 100644 index 0000000..73571ef --- /dev/null +++ b/docs/includes/_docs.tool.module.delims.jade @@ -0,0 +1,19 @@ +mixin docs_delims(classname) + - var classname = classname || {} + section#delims + h3 delims + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.module.delims.less'); + .your-class { + .delims(#[var @strings]:#[strong @none]); + .parens(); // ( ) + .brackets(); // [ ] + .braces(); // { } + .angles(); // < > + .apos(); // ' ' + .quot(); // " " + .quotes-single(); // ‘ ’ + .quotes-double(); // “ ” + .guillemets-single(); // ‹ › + .guillemets-double(); // « » + } diff --git a/docs/includes/_docs.tool.module.font-sizing-tools.jade b/docs/includes/_docs.tool.module.font-sizing-tools.jade new file mode 100644 index 0000000..be382c4 --- /dev/null +++ b/docs/includes/_docs.tool.module.font-sizing-tools.jade @@ -0,0 +1,12 @@ +mixin docs_fontSizingTools(classname) + - var classname = classname || {} + section#font-sizing-tools + h3 Font Sizing Tools + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.module.fontsize.less'); + .your-module { + .font-size-mod(#[var @number]:#[strong 1]); + .your-element { + .font-size-el(#[var @number]:#[strong 1]; #[var @integer]:#[strong 1]; #[var @number]:#[strong @g-line_height]); + } + } diff --git a/docs/includes/_docs.tool.module.sprite.jade b/docs/includes/_docs.tool.module.sprite.jade new file mode 100644 index 0000000..36078c7 --- /dev/null +++ b/docs/includes/_docs.tool.module.sprite.jade @@ -0,0 +1,9 @@ +mixin docs_sprite(classname) + - var classname = classname || {} + section#sprite + h3 sprite + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.module.delims.less'); + .your-class { + .sprite([horizontal | vertical]; #[var @integer]; #[var @length]; #[var @length]); + } diff --git a/docs/includes/_docs.tool.module.vertspacing.jade b/docs/includes/_docs.tool.module.vertspacing.jade new file mode 100644 index 0000000..7c8c422 --- /dev/null +++ b/docs/includes/_docs.tool.module.vertspacing.jade @@ -0,0 +1,9 @@ +mixin docs_vertspacing(classname) + - var classname = classname || {} + section#vertspacing + h3 vertspacing + pre.docs-pre. + @import (reference) url('/node_modules/xmeter/src/__tool.module.vertspacing.less'); + .your-module { + .vertspacing(#[var @length]:#[strong @g-vru]); + } diff --git a/docs/tool.jade b/docs/tool.jade index a471bfe..63fd621 100644 --- a/docs/tool.jade +++ b/docs/tool.jade @@ -4,7 +4,36 @@ block append vars - var page = Xmeter.getPage('tool.html') block append main - include includes/_content-tool.jade + section#fallback-tools + h2 Fallback Tools + include includes/_docs.tool.fallback.box-sizing.jade + +docs_boxSizing(Xmeter.DOCS_CLASSES) + include includes/_docs.tool.fallback.flexbox-tools.jade + +docs_flexboxTools(Xmeter.DOCS_CLASSES) + include includes/_docs.tool.fallback.transform.jade + +docs_transform(Xmeter.DOCS_CLASSES) + include includes/_docs.tool.fallback.transform-origin.jade + +docs_transformOrigin(Xmeter.DOCS_CLASSES) + include includes/_docs.tool.fallback.column-count.jade + +docs_columnCount(Xmeter.DOCS_CLASSES) + include includes/_docs.tool.fallback.column-width.jade + +docs_columnWidth(Xmeter.DOCS_CLASSES) + include includes/_docs.tool.fallback.filter.jade + +docs_filter(Xmeter.DOCS_CLASSES) + section#module-tools + h2 Module Tools + include includes/_docs.tool.module.vertspacing.jade + +docs_vertspacing(Xmeter.DOCS_CLASSES) + include includes/_docs.tool.module.borders.jade + +docs_borders(Xmeter.DOCS_CLASSES) + include includes/_docs.tool.module.border-radius.jade + +docs_borderRadius(Xmeter.DOCS_CLASSES) + include includes/_docs.tool.module.font-sizing-tools.jade + +docs_fontSizingTools(Xmeter.DOCS_CLASSES) + include includes/_docs.tool.module.delims.jade + +docs_delims(Xmeter.DOCS_CLASSES) + include includes/_docs.tool.module.sprite.jade + +docs_sprite(Xmeter.DOCS_CLASSES) block append mainIntro p. From e4d2bdbd3181ca11eba1909751cb6e10f8aa3a73 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Wed, 6 Jul 2016 21:52:38 -0400 Subject: [PATCH 08/53] fix pre class --- docs/includes/_docs.tool.fallback.box-sizing.jade | 2 +- docs/includes/_docs.tool.fallback.column-count.jade | 2 +- docs/includes/_docs.tool.fallback.column-width.jade | 2 +- docs/includes/_docs.tool.fallback.filter.jade | 2 +- docs/includes/_docs.tool.fallback.transform-origin.jade | 2 +- docs/includes/_docs.tool.fallback.transform.jade | 2 +- docs/includes/_docs.tool.module.border-radius.jade | 2 +- docs/includes/_docs.tool.module.borders.jade | 2 +- docs/includes/_docs.tool.module.delims.jade | 2 +- docs/includes/_docs.tool.module.font-sizing-tools.jade | 2 +- docs/includes/_docs.tool.module.sprite.jade | 2 +- docs/includes/_docs.tool.module.vertspacing.jade | 2 +- 12 files changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/includes/_docs.tool.fallback.box-sizing.jade b/docs/includes/_docs.tool.fallback.box-sizing.jade index cf535c4..0bb53cb 100644 --- a/docs/includes/_docs.tool.fallback.box-sizing.jade +++ b/docs/includes/_docs.tool.fallback.box-sizing.jade @@ -2,7 +2,7 @@ mixin docs_boxSizing(classname) - var classname = classname || {} section#box-sizing h3 box-sizing - pre.docs-pre. + pre(class=classname.pre). @import (reference) url('/node_modules/xmeter/src/__tool.fallback.box-sizing.less'); .your-class { .box-sizing([content-box | border-box]:#[strong content-box]); diff --git a/docs/includes/_docs.tool.fallback.column-count.jade b/docs/includes/_docs.tool.fallback.column-count.jade index 173ca5f..1830285 100644 --- a/docs/includes/_docs.tool.fallback.column-count.jade +++ b/docs/includes/_docs.tool.fallback.column-count.jade @@ -2,7 +2,7 @@ mixin docs_columnCount(classname) - var classname = classname || {} section#column-count h3 column-count - pre.docs-pre. + pre(class=classname.pre). @import (reference) url('/node_modules/xmeter/src/__tool.fallback.column-count.less'); .your-class { .column-count(#[var @integer]:#[strong auto]); diff --git a/docs/includes/_docs.tool.fallback.column-width.jade b/docs/includes/_docs.tool.fallback.column-width.jade index 762e076..2eafae1 100644 --- a/docs/includes/_docs.tool.fallback.column-width.jade +++ b/docs/includes/_docs.tool.fallback.column-width.jade @@ -2,7 +2,7 @@ mixin docs_columnWidth(classname) - var classname = classname || {} section#column-width h3 column-width - pre.docs-pre. + pre(class=classname.pre). @import (reference) url('/node_modules/xmeter/src/__tool.fallback.column-width.less'); .your-class { .column-width(#[var @length]:#[strong auto]); diff --git a/docs/includes/_docs.tool.fallback.filter.jade b/docs/includes/_docs.tool.fallback.filter.jade index 97122e8..dd05efa 100644 --- a/docs/includes/_docs.tool.fallback.filter.jade +++ b/docs/includes/_docs.tool.fallback.filter.jade @@ -2,7 +2,7 @@ mixin docs_filter(classname) - var classname = classname || {} section#filter h3 filter - pre.docs-pre. + pre(class=classname.pre). @import (reference) url('/node_modules/xmeter/src/__tool.fallback.filter.less'); .your-class { .column-width(#[var @filter-function-list]:#[strong none]); diff --git a/docs/includes/_docs.tool.fallback.transform-origin.jade b/docs/includes/_docs.tool.fallback.transform-origin.jade index 36aa45c..2a840d2 100644 --- a/docs/includes/_docs.tool.fallback.transform-origin.jade +++ b/docs/includes/_docs.tool.fallback.transform-origin.jade @@ -2,7 +2,7 @@ mixin docs_transformOrigin(classname) - var classname = classname || {} section#transform-origin h3 transform-origin - pre.docs-pre. + pre(class=classname.pre). @import (reference) url('/node_modules/xmeter/src/__tool.fallback.transform-origin.less'); .your-class { .transform-origin(#[var @point]:(#[strong 50% 50% 0])); diff --git a/docs/includes/_docs.tool.fallback.transform.jade b/docs/includes/_docs.tool.fallback.transform.jade index 3440d12..541b3d0 100644 --- a/docs/includes/_docs.tool.fallback.transform.jade +++ b/docs/includes/_docs.tool.fallback.transform.jade @@ -2,7 +2,7 @@ mixin docs_transform(classname) - var classname = classname || {} section#transform h3 transform - pre.docs-pre. + pre(class=classname.pre). @import (reference) url('/node_modules/xmeter/src/__tool.fallback.transform.less'); .your-class { .transform(#[var @transform-list]:#[strong none]); diff --git a/docs/includes/_docs.tool.module.border-radius.jade b/docs/includes/_docs.tool.module.border-radius.jade index 71f83d4..0cdbbd3 100644 --- a/docs/includes/_docs.tool.module.border-radius.jade +++ b/docs/includes/_docs.tool.module.border-radius.jade @@ -2,7 +2,7 @@ mixin docs_borderRadius(classname) - var classname = classname || {} section#border-radius h3 border-radius - pre.docs-pre. + pre(class=classname.pre). @import (reference) url('/node_modules/xmeter/src/__tool.module.border-radius.less'); .your-class { .border-left-radius(#[var @length]:#[strong 0]); diff --git a/docs/includes/_docs.tool.module.borders.jade b/docs/includes/_docs.tool.module.borders.jade index c5850a2..1562652 100644 --- a/docs/includes/_docs.tool.module.borders.jade +++ b/docs/includes/_docs.tool.module.borders.jade @@ -2,7 +2,7 @@ mixin docs_borders(classname) - var classname = classname || {} section#borders h3 borders - pre.docs-pre. + pre(class=classname.pre). @import (reference) url('/node_modules/xmeter/src/__tool.module.borders.less'); .your-class { .border-vert([top | bot | topbot | all]; #[var @length:#[strong 0]]); diff --git a/docs/includes/_docs.tool.module.delims.jade b/docs/includes/_docs.tool.module.delims.jade index 73571ef..756ed96 100644 --- a/docs/includes/_docs.tool.module.delims.jade +++ b/docs/includes/_docs.tool.module.delims.jade @@ -2,7 +2,7 @@ mixin docs_delims(classname) - var classname = classname || {} section#delims h3 delims - pre.docs-pre. + pre(class=classname.pre). @import (reference) url('/node_modules/xmeter/src/__tool.module.delims.less'); .your-class { .delims(#[var @strings]:#[strong @none]); diff --git a/docs/includes/_docs.tool.module.font-sizing-tools.jade b/docs/includes/_docs.tool.module.font-sizing-tools.jade index be382c4..9a30848 100644 --- a/docs/includes/_docs.tool.module.font-sizing-tools.jade +++ b/docs/includes/_docs.tool.module.font-sizing-tools.jade @@ -2,7 +2,7 @@ mixin docs_fontSizingTools(classname) - var classname = classname || {} section#font-sizing-tools h3 Font Sizing Tools - pre.docs-pre. + pre(class=classname.pre). @import (reference) url('/node_modules/xmeter/src/__tool.module.fontsize.less'); .your-module { .font-size-mod(#[var @number]:#[strong 1]); diff --git a/docs/includes/_docs.tool.module.sprite.jade b/docs/includes/_docs.tool.module.sprite.jade index 36078c7..85c3f47 100644 --- a/docs/includes/_docs.tool.module.sprite.jade +++ b/docs/includes/_docs.tool.module.sprite.jade @@ -2,7 +2,7 @@ mixin docs_sprite(classname) - var classname = classname || {} section#sprite h3 sprite - pre.docs-pre. + pre(class=classname.pre). @import (reference) url('/node_modules/xmeter/src/__tool.module.delims.less'); .your-class { .sprite([horizontal | vertical]; #[var @integer]; #[var @length]; #[var @length]); diff --git a/docs/includes/_docs.tool.module.vertspacing.jade b/docs/includes/_docs.tool.module.vertspacing.jade index 7c8c422..eaab15d 100644 --- a/docs/includes/_docs.tool.module.vertspacing.jade +++ b/docs/includes/_docs.tool.module.vertspacing.jade @@ -2,7 +2,7 @@ mixin docs_vertspacing(classname) - var classname = classname || {} section#vertspacing h3 vertspacing - pre.docs-pre. + pre(class=classname.pre). @import (reference) url('/node_modules/xmeter/src/__tool.module.vertspacing.less'); .your-module { .vertspacing(#[var @length]:#[strong @g-vru]); From 6a6ea463f4372294f2da9ca886e36062ead873ed Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Sat, 16 Jul 2016 20:58:58 -0400 Subject: [PATCH 09/53] convert tools docs to markdown --- docs/includes/_data.jade | 20 --- .../_docs.tool.fallback.box-sizing.jade | 9 - .../_docs.tool.fallback.column-count.jade | 9 - .../_docs.tool.fallback.column-width.jade | 9 - docs/includes/_docs.tool.fallback.filter.jade | 9 - .../_docs.tool.fallback.flexbox-tools.jade | 4 - .../_docs.tool.fallback.transform-origin.jade | 9 - .../_docs.tool.fallback.transform.jade | 9 - .../_docs.tool.module.border-radius.jade | 12 -- docs/includes/_docs.tool.module.borders.jade | 9 - docs/includes/_docs.tool.module.delims.jade | 19 --- .../_docs.tool.module.font-sizing-tools.jade | 12 -- docs/includes/_docs.tool.module.sprite.jade | 9 - .../_docs.tool.module.vertspacing.jade | 9 - docs/tool.jade | 45 ----- docs/tools.md | 156 ++++++++++++++++++ 16 files changed, 156 insertions(+), 193 deletions(-) delete mode 100644 docs/includes/_docs.tool.fallback.box-sizing.jade delete mode 100644 docs/includes/_docs.tool.fallback.column-count.jade delete mode 100644 docs/includes/_docs.tool.fallback.column-width.jade delete mode 100644 docs/includes/_docs.tool.fallback.filter.jade delete mode 100644 docs/includes/_docs.tool.fallback.flexbox-tools.jade delete mode 100644 docs/includes/_docs.tool.fallback.transform-origin.jade delete mode 100644 docs/includes/_docs.tool.fallback.transform.jade delete mode 100644 docs/includes/_docs.tool.module.border-radius.jade delete mode 100644 docs/includes/_docs.tool.module.borders.jade delete mode 100644 docs/includes/_docs.tool.module.delims.jade delete mode 100644 docs/includes/_docs.tool.module.font-sizing-tools.jade delete mode 100644 docs/includes/_docs.tool.module.sprite.jade delete mode 100644 docs/includes/_docs.tool.module.vertspacing.jade delete mode 100644 docs/tool.jade create mode 100644 docs/tools.md diff --git a/docs/includes/_data.jade b/docs/includes/_data.jade index 93dff0c..52c99d8 100644 --- a/docs/includes/_data.jade +++ b/docs/includes/_data.jade @@ -6,26 +6,6 @@ name: 'Pattern Library', url: 'index.html' , description: '' } - , { - name: 'Tools', url: 'tool.html' - , description: 'Functions and mixins used for development.' - , sub: [ - { name: 'Table of Contents' , url: 'tool.html#table-contents' } - , { name: 'box-sizing' , url: 'tool.html#box-sizing' } - , { name: 'The Flexbox Tools' , url: 'tool.html#flexbox-tools' } - , { name: 'transform' , url: 'tool.html#transform' } - , { name: 'transform-origin' , url: 'tool.html#transform-origin' } - , { name: 'column-count' , url: 'tool.html#column-count' } - , { name: 'column-width' , url: 'tool.html#column-width' } - , { name: 'filter' , url: 'tool.html#filter' } - , { name: 'vertspacing' , url: 'tool.html#vertspacing' } - , { name: 'borders' , url: 'tool.html#borders' } - , { name: 'border-radius' , url: 'tool.html#border-radius' } - , { name: 'Font Sizing Tools' , url: 'tool.html#font-sizing-tools' } - , { name: 'delims' , url: 'tool.html#delims' } - , { name: 'sprite' , url: 'tool.html#sprite' } - ] - } , { name: 'Visual Design', url: 'visual.html' , description: 'Color and font schemes, look-and-feel, overall mood and tone.' diff --git a/docs/includes/_docs.tool.fallback.box-sizing.jade b/docs/includes/_docs.tool.fallback.box-sizing.jade deleted file mode 100644 index 0bb53cb..0000000 --- a/docs/includes/_docs.tool.fallback.box-sizing.jade +++ /dev/null @@ -1,9 +0,0 @@ -mixin docs_boxSizing(classname) - - var classname = classname || {} - section#box-sizing - h3 box-sizing - pre(class=classname.pre). - @import (reference) url('/node_modules/xmeter/src/__tool.fallback.box-sizing.less'); - .your-class { - .box-sizing([content-box | border-box]:#[strong content-box]); - } diff --git a/docs/includes/_docs.tool.fallback.column-count.jade b/docs/includes/_docs.tool.fallback.column-count.jade deleted file mode 100644 index 1830285..0000000 --- a/docs/includes/_docs.tool.fallback.column-count.jade +++ /dev/null @@ -1,9 +0,0 @@ -mixin docs_columnCount(classname) - - var classname = classname || {} - section#column-count - h3 column-count - pre(class=classname.pre). - @import (reference) url('/node_modules/xmeter/src/__tool.fallback.column-count.less'); - .your-class { - .column-count(#[var @integer]:#[strong auto]); - } diff --git a/docs/includes/_docs.tool.fallback.column-width.jade b/docs/includes/_docs.tool.fallback.column-width.jade deleted file mode 100644 index 2eafae1..0000000 --- a/docs/includes/_docs.tool.fallback.column-width.jade +++ /dev/null @@ -1,9 +0,0 @@ -mixin docs_columnWidth(classname) - - var classname = classname || {} - section#column-width - h3 column-width - pre(class=classname.pre). - @import (reference) url('/node_modules/xmeter/src/__tool.fallback.column-width.less'); - .your-class { - .column-width(#[var @length]:#[strong auto]); - } diff --git a/docs/includes/_docs.tool.fallback.filter.jade b/docs/includes/_docs.tool.fallback.filter.jade deleted file mode 100644 index dd05efa..0000000 --- a/docs/includes/_docs.tool.fallback.filter.jade +++ /dev/null @@ -1,9 +0,0 @@ -mixin docs_filter(classname) - - var classname = classname || {} - section#filter - h3 filter - pre(class=classname.pre). - @import (reference) url('/node_modules/xmeter/src/__tool.fallback.filter.less'); - .your-class { - .column-width(#[var @filter-function-list]:#[strong none]); - } diff --git a/docs/includes/_docs.tool.fallback.flexbox-tools.jade b/docs/includes/_docs.tool.fallback.flexbox-tools.jade deleted file mode 100644 index 3bbbc2a..0000000 --- a/docs/includes/_docs.tool.fallback.flexbox-tools.jade +++ /dev/null @@ -1,4 +0,0 @@ -mixin docs_flexboxTools(classname) - - var classname = classname || {} - section#flexbox-tools - h3 The Flexbox Tools diff --git a/docs/includes/_docs.tool.fallback.transform-origin.jade b/docs/includes/_docs.tool.fallback.transform-origin.jade deleted file mode 100644 index 2a840d2..0000000 --- a/docs/includes/_docs.tool.fallback.transform-origin.jade +++ /dev/null @@ -1,9 +0,0 @@ -mixin docs_transformOrigin(classname) - - var classname = classname || {} - section#transform-origin - h3 transform-origin - pre(class=classname.pre). - @import (reference) url('/node_modules/xmeter/src/__tool.fallback.transform-origin.less'); - .your-class { - .transform-origin(#[var @point]:(#[strong 50% 50% 0])); - } diff --git a/docs/includes/_docs.tool.fallback.transform.jade b/docs/includes/_docs.tool.fallback.transform.jade deleted file mode 100644 index 541b3d0..0000000 --- a/docs/includes/_docs.tool.fallback.transform.jade +++ /dev/null @@ -1,9 +0,0 @@ -mixin docs_transform(classname) - - var classname = classname || {} - section#transform - h3 transform - pre(class=classname.pre). - @import (reference) url('/node_modules/xmeter/src/__tool.fallback.transform.less'); - .your-class { - .transform(#[var @transform-list]:#[strong none]); - } diff --git a/docs/includes/_docs.tool.module.border-radius.jade b/docs/includes/_docs.tool.module.border-radius.jade deleted file mode 100644 index 0cdbbd3..0000000 --- a/docs/includes/_docs.tool.module.border-radius.jade +++ /dev/null @@ -1,12 +0,0 @@ -mixin docs_borderRadius(classname) - - var classname = classname || {} - section#border-radius - h3 border-radius - pre(class=classname.pre). - @import (reference) url('/node_modules/xmeter/src/__tool.module.border-radius.less'); - .your-class { - .border-left-radius(#[var @length]:#[strong 0]); - .border-right-radius(#[var @length]:#[strong 0]); - .border-top-radius(#[var @length]:#[strong 0]); - .border-bottom-radius(#[var @length]:#[strong 0]); - } diff --git a/docs/includes/_docs.tool.module.borders.jade b/docs/includes/_docs.tool.module.borders.jade deleted file mode 100644 index 1562652..0000000 --- a/docs/includes/_docs.tool.module.borders.jade +++ /dev/null @@ -1,9 +0,0 @@ -mixin docs_borders(classname) - - var classname = classname || {} - section#borders - h3 borders - pre(class=classname.pre). - @import (reference) url('/node_modules/xmeter/src/__tool.module.borders.less'); - .your-class { - .border-vert([top | bot | topbot | all]; #[var @length:#[strong 0]]); - } diff --git a/docs/includes/_docs.tool.module.delims.jade b/docs/includes/_docs.tool.module.delims.jade deleted file mode 100644 index 756ed96..0000000 --- a/docs/includes/_docs.tool.module.delims.jade +++ /dev/null @@ -1,19 +0,0 @@ -mixin docs_delims(classname) - - var classname = classname || {} - section#delims - h3 delims - pre(class=classname.pre). - @import (reference) url('/node_modules/xmeter/src/__tool.module.delims.less'); - .your-class { - .delims(#[var @strings]:#[strong @none]); - .parens(); // ( ) - .brackets(); // [ ] - .braces(); // { } - .angles(); // < > - .apos(); // ' ' - .quot(); // " " - .quotes-single(); // ‘ ’ - .quotes-double(); // “ ” - .guillemets-single(); // ‹ › - .guillemets-double(); // « » - } diff --git a/docs/includes/_docs.tool.module.font-sizing-tools.jade b/docs/includes/_docs.tool.module.font-sizing-tools.jade deleted file mode 100644 index 9a30848..0000000 --- a/docs/includes/_docs.tool.module.font-sizing-tools.jade +++ /dev/null @@ -1,12 +0,0 @@ -mixin docs_fontSizingTools(classname) - - var classname = classname || {} - section#font-sizing-tools - h3 Font Sizing Tools - pre(class=classname.pre). - @import (reference) url('/node_modules/xmeter/src/__tool.module.fontsize.less'); - .your-module { - .font-size-mod(#[var @number]:#[strong 1]); - .your-element { - .font-size-el(#[var @number]:#[strong 1]; #[var @integer]:#[strong 1]; #[var @number]:#[strong @g-line_height]); - } - } diff --git a/docs/includes/_docs.tool.module.sprite.jade b/docs/includes/_docs.tool.module.sprite.jade deleted file mode 100644 index 85c3f47..0000000 --- a/docs/includes/_docs.tool.module.sprite.jade +++ /dev/null @@ -1,9 +0,0 @@ -mixin docs_sprite(classname) - - var classname = classname || {} - section#sprite - h3 sprite - pre(class=classname.pre). - @import (reference) url('/node_modules/xmeter/src/__tool.module.delims.less'); - .your-class { - .sprite([horizontal | vertical]; #[var @integer]; #[var @length]; #[var @length]); - } diff --git a/docs/includes/_docs.tool.module.vertspacing.jade b/docs/includes/_docs.tool.module.vertspacing.jade deleted file mode 100644 index eaab15d..0000000 --- a/docs/includes/_docs.tool.module.vertspacing.jade +++ /dev/null @@ -1,9 +0,0 @@ -mixin docs_vertspacing(classname) - - var classname = classname || {} - section#vertspacing - h3 vertspacing - pre(class=classname.pre). - @import (reference) url('/node_modules/xmeter/src/__tool.module.vertspacing.less'); - .your-module { - .vertspacing(#[var @length]:#[strong @g-vru]); - } diff --git a/docs/tool.jade b/docs/tool.jade deleted file mode 100644 index 63fd621..0000000 --- a/docs/tool.jade +++ /dev/null @@ -1,45 +0,0 @@ -extends _docs.tpl.jade - -block append vars - - var page = Xmeter.getPage('tool.html') - -block append main - section#fallback-tools - h2 Fallback Tools - include includes/_docs.tool.fallback.box-sizing.jade - +docs_boxSizing(Xmeter.DOCS_CLASSES) - include includes/_docs.tool.fallback.flexbox-tools.jade - +docs_flexboxTools(Xmeter.DOCS_CLASSES) - include includes/_docs.tool.fallback.transform.jade - +docs_transform(Xmeter.DOCS_CLASSES) - include includes/_docs.tool.fallback.transform-origin.jade - +docs_transformOrigin(Xmeter.DOCS_CLASSES) - include includes/_docs.tool.fallback.column-count.jade - +docs_columnCount(Xmeter.DOCS_CLASSES) - include includes/_docs.tool.fallback.column-width.jade - +docs_columnWidth(Xmeter.DOCS_CLASSES) - include includes/_docs.tool.fallback.filter.jade - +docs_filter(Xmeter.DOCS_CLASSES) - section#module-tools - h2 Module Tools - include includes/_docs.tool.module.vertspacing.jade - +docs_vertspacing(Xmeter.DOCS_CLASSES) - include includes/_docs.tool.module.borders.jade - +docs_borders(Xmeter.DOCS_CLASSES) - include includes/_docs.tool.module.border-radius.jade - +docs_borderRadius(Xmeter.DOCS_CLASSES) - include includes/_docs.tool.module.font-sizing-tools.jade - +docs_fontSizingTools(Xmeter.DOCS_CLASSES) - include includes/_docs.tool.module.delims.jade - +docs_delims(Xmeter.DOCS_CLASSES) - include includes/_docs.tool.module.sprite.jade - +docs_sprite(Xmeter.DOCS_CLASSES) - -block append mainIntro - p. - Tools are mixins and/or functions in the codebase that are used in development. - These rules don’t output any CSS, but they do make writing CSS a lot easier - by encapsulating reusable sets of property declarations. - #[a(href="#fallback-tools") Fallback Tools] are simply mixins that address - browser vendor prefixes for CSS properties and values, - whereas #[a(href="#module-tools") Module Tools] combine properties commonly used together. diff --git a/docs/tools.md b/docs/tools.md new file mode 100644 index 0000000..f656e78 --- /dev/null +++ b/docs/tools.md @@ -0,0 +1,156 @@ +# Xmeter — Tools + +Functions and mixins used for development. + +Tools are mixins and/or functions in the codebase that are used in development. +These rules don’t output any CSS, but they do make writing CSS a lot easier +by encapsulating reusable sets of property declarations. +[Fallback Tools](#fallback-tools) are simply mixins that address +browser vendor prefixes for CSS properties and values, +whereas [Module Tools](#module-tools) combine properties commonly used together. + +## Table of Contents + +1. [Table of Contents](#table-contents) +- [Fallback Tools](#fallback-tools) + 1. [box-sizing](#box-sizing) + - [The Flexbox Tools](#flexbox-tools) + - [transform](#transform) + - [transform-origin](#transform-origin) + - [column-count](#column-count) + - [column-width](#column-width) + - [filter](#filter) +- [Module Tools](#module-tools) + 1. [vertspacing](#vertspacing) + - [borders](#borders) + - [border-radius](#border-radius) + - [Font Sizing Tools](#font-sizing-tools) + - [delims](#delims) + - [sprite](#sprite) + +## Fallback Tools + +### box-sizing +```less +@import (reference) url('/node_modules/xmeter/src/__tool.fallback.box-sizing.less'); +.your-class { + .box-sizing([!content-box | border-box]?); +} +``` + +### The Flexbox Tools +```less +.content { --status: 'coming soon...'; } +``` + +### transform +```less +@import (reference) url('/node_modules/xmeter/src/__tool.fallback.transform.less'); +.your-class { + .transform([!none | ]?); +} +``` + +### transform-origin +```less +@import (reference) url('/node_modules/xmeter/src/__tool.fallback.transform-origin.less'); +.your-class { + .transform-origin(?:[50% 50% 0]); +} +// where: +// == | [ [ && ] ? ] +// == | | left | center | right | top | bottom +// == [ | | left | center | right ]:50% +// == [ | | top | center | bottom]:50% +// == []:0 +``` + +### column-count +```less +@import (reference) url('/node_modules/xmeter/src/__tool.fallback.column-count.less'); +.your-class { + .column-count([!auto | ]?); +} +``` + +### column-width +```less +@import (reference) url('/node_modules/xmeter/src/__tool.fallback.column-width.less'); +.your-class { + .column-width([!auto | ]?); +} +``` + +### filter +```less +@import (reference) url('/node_modules/xmeter/src/__tool.fallback.filter.less'); +.your-class { + .column-width([!none | ]?); +} +``` + +## Module Tools + +### vertspacing +```less +@import (reference) url('/node_modules/xmeter/src/__tool.module.vertspacing.less'); +.your-module { + .vertspacing(?:@g-vru); +} +``` + +### borders +```less +@import (reference) url('/node_modules/xmeter/src/__tool.module.borders.less'); +.your-class { + .border-vert([top | bot | topbot | all]; ?:0); +} +``` + +### border-radius +```less +@import (reference) url('/node_modules/xmeter/src/__tool.module.border-radius.less'); +.your-class { + .border-left-radius(?:0); + .border-right-radius(?:0); + .border-top-radius(?:0); + .border-bottom-radius(?:0); +} +``` + +### Font Sizing Tools +```less +@import (reference) url('/node_modules/xmeter/src/__tool.module.fontsize.less'); +.your-module { + .font-size-mod(?:1); + .your-element { + .font-size-el(?:1; ?:1; ?:@g-line_height); + } +} +``` + +### delims +```less +@import (reference) url('/node_modules/xmeter/src/__tool.module.delims.less'); +.your-class { + .delims([!none | [ ]+]?); + .parens(); // ( ) + .brackets(); // [ ] + .braces(); // { } + .angles(); // < > + .apos(); // ' ' + .quot(); // " " + .quotes-single(); // ‘ ’ + .quotes-double(); // “ ” + .guillemets-single(); // ‹ › + .guillemets-double(); // « » +} +``` + +### sprite +```less +@import (reference) url('/node_modules/xmeter/src/__tool.module.delims.less'); +.your-class { + .sprite([horizontal | vertical]; ; ; ); +} +``` From 97321d213f4eb7dcdff2ef7ee3f7a4eb978eb0c2 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Fri, 22 Jul 2016 12:09:28 -0400 Subject: [PATCH 10/53] refactor column-width param --- src/__fallback.column-width.less | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/__fallback.column-width.less b/src/__fallback.column-width.less index 6e06b9b..12c4bd2 100644 --- a/src/__fallback.column-width.less +++ b/src/__fallback.column-width.less @@ -7,14 +7,14 @@ // Sets the width of columns of text. // See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-width) for more info. // -// @n - a length indicating the optimal width of the columns, or -// - auto (initial) - indicates the width of columns should be determined by the `column-count` property +// @width - a length indicating the optimal width of the columns, or +// - auto (initial) - indicates the width of columns should be determined by the `column-count` property // ^author // : Chris Harvey // ^updated // : 2016-02-08 -.column-width(@n: auto) { - -webkit-column-width: @n; - -moz-column-width: @n; - column-width: @n; +.column-width(@width: auto) { + -webkit-column-width: @width; + -moz-column-width: @width; + column-width: @width; } From 08d1753c494c84eab56bfe370746baf056126f54 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Fri, 22 Jul 2016 12:10:41 -0400 Subject: [PATCH 11/53] update Xmeter.getPage() --- docs/includes/_data.jade | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/includes/_data.jade b/docs/includes/_data.jade index 11cc208..a1fab21 100644 --- a/docs/includes/_data.jade +++ b/docs/includes/_data.jade @@ -75,7 +75,7 @@ , form : 'docs-form' } Xmeter.getPage = function getPage(url0) { - return Xmeter.PAGES.find(function (item) { return item.url === url0 }) || {} + return Xmeter.PAGES.find(function (item) { return item.url === url0 }) } return Xmeter })() From 16954c35c0766641b4d4a700638964323ea1ff8b Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Fri, 22 Jul 2016 13:51:08 -0400 Subject: [PATCH 12/53] move Xmeter class to own file --- docs/includes/_data.jade | 82 +------------------------- docs/includes/class/_Xmeter.class.jade | 81 +++++++++++++++++++++++++ 2 files changed, 82 insertions(+), 81 deletions(-) create mode 100644 docs/includes/class/_Xmeter.class.jade diff --git a/docs/includes/_data.jade b/docs/includes/_data.jade index a1fab21..642ce42 100644 --- a/docs/includes/_data.jade +++ b/docs/includes/_data.jade @@ -1,84 +1,4 @@ -- - var Xmeter = (function () { - function Xmeter() {} - Xmeter.PAGES = [ - { - name: 'Pattern Library', url: 'index.html' - , description: '' - } - , { - name: 'Visual Design', url: 'visual.html' - , description: 'Color and font schemes, look-and-feel, overall mood and tone.' - , is_hidden: true - } - , { - name: 'Base Typography', url: 'base.html' - , description: 'Bare, unstyled HTML elements. No classes.' - , sub: [ - { name: 'Table of Contents' , url: 'base.html#table-contents' } - , { name: 'Headings & Paragraphs', url: 'base.html#headings-paragraphs' } - , { name: 'Lists' , url: 'base.html#lists' } - , { name: 'Tables' , url: 'base.html#tables' } - , { - name: 'Text-Level Elements', url: '#text-level-elements' - , sub: [ - { name: 'Links' , url: 'base.html#links' } - , { name: 'Stress' , url: 'base.html#stress' } - , { name: 'Documentation', url: 'base.html#documentation' } - , { name: 'Data' , url: 'base.html#data' } - ] - } - , { name: 'Embedded Elements' , url: 'base.html#embedded-elements' } - , { name: 'Forms' , url: 'base.html#forms' } - , { name: 'Interactive Elements', url: 'base.html#interactive-elements' } - ] - } - , { - name: 'Objects', url: 'obj.html' - , description: 'Patterns of structure that can be reused many times for many different purposes.' - , sub: [ - { name: 'Table of Contents', url: 'obj.html#table-contents' } - , { name: 'The List Object' , url: 'obj.html#list-object' } - , { name: 'The Flex Object' , url: 'obj.html#flex-object' } - , { name: 'The Grid Object' , url: 'obj.html#grid-object' } - ] - } - , { - name: 'Components', url: 'comp.html' - , description: 'Patterns of look-and-feel that are each only used for one purpose.' - , is_hidden: true - } - , { - name: 'Helpers', url: 'help.html' - , description: 'Somewhat explicit classes used for enhancing default styles.' - , sub: [ - { name: 'Table of Contents', url: 'help.html#table-contents' } - , { name: 'Block' , url: 'help.html#block' } - , { name: 'Inline' , url: 'help.html#inline' } - , { name: 'Clearfix' , url: 'help.html#cleafix' } - ] - } - , { - name: 'Atoms', url: 'atom.html' - , description: 'Very specific classes used for creating anomalies or fixing broken styles.' - , sub: [ - { name: 'Table of Contents', url: 'atom.html#table-contents' } - , { name: 'margin-bottom' , url: 'atom.html#margin-bottom' } - , { name: 'padding-top' , url: 'atom.html#padding-top' } - ] - } - ] - Xmeter.DOCS_CLASSES = { - figure : 'docs-figure' - , pre : 'docs-pre' - , code : 'docs-code' - , form : 'docs-form' - } - Xmeter.getPage = function getPage(url0) { - return Xmeter.PAGES.find(function (item) { return item.url === url0 }) - } - return Xmeter - })() +include class/_Xmeter.class.jade mixin doctoc(args) - diff --git a/docs/includes/class/_Xmeter.class.jade b/docs/includes/class/_Xmeter.class.jade new file mode 100644 index 0000000..c105b47 --- /dev/null +++ b/docs/includes/class/_Xmeter.class.jade @@ -0,0 +1,81 @@ +- + var Xmeter = (function () { + function Xmeter() {} + Xmeter.PAGES = [ + { + name: 'Pattern Library', url: 'index.html' + , description: '' + } + , { + name: 'Visual Design', url: 'visual.html' + , description: 'Color and font schemes, look-and-feel, overall mood and tone.' + , is_hidden: true + } + , { + name: 'Base Typography', url: 'base.html' + , description: 'Bare, unstyled HTML elements. No classes.' + , sub: [ + { name: 'Table of Contents' , url: 'base.html#table-contents' } + , { name: 'Headings & Paragraphs', url: 'base.html#headings-paragraphs' } + , { name: 'Lists' , url: 'base.html#lists' } + , { name: 'Tables' , url: 'base.html#tables' } + , { + name: 'Text-Level Elements', url: '#text-level-elements' + , sub: [ + { name: 'Links' , url: 'base.html#links' } + , { name: 'Stress' , url: 'base.html#stress' } + , { name: 'Documentation', url: 'base.html#documentation' } + , { name: 'Data' , url: 'base.html#data' } + ] + } + , { name: 'Embedded Elements' , url: 'base.html#embedded-elements' } + , { name: 'Forms' , url: 'base.html#forms' } + , { name: 'Interactive Elements', url: 'base.html#interactive-elements' } + ] + } + , { + name: 'Objects', url: 'obj.html' + , description: 'Patterns of structure that can be reused many times for many different purposes.' + , sub: [ + { name: 'Table of Contents', url: 'obj.html#table-contents' } + , { name: 'The List Object' , url: 'obj.html#list-object' } + , { name: 'The Flex Object' , url: 'obj.html#flex-object' } + , { name: 'The Grid Object' , url: 'obj.html#grid-object' } + ] + } + , { + name: 'Components', url: 'comp.html' + , description: 'Patterns of look-and-feel that are each only used for one purpose.' + , is_hidden: true + } + , { + name: 'Helpers', url: 'help.html' + , description: 'Somewhat explicit classes used for enhancing default styles.' + , sub: [ + { name: 'Table of Contents', url: 'help.html#table-contents' } + , { name: 'Block' , url: 'help.html#block' } + , { name: 'Inline' , url: 'help.html#inline' } + , { name: 'Clearfix' , url: 'help.html#cleafix' } + ] + } + , { + name: 'Atoms', url: 'atom.html' + , description: 'Very specific classes used for creating anomalies or fixing broken styles.' + , sub: [ + { name: 'Table of Contents', url: 'atom.html#table-contents' } + , { name: 'margin-bottom' , url: 'atom.html#margin-bottom' } + , { name: 'padding-top' , url: 'atom.html#padding-top' } + ] + } + ] + Xmeter.DOCS_CLASSES = { + figure : 'docs-figure' + , pre : 'docs-pre' + , code : 'docs-code' + , form : 'docs-form' + } + Xmeter.getPage = function getPage(url0) { + return Xmeter.PAGES.find(function (item) { return item.url === url0 }) + } + return Xmeter + })() From 38ba1bfd05ed548bad835bd7912d0dbe8cfa8882 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Fri, 22 Jul 2016 14:32:53 -0400 Subject: [PATCH 13/53] unbuild output (rebuild to put back) --- docs/atom.html | 6 - docs/base.html | 72 -- docs/help.html | 23 - docs/index.html | 1 - docs/obj.html | 37 - docs/styles/docs.css | 50 -- xmeter.css | 1571 ------------------------------------------ xmeter.min.css | 1 - 8 files changed, 1761 deletions(-) delete mode 100644 docs/atom.html delete mode 100644 docs/base.html delete mode 100644 docs/help.html delete mode 100644 docs/index.html delete mode 100644 docs/obj.html delete mode 100644 docs/styles/docs.css delete mode 100644 xmeter.css delete mode 100644 xmeter.min.css diff --git a/docs/atom.html b/docs/atom.html deleted file mode 100644 index 8de9850..0000000 --- a/docs/atom.html +++ /dev/null @@ -1,6 +0,0 @@ -Atoms | Xmeter

Xmeter — Atoms

Very specific classes used for creating anomalies or fixing broken styles.

margin-bottom

This atom sets the bottom margin to one vertical rhythm unit (1vru), -which is equal to the html element’s -line-height multiplied by -1rem.

@g-vru: @g-line_height * 1rem;
-.-mb-1vru { margin-bottom: @g-vru; }
Most typographical block elements like paragraphs and lists are automatically given this style.
<div class="-mb-1vru">Most ...</div>

padding-top

This atom sets the top padding to 1vru.

@g-vru: @g-line_height * 1rem;
-.-pt-1vru { padding-top: @g-vru; }
Usually only Heading 1 is given this style, but it is also useful for moving an element down the page.
<div class="-pt-1vru">Usually only ...</div>
\ No newline at end of file diff --git a/docs/base.html b/docs/base.html deleted file mode 100644 index 66b3dab..0000000 --- a/docs/base.html +++ /dev/null @@ -1,72 +0,0 @@ -Base Typography | Xmeter

Xmeter — Base Typography

Bare, unstyled HTML elements. No classes.

Headings & Paragraphs

Heading 1 h1

Paragraph p -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.

Heading 2 h2

Paragraph p -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.

Heading 3 h3

Paragraph p -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.

Heading 4 h4

Paragraph p -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.

Heading 5 h5

Paragraph p -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.

Heading 6 h6

Paragraph p -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.

Lorem Ipsum h1

Lorem Ipsum h2

Lorem Ipsum h3

Lorem Ipsum h4

Lorem Ipsum h5
Lorem Ipsum h6
12345 address Ave br
-Washington, DC 00000 br
-United States of America
Pellentesque pre 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; })
-    };
-  }
-}
Aenean consectetur figure suscipit urna, non vehicula lacus blandit et.
Integer at lacus et diam tristique figure figcaption suscipit.
Donec blockquote vel dolor ut felis dapibus ultricies vitae a nibh.
A horizontal rule hr is present below.

Lists

Ordered List ol
  1. List item li
  2. List item li
    1. Nested list item
    2. Nested list item
      1. Another nested list item
      2. Another nested list item
Unrdered List ul
  • List item li
  • List item li
    • Nested list item
    • Nested list item
      • Another nested list item
      • Another nested list item
Dictionary List dl
key dt
value dd
  • 1st key
  • 2nd key
value
key
  • 1st value
  • 2nd value

Tables

table caption
theader trow 1 theading 1theader trow 1 theading 2theader trow 1 theading 3
tfooter trow 1 tdata 1tfooter trow 1 tdata 2tfooter trow 1 tdata 3
tfooter trow 2 tdata 1tfooter trow 2 tdata 2tfooter trow 2 tdata 3
tbody trow 1 tdata 1tbody trow 1 tdata 2tbody trow 1 tdata 3
tbody trow 2 tdata 1tbody trow 2 tdata 2tbody trow 2 tdata 3
tbody trow 3 tdata 1tbody trow 3 tdata 2tbody trow 3 tdata 3

Text-Level Elements

Stress

  • emphasized text em
  • important text strong
  • alternate voice/mood (scare quotes, mentioning words, foreign expressions) i
  • relevant in some context mark
  • unarticulated annotation u
  • side comment small
  • text shown to be no longer relevant s

Documentation

  • content shown to be inserted into a document ins
  • content shown to be deleted from a document del
  • definining instance of a term dfn
  • keyword or technical term b
  • abbreviation or acronym abbr[title]
  • variable var
  • quoted material q
  • reference to a work, some part of a work, or the creator of a work cite
  • superscript sup
  • subscript sub

Data

  • generic machine-readable data data
  • a fragment of code code
  • user input kbd
  • a button or key on a physical device kbd > kbd
  • sample computer output samp

Embedded Elements

Forms

Integer at lacus et diam tristique fieldset legend suscipit.Aenean consectetur fieldset suscipit urna, non vehicula lacus blandit et.
single line text inputs
date/time
without text input
check boxes
radio buttons
drop-down list (select only one)
drop-down list (select multiple)
buttons
textarea

Interactive Elements

Integer at lacus et diam tristique details summary suscipit.Aenean consectetur details suscipit urna, non vehicula lacus blandit et.
\ No newline at end of file diff --git a/docs/help.html b/docs/help.html deleted file mode 100644 index b5958fb..0000000 --- a/docs/help.html +++ /dev/null @@ -1,23 +0,0 @@ -Helpers | Xmeter

Xmeter — Helpers

Somewhat explicit classes used for enhancing default styles.

Block

The Block Helper creates a blocky look, -with an inherited line-height to maintain vertical rhythm.

Albert Einstein was made famous by his equation -E = mc2 -which explains the relationship between energy and mass.

<p>... his famous equation
-  <b class="h-Block" style="text-align:center;">E = mc<sup>2</sup></b>
-  which explains ...</p>

Inline

Creates an inline look, -with zero line-height to maintain vertical rhythm.

This class is useful for creating inline lists, that is, -lists whose items are each displayed in line, one right after another.

  • spacetime
  • black hole
  • singularity
  • gravity
  • supernova
  • neutron star 
<ul>
-  <li class="h-Inline">spacetime </li>
-  <li class="h-Inline">black hole </li>
-  ...
-</ul>

Clearfix

The Clearfix Helper creates a line break after an element. -This could be a container of floats, or it could simply be an inline list item. -Use this as an alternative to the br element.

gravity
supernova
spacetime black hole singularity
<div class="h-Clearfix">
-  <div style="float:  left;">gravity</div>
-  <div style="float: right;">supernova</div>
-</div>
-<div>spacetime black hole singularity</div>
The Clearfix Helper is used in the classical sense.
    spacetime black hole singularity neutron star 
<ul>
-  <li class="o-Inline">spacetime </li>
-  <li class="o-Inline  h-Clearfix">black hole </li>
-  <li class="o-Inline">singularity </li>
-  <li class="o-Inline">neutron star </li>
-</ul>
The Clearfix Helper creates a line break after the 2nd inline item.
\ No newline at end of file diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index cc77a9f..0000000 --- a/docs/index.html +++ /dev/null @@ -1 +0,0 @@ -Pattern Library | Xmeter

Xmeter — Pattern Library

\ No newline at end of file diff --git a/docs/obj.html b/docs/obj.html deleted file mode 100644 index e975adb..0000000 --- a/docs/obj.html +++ /dev/null @@ -1,37 +0,0 @@ -Objects | Xmeter

Xmeter — Objects

Patterns of structure that can be reused many times for many different purposes.

The List Object

Use the List Object to remove the usual padding and list item markers accompanied by -(un)ordered lists. The result is a list of items, each on its own line. -Combine this class with other classes to create a variety of styles.

  • Burns & McDonnell Engineering
  • DIS-TRAN Steel, LLC
  • EDM International
  • Electrical Consultants, Inc.
  • Fabrimet Inc.
  • Falcon Steel Company
<ul class="o-List">
-  <li class="o-List__Item">Burns & McDonnell Engineering</li>
-  <li class="o-List__Item">DIS-TRAN Steel, LLC</li>
-  ...
-</ul>

The Flex Object

A Flex Object is simply a container of flexible items arranged in one dimension. -Each flex item has a main size of auto, -depending on its contents. -The flex items will grow or shrink together to fit into the allotted space. -If overridden, the extra space (if any) will be distributed between the items.

  • Burns & McDonnell Engineering
  • DIS-TRAN Steel, LLC
  • EDM International
<ul class="o-List  o-Flex">
-  <li class="o-List__Item  o-Flex__Item">Burns & McDonnell Engineering</li>
-  <li class="o-List__Item  o-Flex__Item">DIS-TRAN Steel, LLC</li>
-  ...
-</ul>
A Flex Object with extra space.
  • Burns & McDonnell Engineering
  • DIS-TRAN Steel, LLC
  • EDM International
  • Electrical Consultants, Inc.
  • Fabrimet Inc.
  • Falcon Steel Company
  • Sabre-FWT
  • HDR
  • Mitas Energy
  • Power Consulting Associates, LLC
  • Power Line Systems, Inc.
  • Quanta Services
  • ReliaPOLE Inspection Services
<ul class="o-List  o-Flex">
-  <li class="o-List__Item  o-Flex__Item">Burns & McDonnell Engineering</li>
-  <li class="o-List__Item  o-Flex__Item">DIS-TRAN Steel, LLC</li>
-  ...
-</ul>
A Flex Object with not enough space.

The Grid Object

The Grid Object is similar to the Flex Object except that it can be extended -to two dimensions. -It has the structure of a list in that all items share the same container -(unlike tables where cells might not share the same row), while at the same time -appearing like a table with rows and columns.

By default, each item has a main size of 100% (unless overridden). -Using media queries, you can achieve a flexible and responsive table effect, -adjusting the number of cross axes—columns if -flex-direction: row;, or rows if -flex-direction: column;—based on screen size. -In order to appear like a table, all the items within -a cross axis should have the same main size.

  • Burns & McDonnell Engineering
  • DIS-TRAN Steel, LLC
  • EDM International
<ul class="o-List  o-Grid">
-  <li class="o-List__Item  o-Grid__Item">Burns & McDonnell Engineering</li>
-  <li class="o-List__Item  o-Grid__Item">DIS-TRAN Steel, LLC</li>
-  ...
-</ul>
A Grid Object with extra space.
  • Burns & McDonnell Engineering
  • DIS-TRAN Steel, LLC
  • EDM International
  • Electrical Consultants, Inc.
  • Fabrimet Inc.
  • Falcon Steel Company
  • Sabre-FWT
  • HDR
  • Mitas Energy
  • Power Consulting Associates, LLC
  • Power Line Systems, Inc.
  • Quanta Services
  • ReliaPOLE Inspection Services
  • Sabre-FWT
  • SAE Towers
  • TAPP Steel Poles
  • Trinity Meyer Utility Structures
  • TRC Engineers
  • Underground Devices
  • Valmont Newmark
<ul class="o-List  o-Grid">
-  <li class="o-List__Item  o-Grid__Item">Burns & McDonnell Engineering</li>
-  <li class="o-List__Item  o-Grid__Item">DIS-TRAN Steel, LLC</li>
-  ...
-</ul>
A Grid Object with not enough space.
\ No newline at end of file diff --git a/docs/styles/docs.css b/docs/styles/docs.css deleted file mode 100644 index 0ee256e..0000000 --- a/docs/styles/docs.css +++ /dev/null @@ -1,50 +0,0 @@ -/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\ - xmeter -\*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ -/*================================*\ - docs.less -\*================================*/ -.docs-body { - background-image: url('https://chharvey.github.io/core/images/crossgrid-lined.svg'); - background-position: left top; - background-size: 1px 24px; - background-repeat: repeat; -} -.docs-main { - margin: 0 1rem 1.5rem; -} -.docs-pre, -.docs-code { - background-color: #333; - color: #ccc; - border-radius: 0.25rem; -} -.docs-pre u, -.docs-code u { - color: #6c6; -} -.docs-pre, -.docs-figure { - padding: 0.75rem 0.5rem; -} -.docs-code { - padding: 2px 4px; -} -.docs-figure { - position: relative; - margin-left: 1rem; - margin-right: 1rem; - border-width: 1px; - margin-top: -2px; - border-style: solid; - border-color: #ddd; - border-radius: 0.5rem; - background-color: #eee; - overflow: auto; -} -.docs-figure > figcaption { - font-style: italic; -} -.docs-form { - background: #fff; -} diff --git a/xmeter.css b/xmeter.css deleted file mode 100644 index 10b8bb7..0000000 --- a/xmeter.css +++ /dev/null @@ -1,1571 +0,0 @@ -/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\ - xmeter - Version: 5.0.0 - Licence: MIT - Repo : https://github.com/chharvey/xmeter.git - Home : https://github.com/chharvey/xmeter#readme - Author : Chris Harvey (https://chharvey.github.io/) -\*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ -/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\ - resetcss - Version: 1.0.3 - Licence: MIT - Repo : https://github.com/chharvey/resetcss.git - Home : https://github.com/chharvey/resetcss#readme - Author : Chris Harvey (https://chharvey.github.io/) -\*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ -/*================================*\ - reset.less -\*================================*/ -body { - text-align: left; - background: #fff; - color: #000; -} -sup, -sub { - vertical-align: inherit; -} -body, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -p, -figure, -blockquote, -pre, -ol, -ul, -dl, -dd, -fieldset { - margin: 0; -} -ol, -ul, -th, -td, -legend { - padding: 0; -} -h1, -h2, -h3, -h4, -h5, -h6, -address, -pre, -th, -em, -strong, -i, -small, -dfn, -b, -var, -cite, -sup, -sub, -code, -kbd, -samp { - font: inherit; -} -caption, -th { - text-align: inherit; -} -pre { - white-space: inherit; -} -mark { - background: transparent; -} -a, -u, -s, -ins, -del { - text-decoration: none; -} -ol, -ul { - list-style: none; -} -q { - quotes: none; -} -a, -mark { - color: inherit; -} - -/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ - -/** - * 1. Change the default font family in all browsers (opinionated). - * 2. Prevent adjustments of font size after orientation changes in IE and iOS. - */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove the margin in all browsers (opinionated). - */ - -body { - margin: 0; -} - -/* HTML5 display definitions - ========================================================================== */ - -/** - * Add the correct display in IE 9-. - * 1. Add the correct display in Edge, IE, and Firefox. - * 2. Add the correct display in IE. - */ - -article, -aside, -details, /* 1 */ -figcaption, -figure, -footer, -header, -main, /* 2 */ -menu, -nav, -section, -summary { /* 1 */ - display: block; -} - -/** - * Add the correct display in IE 9-. - */ - -audio, -canvas, -progress, -video { - display: inline-block; -} - -/** - * Add the correct display in iOS 4-7. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - vertical-align: baseline; -} - -/** - * Add the correct display in IE 10-. - * 1. Add the correct display in IE. - */ - -template, /* 1 */ -[hidden] { - display: none; -} - -/* Links - ========================================================================== */ - -/** - * 1. Remove the gray background on active links in IE 10. - * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. - */ - -a { - background-color: transparent; /* 1 */ - -webkit-text-decoration-skip: objects; /* 2 */ -} - -/** - * Remove the outline on focused links when they are also active or hovered - * in all browsers (opinionated). - */ - -a:active, -a:hover { - outline-width: 0; -} - -/* Text-level semantics - ========================================================================== */ - -/** - * 1. Remove the bottom border in Firefox 39-. - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Prevent the duplicate application of `bolder` by the next rule in Safari 6. - */ - -b, -strong { - font-weight: inherit; -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * Add the correct font style in Android 4.3-. - */ - -dfn { - font-style: italic; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Add the correct background and color in IE 9-. - */ - -mark { - background-color: #ff0; - color: #000; -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove the border on images inside links in IE 10-. - */ - -img { - border-style: none; -} - -/** - * Hide the overflow in IE. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Grouping content - ========================================================================== */ - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct margin in IE 8. - */ - -figure { - margin: 1em 40px; -} - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/* Forms - ========================================================================== */ - -/** - * 1. Change font properties to `inherit` in all browsers (opinionated). - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -select, -textarea { - font: inherit; /* 1 */ - margin: 0; /* 2 */ -} - -/** - * Restore the font weight unset by the previous rule. - */ - -optgroup { - font-weight: bold; -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { /* 1 */ - text-transform: none; -} - -/** - * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` - * controls in Android 4. - * 2. Correct the inability to style clickable types in iOS and Safari. - */ - -button, -html [type="button"], /* 1 */ -[type="reset"], -[type="submit"] { - -webkit-appearance: button; /* 2 */ -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Change the border, margin, and padding in all browsers (opinionated). - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * Remove the default vertical scrollbar in IE. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10-. - * 2. Remove the padding in IE 10-. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. - */ - -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ - -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/*================================*\ - xmeter.less -\*================================*/ -/** - * CONTENTS - * - * reset.css (above).............strips all elements of all browser-default styles - * normalize.css (above).........(@necolas) addresses browser discrepancies - * - * BASE - * generic........................styles that apply to `html` and very far-reaching groups of elements - * sections.......................secioning content and section-related elements - * grouping.......................grouping content - * ....paras..........................paragraphs, block-level textual elements - * ....lists..........................ordered, unordered, dictionary - * ....tables.........................tables - * text...........................text-level and inline elements - * ....links..........................inline hyperlinks - * ....stress.........................text outstanding from surrounding prose - * ....doctext........................documentation elements - * ....data...........................machine- or human-readable data - * embedded.......................images and other media - * forms..........................form elements - * interactive....................interactive elements - * - * OBJECTS - * List...........................plain, unstyled, blocky list - * Flex...........................one-dimensional flexible box - * Grid...........................two-dimensional flexible box - * - * HELPERS - * Block..........................gives a blocky look - * Inline.........................a simple inline object - * Clearfix.......................creates a line break and clears floats - * - * ATOMS - * atom...........................single-use classes - */ -/*################################*\ - xmeter | _base.generic.less -\*################################*/ -*, -*::before, -*::after { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - border: 0 solid; - content: ' '; - content: ''; - content: none; -} -@media print { - *, - *::before, - *::after { - background: transparent !important; - box-shadow: none !important; - text-shadow: none !important; - } -} -html { - font-size: 100%; - font-size: 16px; - line-height: 1.5; -} -h1, -h2, -h3, -h4, -h5, -h6, -p, -pre, -figure, -blockquote, -ol, -ul, -dl, -table, -fieldset { - margin-bottom: 1.5rem; -} -h1 { - padding-top: 1.5rem; -} -span, -br, -em, -strong, -i, -mark, -u, -small, -s, -dfn, -b, -abbr, -var, -q, -cite, -sup, -sub, -data, -time, -code, -kbd, -samp { - line-height: 0; -} -a, -ins, -del { - display: contents; -} - -/*################################*\ - xmeter | _base.sections.less -\*################################*/ -h1, -h2, -h3, -h4, -h5, -h6 { - font-weight: 700; -} -h1 { - font-size: 2em; - line-height: 0.75; -} -h2 { - font-size: 1.5em; - line-height: 1; -} -h3 { - font-size: 1.25em; - line-height: 1.2; -} -h4 { - font-size: 1em; - line-height: 1.5; -} -h5 { - font-size: 0.875em; - line-height: 1.71428571; -} -h6 { - font-size: 0.75em; - line-height: 2; -} -h1 { - margin-top: 0; -} - -/*################################*\ - xmeter | _base.grouping.less -\*################################*/ -hr { - display: none; -} - -/*################################*\ - xmeter | _base.grouping.paras.less -\*################################*/ -pre { - font-size: 0.75em; - line-height: 2; - text-align: left; - text-indent: 0; - white-space: pre; - overflow: auto; -} -figure { - margin-top: 0; - margin-left: 0; - margin-right: 0; -} - -/*################################*\ - xmeter | _base.grouping.lists.less -\*################################*/ -li > ol, -li > ul, -li > dl, -dt > ol, -dt > ul, -dt > dl, -dd > ol, -dd > ul, -dd > dl { - margin-bottom: 0; -} -ol, -ul { - padding: 0 0 0 4rem; -} -li > ol, -li > ul, -dt > ol, -dt > ul, -dd > ol, -dd > ul { - padding-left: 2rem; -} -ol { - list-style-type: decimal; -} -ul { - list-style-type: disc; -} - -/*################################*\ - xmeter | _base.grouping.tables.less -\*################################*/ -table { - max-width: 100%; - border-collapse: collapse; - text-align: left; -} -caption { - text-align: center; -} -thead, -tfoot { - vertical-align: bottom; -} -tbody { - vertical-align: top; -} -th { - font-weight: 700; - text-align: center; -} - -/*################################*\ - xmeter | _base.text.less -\*################################*/ - -/*################################*\ - xmeter | _base.text.links.less -\*################################*/ -a { - color: #00e; -} -@media screen { - a:not([href]) { - opacity: 0.5; - } -} - -/*################################*\ - xmeter | _base.text.stress.less -\*################################*/ -em { - font-style: italic; -} -strong { - font-weight: 700; -} -i { - font-style: italic; -} -u { - text-decoration: underline; - color: #080; -} -small { - font-size: 0.75em; -} -s { - text-decoration: line-through; - color: #b00; -} - -/*################################*\ - xmeter | _base.text.doctext.less -\*################################*/ -ins { - background: #a6f3a6; -} -del { - background: #f8cbcb; -} -dfn { - font-style: inherit; - font-weight: 700; -} -b { - font-weight: 700; -} -abbr[title] { - cursor: help; - text-decoration: none; -} -var { - font-style: italic; -} -q { - quotes: '\201c' '\201d'; - quotes: initial; -} -q::before { - content: open-quote; -} -q::after { - content: close-quote; -} -cite { - font-style: italic; -} -sup, -sub { - font-size: 0.75em; -} - -/*################################*\ - xmeter | _base.text.data.less -\*################################*/ -code, -kbd, -samp { - font-size: 0.75em; - white-space: nowrap; -} -code code, -kbd code, -samp code, -code kbd, -kbd kbd, -samp kbd, -code samp, -kbd samp, -samp samp { - font-size: inherit; -} - -/*################################*\ - xmeter | _base.embedded.less -\*################################*/ -img { - width: auto; - height: auto; - max-width: 100%; - font-style: italic; - vertical-align: middle; -} - -/*################################*\ - xmeter | _base.forms.less -\*################################*/ -fieldset, -input, -select, -textarea, -button { - border-width: 1px; - margin-top: -2px; - border-style: solid; - border-color: #c0c0c0; - border-color: rgba(0, 0, 0, 0.25); -} -fieldset { - padding: 0 1rem; - margin-left: 0; - margin-right: 0; -} -input, -select, -textarea, -button { - padding: 0 0.25rem; -} -input:not([type="button"]):not([type="reset"]):not([type="submit"]), -textarea { - font-size: 0.75em; - line-height: 2; -} -textarea { - width: 30rem; - height: 9rem; - line-height: 1.5; -} -input[type="button"], -input[type="reset"], -input[type="submit"], -button { - background-color: #c0c0c0; - background-color: rgba(0, 0, 0, 0.25); -} -input[type="search"] { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -/*################################*\ - xmeter | _base.interactive.less -\*################################*/ - -/*################################*\ - xmeter | _o-List.less -\*################################*/ -.o-List { - padding-left: 0; - list-style: none; -} -@media screen { - .o-List-s { - padding-left: 0; - list-style: none; - } -} -@media print { - .o-List-p { - padding-left: 0; - list-style: none; - } -} -@media screen and (min-width: 30em) { - .o-List-sK { - padding-left: 0; - list-style: none; - } -} -@media screen and (min-width: 45em) { - .o-List-sM { - padding-left: 0; - list-style: none; - } -} -@media screen and (min-width: 60em) { - .o-List-sG { - padding-left: 0; - list-style: none; - } -} -@media screen and (min-width: 75em) { - .o-List-sT { - padding-left: 0; - list-style: none; - } -} -@media screen and (min-width: 90em) { - .o-List-sP { - padding-left: 0; - list-style: none; - } -} - -/*################################*\ - xmeter | _o-Flex.less -\*################################*/ -.o-Flex { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - line-height: inherit; - -webkit-justify-content: space-between; - -moz-justify-content: space-between; - -ms-justify-content: space-between; - justify-content: space-between; -} -.o-Flex__Item { - -webkit-box-flex: auto; - -moz-box-flex: auto; - -webkit-flex: auto; - -moz-flex: auto; - -ms-flex: auto; - flex: auto; -} -@media screen { - .o-Flex-s { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - line-height: inherit; - -webkit-justify-content: space-between; - -moz-justify-content: space-between; - -ms-justify-content: space-between; - justify-content: space-between; - } - .o-Flex__Item-s { - -webkit-box-flex: auto; - -moz-box-flex: auto; - -webkit-flex: auto; - -moz-flex: auto; - -ms-flex: auto; - flex: auto; - } -} -@media print { - .o-Flex-p { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - line-height: inherit; - -webkit-justify-content: space-between; - -moz-justify-content: space-between; - -ms-justify-content: space-between; - justify-content: space-between; - } - .o-Flex__Item-p { - -webkit-box-flex: auto; - -moz-box-flex: auto; - -webkit-flex: auto; - -moz-flex: auto; - -ms-flex: auto; - flex: auto; - } -} -@media screen and (min-width: 30em) { - .o-Flex-sK { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - line-height: inherit; - -webkit-justify-content: space-between; - -moz-justify-content: space-between; - -ms-justify-content: space-between; - justify-content: space-between; - } - .o-Flex__Item-sK { - -webkit-box-flex: auto; - -moz-box-flex: auto; - -webkit-flex: auto; - -moz-flex: auto; - -ms-flex: auto; - flex: auto; - } -} -@media screen and (min-width: 45em) { - .o-Flex-sM { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - line-height: inherit; - -webkit-justify-content: space-between; - -moz-justify-content: space-between; - -ms-justify-content: space-between; - justify-content: space-between; - } - .o-Flex__Item-sM { - -webkit-box-flex: auto; - -moz-box-flex: auto; - -webkit-flex: auto; - -moz-flex: auto; - -ms-flex: auto; - flex: auto; - } -} -@media screen and (min-width: 60em) { - .o-Flex-sG { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - line-height: inherit; - -webkit-justify-content: space-between; - -moz-justify-content: space-between; - -ms-justify-content: space-between; - justify-content: space-between; - } - .o-Flex__Item-sG { - -webkit-box-flex: auto; - -moz-box-flex: auto; - -webkit-flex: auto; - -moz-flex: auto; - -ms-flex: auto; - flex: auto; - } -} -@media screen and (min-width: 75em) { - .o-Flex-sT { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - line-height: inherit; - -webkit-justify-content: space-between; - -moz-justify-content: space-between; - -ms-justify-content: space-between; - justify-content: space-between; - } - .o-Flex__Item-sT { - -webkit-box-flex: auto; - -moz-box-flex: auto; - -webkit-flex: auto; - -moz-flex: auto; - -ms-flex: auto; - flex: auto; - } -} -@media screen and (min-width: 90em) { - .o-Flex-sP { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - line-height: inherit; - -webkit-justify-content: space-between; - -moz-justify-content: space-between; - -ms-justify-content: space-between; - justify-content: space-between; - } - .o-Flex__Item-sP { - -webkit-box-flex: auto; - -moz-box-flex: auto; - -webkit-flex: auto; - -moz-flex: auto; - -ms-flex: auto; - flex: auto; - } -} - -/*################################*\ - xmeter | _o-Grid.less -\*################################*/ -.o-Grid { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - line-height: inherit; - -webkit-flex-wrap: wrap; - -moz-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} -.o-Grid__Item { - -webkit-box-flex: 100%; - -moz-box-flex: 100%; - -webkit-flex: 100%; - -moz-flex: 100%; - -ms-flex: 100%; - flex: 100%; -} -@media screen { - .o-Grid-s { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - line-height: inherit; - -webkit-flex-wrap: wrap; - -moz-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - } - .o-Grid__Item-s { - -webkit-box-flex: 100%; - -moz-box-flex: 100%; - -webkit-flex: 100%; - -moz-flex: 100%; - -ms-flex: 100%; - flex: 100%; - } -} -@media print { - .o-Grid-p { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - line-height: inherit; - -webkit-flex-wrap: wrap; - -moz-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - } - .o-Grid__Item-p { - -webkit-box-flex: 100%; - -moz-box-flex: 100%; - -webkit-flex: 100%; - -moz-flex: 100%; - -ms-flex: 100%; - flex: 100%; - } -} -@media screen and (min-width: 30em) { - .o-Grid-sK { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - line-height: inherit; - -webkit-flex-wrap: wrap; - -moz-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - } - .o-Grid__Item-sK { - -webkit-box-flex: 100%; - -moz-box-flex: 100%; - -webkit-flex: 100%; - -moz-flex: 100%; - -ms-flex: 100%; - flex: 100%; - } -} -@media screen and (min-width: 45em) { - .o-Grid-sM { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - line-height: inherit; - -webkit-flex-wrap: wrap; - -moz-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - } - .o-Grid__Item-sM { - -webkit-box-flex: 100%; - -moz-box-flex: 100%; - -webkit-flex: 100%; - -moz-flex: 100%; - -ms-flex: 100%; - flex: 100%; - } -} -@media screen and (min-width: 60em) { - .o-Grid-sG { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - line-height: inherit; - -webkit-flex-wrap: wrap; - -moz-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - } - .o-Grid__Item-sG { - -webkit-box-flex: 100%; - -moz-box-flex: 100%; - -webkit-flex: 100%; - -moz-flex: 100%; - -ms-flex: 100%; - flex: 100%; - } -} -@media screen and (min-width: 75em) { - .o-Grid-sT { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - line-height: inherit; - -webkit-flex-wrap: wrap; - -moz-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - } - .o-Grid__Item-sT { - -webkit-box-flex: 100%; - -moz-box-flex: 100%; - -webkit-flex: 100%; - -moz-flex: 100%; - -ms-flex: 100%; - flex: 100%; - } -} -@media screen and (min-width: 90em) { - .o-Grid-sP { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - line-height: inherit; - -webkit-flex-wrap: wrap; - -moz-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - } - .o-Grid__Item-sP { - -webkit-box-flex: 100%; - -moz-box-flex: 100%; - -webkit-flex: 100%; - -moz-flex: 100%; - -ms-flex: 100%; - flex: 100%; - } -} - -/*################################*\ - xmeter | _h-Block.less -\*################################*/ -.h-Block { - display: block; - line-height: inherit; -} -@media screen { - .h-Block-s { - display: block; - line-height: inherit; - } -} -@media print { - .h-Block-p { - display: block; - line-height: inherit; - } -} -@media screen and (min-width: 30em) { - .h-Block-sK { - display: block; - line-height: inherit; - } -} -@media screen and (min-width: 45em) { - .h-Block-sM { - display: block; - line-height: inherit; - } -} -@media screen and (min-width: 60em) { - .h-Block-sG { - display: block; - line-height: inherit; - } -} -@media screen and (min-width: 75em) { - .h-Block-sT { - display: block; - line-height: inherit; - } -} -@media screen and (min-width: 90em) { - .h-Block-sP { - display: block; - line-height: inherit; - } -} - -/*################################*\ - xmeter | _h-Inline.less -\*################################*/ -.h-Inline { - display: inline; - line-height: 0; -} -@media screen { - .h-Inline-s { - display: inline; - line-height: 0; - } -} -@media print { - .h-Inline-p { - display: inline; - line-height: 0; - } -} -@media screen and (min-width: 30em) { - .h-Inline-sK { - display: inline; - line-height: 0; - } -} -@media screen and (min-width: 45em) { - .h-Inline-sM { - display: inline; - line-height: 0; - } -} -@media screen and (min-width: 60em) { - .h-Inline-sG { - display: inline; - line-height: 0; - } -} -@media screen and (min-width: 75em) { - .h-Inline-sT { - display: inline; - line-height: 0; - } -} -@media screen and (min-width: 90em) { - .h-Inline-sP { - display: inline; - line-height: 0; - } -} - -/*################################*\ - xmeter | _h-Clearfix.less -\*################################*/ -.h-Clearfix::after { - content: ''; - display: block; - clear: both; -} -@media screen { - .h-Clearfix-s::after { - content: ''; - display: block; - clear: both; - } -} -@media print { - .h-Clearfix-p::after { - content: ''; - display: block; - clear: both; - } -} -@media screen and (min-width: 30em) { - .h-Clearfix-sK::after { - content: ''; - display: block; - clear: both; - } -} -@media screen and (min-width: 45em) { - .h-Clearfix-sM::after { - content: ''; - display: block; - clear: both; - } -} -@media screen and (min-width: 60em) { - .h-Clearfix-sG::after { - content: ''; - display: block; - clear: both; - } -} -@media screen and (min-width: 75em) { - .h-Clearfix-sT::after { - content: ''; - display: block; - clear: both; - } -} -@media screen and (min-width: 90em) { - .h-Clearfix-sP::after { - content: ''; - display: block; - clear: both; - } -} - -/*################################*\ - xmeter | _atom.less -\*################################*/ -.-mb-1vru { - margin-bottom: 1.5rem; -} -@media screen { - .-mb-1vru-s { - margin-bottom: 1.5rem; - } -} -@media print { - .-mb-1vru-p { - margin-bottom: 1.5rem; - } -} -@media screen and (min-width: 30em) { - .-mb-1vru-sK { - margin-bottom: 1.5rem; - } -} -@media screen and (min-width: 45em) { - .-mb-1vru-sM { - margin-bottom: 1.5rem; - } -} -@media screen and (min-width: 60em) { - .-mb-1vru-sG { - margin-bottom: 1.5rem; - } -} -@media screen and (min-width: 75em) { - .-mb-1vru-sT { - margin-bottom: 1.5rem; - } -} -@media screen and (min-width: 90em) { - .-mb-1vru-sP { - margin-bottom: 1.5rem; - } -} -.-pt-1vru { - padding-top: 1.5rem; -} -@media screen { - .-pt-1vru-s { - padding-top: 1.5rem; - } -} -@media print { - .-pt-1vru-p { - padding-top: 1.5rem; - } -} -@media screen and (min-width: 30em) { - .-pt-1vru-sK { - padding-top: 1.5rem; - } -} -@media screen and (min-width: 45em) { - .-pt-1vru-sM { - padding-top: 1.5rem; - } -} -@media screen and (min-width: 60em) { - .-pt-1vru-sG { - padding-top: 1.5rem; - } -} -@media screen and (min-width: 75em) { - .-pt-1vru-sT { - padding-top: 1.5rem; - } -} -@media screen and (min-width: 90em) { - .-pt-1vru-sP { - padding-top: 1.5rem; - } -} - diff --git a/xmeter.min.css b/xmeter.min.css deleted file mode 100644 index ba78bf1..0000000 --- a/xmeter.min.css +++ /dev/null @@ -1 +0,0 @@ -body,mark{color:#000}a,abbr[title],del,ins,s,u{text-decoration:none}progress,sub,sup{vertical-align:baseline}audio:not([controls]),hr{height:0;display:none}[hidden],hr,template{display:none}button,hr,input{overflow:visible}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend,ol,td,th,ul{padding:0}body,pre,table{text-align:left}caption,th{text-align:center}img,legend,table{max-width:100%}pre,textarea{overflow:auto}.o-List,ol,ul{list-style:none}body{background:#fff}blockquote,body,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,ul{margin:0}address,b,cite,code,dfn,em,h1,h2,h3,h4,h5,h6,i,kbd,pre,samp,small,strong,sub,sup,th,var{font:inherit}mark{background:#ff0}ol,ul{padding:0 0 0 4rem}/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#00e}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;cursor:help}h1{margin:.67em 0}sub,sup{line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace}figure{margin:0 0 1em}hr{box-sizing:content-box}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px}legend{color:inherit;display:table;white-space:normal}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}h4,html{line-height:1.5}b,dfn,h1,h2,h3,h4,h5,h6,strong,th{font-weight:700}*,::after,::before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:0 solid;content:' ';content:'';content:none}html{font-size:100%;font-size:16px}blockquote,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,ol,p,pre,table,ul{margin-bottom:1.5rem}h1{padding-top:1.5rem;font-size:2em;line-height:.75;margin-top:0}abbr,b,br,cite,code,data,dfn,em,i,kbd,mark,q,s,samp,small,span,strong,sub,sup,time,u,var{line-height:0}a,del,ins{display:contents}h2{font-size:1.5em;line-height:1}h3{font-size:1.25em;line-height:1.2}h4{font-size:1em}h5{font-size:.875em;line-height:1.71428571}code,kbd,pre,samp,small,sub,sup{font-size:.75em}h6,input:not([type=button]):not([type=reset]):not([type=submit]),textarea{font-size:.75em;line-height:2}pre{line-height:2;text-indent:0;white-space:pre}dd>dl,dd>ol,dd>ul,dt>dl,dt>ol,dt>ul,li>dl,li>ol,li>ul{margin-bottom:0}dd>ol,dd>ul,dt>ol,dt>ul,li>ol,li>ul{padding-left:2rem}ol{list-style-type:decimal}ul{list-style-type:disc}table{border-collapse:collapse}tfoot,thead{vertical-align:bottom}tbody{vertical-align:top}cite,em,i,var{font-style:italic}u{text-decoration:underline;color:#080}s{text-decoration:line-through;color:#b00}ins{background:#a6f3a6}del{background:#f8cbcb}dfn{font-style:inherit}q{quotes:'\201c' '\201d';quotes:initial}q::before{content:open-quote}q::after{content:close-quote}code,kbd,samp{white-space:nowrap}code code,code kbd,code samp,kbd code,kbd kbd,kbd samp,samp code,samp kbd,samp samp{font-size:inherit}img{border-style:none;width:auto;height:auto;font-style:italic;vertical-align:middle}button,fieldset,input,select,textarea{border-width:1px;margin-top:-2px;border-style:solid;border-color:silver;border-color:rgba(0,0,0,.25)}fieldset{padding:0 1rem;margin-left:0;margin-right:0}button,input,select,textarea{padding:0 .25rem}textarea{width:30rem;height:9rem;line-height:1.5}.h-Block,.o-Flex,.o-Grid{line-height:inherit}button,input[type=button],input[type=reset],input[type=submit]{background-color:silver;background-color:rgba(0,0,0,.25)}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.o-List{padding-left:0}.o-Flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}@media screen{a:not([href]){opacity:.5}.o-List-s{padding-left:0;list-style:none}.o-Flex-s{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-s{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media print{*,::after,::before{background:0 0!important;box-shadow:none!important;text-shadow:none!important}.o-List-p{padding-left:0;list-style:none}.o-Flex-p{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-p{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media screen and (min-width:30em){.o-List-sK{padding-left:0;list-style:none}.o-Flex-sK{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sK{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media screen and (min-width:45em){.o-List-sM{padding-left:0;list-style:none}.o-Flex-sM{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sM{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media screen and (min-width:60em){.o-List-sG{padding-left:0;list-style:none}.o-Flex-sG{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sG{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media screen and (min-width:75em){.o-List-sT{padding-left:0;list-style:none}.o-Flex-sT{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sT{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media screen and (min-width:90em){.o-List-sP{padding-left:0;list-style:none}.o-Flex-sP{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sP{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}.o-Grid{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}@media screen{.o-Grid-s{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-s{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media print{.o-Grid-p{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-p{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:30em){.o-Grid-sK{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sK{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:45em){.o-Grid-sM{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sM{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:60em){.o-Grid-sG{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sG{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:75em){.o-Grid-sT{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sT{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:90em){.o-Grid-sP{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sP{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}.h-Block-sP{display:block;line-height:inherit}}.h-Block{display:block}@media screen{.h-Block-s{display:block;line-height:inherit}}@media print{.h-Block-p{display:block;line-height:inherit}}@media screen and (min-width:30em){.h-Block-sK{display:block;line-height:inherit}}@media screen and (min-width:45em){.h-Block-sM{display:block;line-height:inherit}}@media screen and (min-width:60em){.h-Block-sG{display:block;line-height:inherit}}@media screen and (min-width:75em){.h-Block-sT{display:block;line-height:inherit}.h-Inline-sT{display:inline;line-height:0}}.h-Inline{display:inline;line-height:0}@media screen{.h-Inline-s{display:inline;line-height:0}}@media print{.h-Inline-p{display:inline;line-height:0}}@media screen and (min-width:30em){.h-Inline-sK{display:inline;line-height:0}}@media screen and (min-width:45em){.h-Inline-sM{display:inline;line-height:0}}@media screen and (min-width:60em){.h-Inline-sG{display:inline;line-height:0}}@media screen and (min-width:90em){.h-Inline-sP{display:inline;line-height:0}.h-Clearfix-sP::after{content:'';display:block;clear:both}}.h-Clearfix::after{content:'';display:block;clear:both}.-mb-1vru{margin-bottom:1.5rem}.-pt-1vru{padding-top:1.5rem}@media screen{.h-Clearfix-s::after{content:'';display:block;clear:both}.-mb-1vru-s{margin-bottom:1.5rem}.-pt-1vru-s{padding-top:1.5rem}}@media print{.h-Clearfix-p::after{content:'';display:block;clear:both}.-mb-1vru-p{margin-bottom:1.5rem}.-pt-1vru-p{padding-top:1.5rem}}@media screen and (min-width:30em){.h-Clearfix-sK::after{content:'';display:block;clear:both}.-mb-1vru-sK{margin-bottom:1.5rem}.-pt-1vru-sK{padding-top:1.5rem}}@media screen and (min-width:45em){.h-Clearfix-sM::after{content:'';display:block;clear:both}.-mb-1vru-sM{margin-bottom:1.5rem}.-pt-1vru-sM{padding-top:1.5rem}}@media screen and (min-width:60em){.h-Clearfix-sG::after{content:'';display:block;clear:both}.-mb-1vru-sG{margin-bottom:1.5rem}.-pt-1vru-sG{padding-top:1.5rem}}@media screen and (min-width:75em){.h-Clearfix-sT::after{content:'';display:block;clear:both}.-mb-1vru-sT{margin-bottom:1.5rem}.-pt-1vru-sT{padding-top:1.5rem}}@media screen and (min-width:90em){.-mb-1vru-sP{margin-bottom:1.5rem}.-pt-1vru-sP{padding-top:1.5rem}} \ No newline at end of file From 6ed48cbd83743fe2b106135c7d8ecbc342957e0c Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Sun, 24 Jul 2016 23:39:07 -0400 Subject: [PATCH 14/53] npm install js2pug --- package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index a5acf19..bdaf5ec 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "devDependencies": { "clean-css": "^3.4.17", "jade": "^1.11.0", + "js2pug": "^1.0.0", "less": "^2.7.1", "lessc-each": "^1.1.0", "normalize.css": "~4.1.1", @@ -14,8 +15,9 @@ }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", + "js2pug": "js2pug docs/scripts/Xmeter.class.js && mv docs/scripts/Xmeter.class.js.pug docs/includes/class/_Xmeter.class.jade", "jade:docs": "jade docs/{index,base,obj,help,atom}.jade", - "jade:all": "npm run jade:docs", + "jade:all": "npm run js2pug && npm run jade:docs", "lessc:docs": "lessc docs/styles/docs.less docs/styles/docs.css", "lessc:xmeter": "lessc-each src/ build/ && lessc xmeter.less xmeter.css", "lessc:all": "npm run lessc:docs && npm run lessc:xmeter", From 7b49dc19097192df309060c7eb4eec3febd55339 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Sun, 24 Jul 2016 23:42:18 -0400 Subject: [PATCH 15/53] convert jade class data into js --- .gitignore | 1 + docs/includes/class/_Xmeter.class.jade | 81 -------------------------- docs/scripts/Xmeter.class.js | 80 +++++++++++++++++++++++++ 3 files changed, 81 insertions(+), 81 deletions(-) delete mode 100644 docs/includes/class/_Xmeter.class.jade create mode 100644 docs/scripts/Xmeter.class.js diff --git a/.gitignore b/.gitignore index d7f694f..aa0a90c 100644 --- a/.gitignore +++ b/.gitignore @@ -31,3 +31,4 @@ node_modules # Compiled source files build/ +docs/includes/class/ diff --git a/docs/includes/class/_Xmeter.class.jade b/docs/includes/class/_Xmeter.class.jade deleted file mode 100644 index c105b47..0000000 --- a/docs/includes/class/_Xmeter.class.jade +++ /dev/null @@ -1,81 +0,0 @@ -- - var Xmeter = (function () { - function Xmeter() {} - Xmeter.PAGES = [ - { - name: 'Pattern Library', url: 'index.html' - , description: '' - } - , { - name: 'Visual Design', url: 'visual.html' - , description: 'Color and font schemes, look-and-feel, overall mood and tone.' - , is_hidden: true - } - , { - name: 'Base Typography', url: 'base.html' - , description: 'Bare, unstyled HTML elements. No classes.' - , sub: [ - { name: 'Table of Contents' , url: 'base.html#table-contents' } - , { name: 'Headings & Paragraphs', url: 'base.html#headings-paragraphs' } - , { name: 'Lists' , url: 'base.html#lists' } - , { name: 'Tables' , url: 'base.html#tables' } - , { - name: 'Text-Level Elements', url: '#text-level-elements' - , sub: [ - { name: 'Links' , url: 'base.html#links' } - , { name: 'Stress' , url: 'base.html#stress' } - , { name: 'Documentation', url: 'base.html#documentation' } - , { name: 'Data' , url: 'base.html#data' } - ] - } - , { name: 'Embedded Elements' , url: 'base.html#embedded-elements' } - , { name: 'Forms' , url: 'base.html#forms' } - , { name: 'Interactive Elements', url: 'base.html#interactive-elements' } - ] - } - , { - name: 'Objects', url: 'obj.html' - , description: 'Patterns of structure that can be reused many times for many different purposes.' - , sub: [ - { name: 'Table of Contents', url: 'obj.html#table-contents' } - , { name: 'The List Object' , url: 'obj.html#list-object' } - , { name: 'The Flex Object' , url: 'obj.html#flex-object' } - , { name: 'The Grid Object' , url: 'obj.html#grid-object' } - ] - } - , { - name: 'Components', url: 'comp.html' - , description: 'Patterns of look-and-feel that are each only used for one purpose.' - , is_hidden: true - } - , { - name: 'Helpers', url: 'help.html' - , description: 'Somewhat explicit classes used for enhancing default styles.' - , sub: [ - { name: 'Table of Contents', url: 'help.html#table-contents' } - , { name: 'Block' , url: 'help.html#block' } - , { name: 'Inline' , url: 'help.html#inline' } - , { name: 'Clearfix' , url: 'help.html#cleafix' } - ] - } - , { - name: 'Atoms', url: 'atom.html' - , description: 'Very specific classes used for creating anomalies or fixing broken styles.' - , sub: [ - { name: 'Table of Contents', url: 'atom.html#table-contents' } - , { name: 'margin-bottom' , url: 'atom.html#margin-bottom' } - , { name: 'padding-top' , url: 'atom.html#padding-top' } - ] - } - ] - Xmeter.DOCS_CLASSES = { - figure : 'docs-figure' - , pre : 'docs-pre' - , code : 'docs-code' - , form : 'docs-form' - } - Xmeter.getPage = function getPage(url0) { - return Xmeter.PAGES.find(function (item) { return item.url === url0 }) - } - return Xmeter - })() diff --git a/docs/scripts/Xmeter.class.js b/docs/scripts/Xmeter.class.js new file mode 100644 index 0000000..46c2644 --- /dev/null +++ b/docs/scripts/Xmeter.class.js @@ -0,0 +1,80 @@ +var Xmeter = (function () { + function Xmeter() {} + Xmeter.PAGES = [ + { + name: 'Pattern Library', url: 'index.html' + , description: '' + } + , { + name: 'Visual Design', url: 'visual.html' + , description: 'Color and font schemes, look-and-feel, overall mood and tone.' + , is_hidden: true + } + , { + name: 'Base Typography', url: 'base.html' + , description: 'Bare, unstyled HTML elements. No classes.' + , sub: [ + { name: 'Table of Contents' , url: 'base.html#table-contents' } + , { name: 'Headings & Paragraphs', url: 'base.html#headings-paragraphs' } + , { name: 'Lists' , url: 'base.html#lists' } + , { name: 'Tables' , url: 'base.html#tables' } + , { + name: 'Text-Level Elements', url: '#text-level-elements' + , sub: [ + { name: 'Links' , url: 'base.html#links' } + , { name: 'Stress' , url: 'base.html#stress' } + , { name: 'Documentation', url: 'base.html#documentation' } + , { name: 'Data' , url: 'base.html#data' } + ] + } + , { name: 'Embedded Elements' , url: 'base.html#embedded-elements' } + , { name: 'Forms' , url: 'base.html#forms' } + , { name: 'Interactive Elements', url: 'base.html#interactive-elements' } + ] + } + , { + name: 'Objects', url: 'obj.html' + , description: 'Patterns of structure that can be reused many times for many different purposes.' + , sub: [ + { name: 'Table of Contents', url: 'obj.html#table-contents' } + , { name: 'The List Object' , url: 'obj.html#list-object' } + , { name: 'The Flex Object' , url: 'obj.html#flex-object' } + , { name: 'The Grid Object' , url: 'obj.html#grid-object' } + ] + } + , { + name: 'Components', url: 'comp.html' + , description: 'Patterns of look-and-feel that are each only used for one purpose.' + , is_hidden: true + } + , { + name: 'Helpers', url: 'help.html' + , description: 'Somewhat explicit classes used for enhancing default styles.' + , sub: [ + { name: 'Table of Contents', url: 'help.html#table-contents' } + , { name: 'Block' , url: 'help.html#block' } + , { name: 'Inline' , url: 'help.html#inline' } + , { name: 'Clearfix' , url: 'help.html#cleafix' } + ] + } + , { + name: 'Atoms', url: 'atom.html' + , description: 'Very specific classes used for creating anomalies or fixing broken styles.' + , sub: [ + { name: 'Table of Contents', url: 'atom.html#table-contents' } + , { name: 'margin-bottom' , url: 'atom.html#margin-bottom' } + , { name: 'padding-top' , url: 'atom.html#padding-top' } + ] + } + ] + Xmeter.DOCS_CLASSES = { + figure : 'docs-figure' + , pre : 'docs-pre' + , code : 'docs-code' + , form : 'docs-form' + } + Xmeter.getPage = function getPage(url0) { + return Xmeter.PAGES.find(function (item) { return item.url === url0 }) + } + return Xmeter +})() From e4e58013f4acd5dd0fddfbbfe83aa4a0cf0a848c Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Tue, 2 Aug 2016 22:21:47 -0400 Subject: [PATCH 16/53] Page and Styleguide classes --- docs/_docs.tpl.jade | 21 +++--- docs/atom.jade | 2 +- docs/base.jade | 2 +- docs/help.jade | 2 +- docs/includes/_data.jade | 109 +++++++++++++++++++++++++++---- docs/index.jade | 6 -- docs/obj.jade | 2 +- docs/scripts/Page.class.js | 107 ++++++++++++++++++++++++++++++ docs/scripts/Styleguide.class.js | 61 +++++++++++++++++ docs/scripts/Xmeter.class.js | 80 ----------------------- package.json | 6 +- 11 files changed, 283 insertions(+), 115 deletions(-) create mode 100644 docs/scripts/Page.class.js create mode 100644 docs/scripts/Styleguide.class.js delete mode 100644 docs/scripts/Xmeter.class.js diff --git a/docs/_docs.tpl.jade b/docs/_docs.tpl.jade index 7b1edc7..6d958ec 100644 --- a/docs/_docs.tpl.jade +++ b/docs/_docs.tpl.jade @@ -1,12 +1,11 @@ doctype html html(lang="en") + include includes/_data.jade + block vars + - + var page = Xmeter.site head - include includes/_data.jade - block vars - - - var project_name = 'Xmeter' - var page = {} - title= page.name + ' | ' + project_name + title= page.title || (page.name + ' | ' + Xmeter.site.name) meta(charset="utf-8") meta(name="viewport" content="width=device-width, initial-scale=1") meta(name="description" content="A demo of Xmeter styles.") @@ -16,17 +15,17 @@ html(lang="en") main.docs-main block main header - h1= project_name + ' — ' + page.name + h1= page.title || (Xmeter.site.name + ' — ' + page.name) block mainIntro - p= page.description + p= page.getDescription() nav#table-contents h2 Table of Contents block toc - +doctoc({pages: page.sub, depth: Infinity}) - unless page === Xmeter.getPage('index.html') + +doctoc({pages: page.getPagesAll(), depth: Infinity}) + unless page === Xmeter.site footer: nav h1 Sitemap - +doctoc({pages: Xmeter.PAGES}) + +doctoc({pages: Xmeter.site.getPagesAll()}) block scripts script(src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous") script. diff --git a/docs/atom.jade b/docs/atom.jade index 15a8e9d..4f27188 100644 --- a/docs/atom.jade +++ b/docs/atom.jade @@ -1,7 +1,7 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.getPage('atom.html') + - var page = Xmeter.site.getPage('atom.html') block append main include includes/_atom.margin-bottom.docs.jade diff --git a/docs/base.jade b/docs/base.jade index 0a1a18d..f89c535 100644 --- a/docs/base.jade +++ b/docs/base.jade @@ -1,7 +1,7 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.getPage('base.html') + - var page = Xmeter.site.getPage('base.html') block append main - var classname = Xmeter.DOCS_CLASSES diff --git a/docs/help.jade b/docs/help.jade index ea34949..334fbfc 100644 --- a/docs/help.jade +++ b/docs/help.jade @@ -1,7 +1,7 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.getPage('help.html') + - var page = Xmeter.site.getPage('help.html') block append main include includes/_h-Block.docs.jade diff --git a/docs/includes/_data.jade b/docs/includes/_data.jade index 642ce42..dcf9d69 100644 --- a/docs/includes/_data.jade +++ b/docs/includes/_data.jade @@ -1,16 +1,101 @@ -include class/_Xmeter.class.jade +include class/_Page.class.jade +include class/_Styleguide.class.jade +- + //- var + //- Page = require('./Page.class.js') + //- , Styleguide = require('./Styleguide.class.js') + + var Xmeter = (function () { + function Xmeter() {} + Xmeter.site = new Styleguide('Xmeter', '/') + .setTitle('Xmeter Style Guide') + //- Xmeter.site.pages = [ + //- { + //- name: 'Pattern Library', url: 'index.html' + //- , description: '' + //- } + //- , { + //- name: 'Visual Design', url: 'visual.html' + //- , description: 'Color and font schemes, look-and-feel, overall mood and tone.' + //- , is_hidden: true + //- } + //- , { + //- name: 'Base Typography', url: 'base.html' + //- , description: 'Bare, unstyled HTML elements. No classes.' + //- , sub: [ + //- { name: 'Table of Contents' , url: 'base.html#table-contents' } + //- , { name: 'Headings & Paragraphs', url: 'base.html#headings-paragraphs' } + //- , { name: 'Lists' , url: 'base.html#lists' } + //- , { name: 'Tables' , url: 'base.html#tables' } + //- , { + //- name: 'Text-Level Elements', url: '#text-level-elements' + //- , sub: [ + //- { name: 'Links' , url: 'base.html#links' } + //- , { name: 'Stress' , url: 'base.html#stress' } + //- , { name: 'Documentation', url: 'base.html#documentation' } + //- , { name: 'Data' , url: 'base.html#data' } + //- ] + //- } + //- , { name: 'Embedded Elements' , url: 'base.html#embedded-elements' } + //- , { name: 'Forms' , url: 'base.html#forms' } + //- , { name: 'Interactive Elements', url: 'base.html#interactive-elements' } + //- ] + //- } + //- , { + //- name: 'Objects', url: 'obj.html' + //- , description: 'Patterns of structure that can be reused many times for many different purposes.' + //- , sub: [ + //- { name: 'Table of Contents', url: 'obj.html#table-contents' } + //- , { name: 'The List Object' , url: 'obj.html#list-object' } + //- , { name: 'The Flex Object' , url: 'obj.html#flex-object' } + //- , { name: 'The Grid Object' , url: 'obj.html#grid-object' } + //- ] + //- } + //- , { + //- name: 'Components', url: 'comp.html' + //- , description: 'Patterns of look-and-feel that are each only used for one purpose.' + //- , is_hidden: true + //- } + //- , { + //- name: 'Helpers', url: 'help.html' + //- , description: 'Somewhat explicit classes used for enhancing default styles.' + //- , sub: [ + //- { name: 'Table of Contents', url: 'help.html#table-contents' } + //- , { name: 'Block' , url: 'help.html#block' } + //- , { name: 'Inline' , url: 'help.html#inline' } + //- , { name: 'Clearfix' , url: 'help.html#cleafix' } + //- ] + //- } + //- , { + //- name: 'Atoms', url: 'atom.html' + //- , description: 'Very specific classes used for creating anomalies or fixing broken styles.' + //- , sub: [ + //- { name: 'Table of Contents', url: 'atom.html#table-contents' } + //- , { name: 'margin-bottom' , url: 'atom.html#margin-bottom' } + //- , { name: 'padding-top' , url: 'atom.html#padding-top' } + //- ] + //- } + //- ] + Xmeter.DOCS_CLASSES = { + figure : 'docs-figure' + , pre : 'docs-pre' + , code : 'docs-code' + , form : 'docs-form' + } + return Xmeter + })() mixin doctoc(args) - - var pages = args.pages || [] - var class_obj = args.class_obj || {} - var depth = +args.depth || 0 - ol(class=class_obj.listclasses) + var pages = args.pages || [] + , classes = args.classes || {} + , depth = +args.depth || 0 + ol(class=classes.listclasses) each item in pages - unless item.is_hidden - li(class=class_obj.itemclasses) - a(class=class_obj.linkclasses href=item.url)= item.name - if item.description - = ': ' + item.description - if item.sub && depth > 0 - +doctoc({pages: item.sub, class_obj: (class_obj.sub || {}), depth: depth-1}) + unless item.isHidden() + li(class=classes.itemclasses) + a(class=classes.linkclasses href=item.getURL())= item.getName() + if item.getDescription() + = ': ' + item.getDescription() + if item.getPagesAll().length && depth > 0 + +doctoc({pages: item.getPagesAll(), classes: (classes.sub || {}), depth: depth-1}) diff --git a/docs/index.jade b/docs/index.jade index a3e462c..4ccb649 100644 --- a/docs/index.jade +++ b/docs/index.jade @@ -1,7 +1 @@ extends _docs.tpl.jade - -block append vars - - var page = Xmeter.getPage('index.html') - -block toc - +doctoc({pages: Xmeter.PAGES, depth: Infinity}) diff --git a/docs/obj.jade b/docs/obj.jade index 79be0e7..48c42a7 100644 --- a/docs/obj.jade +++ b/docs/obj.jade @@ -1,7 +1,7 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.getPage('obj.html') + - var page = Xmeter.site.getPage('obj.html') block append main include includes/_o-List.docs.jade diff --git a/docs/scripts/Page.class.js b/docs/scripts/Page.class.js new file mode 100644 index 0000000..e4d0c05 --- /dev/null +++ b/docs/scripts/Page.class.js @@ -0,0 +1,107 @@ +var Page = (function () { + // CONSTRUCTOR + function Page($pageinfo) { + var self = this + $pageinfo = $pageinfo || {} + self.name = $pageinfo.name + self.url = $pageinfo.url + self.title = '' + self.description = '' + self.keywords = null + self.is_hidden = false + self.pages = [] + } + + // SETTER FUNCTIONS + Page.prototype.setTitle = function setTitle(arg) { + var text + if (typeof arg === 'function') { + text = arg.call(this) + } else { + text = arg + } + this.title = text + return this + } + Page.prototype.setDescription = function setDescription(arg) { + var text + if (typeof arg === 'function') { + text = arg.call(this) + } else { + text = arg + } + this.description = text + return this + } + Page.prototype.setKeywords = function setKeywords(arg) { + var arr + if (typeof arg === 'function') { + arr = arg.call(this) + } else { + arr = arg + } + this.keywords = arr + return this + } + Page.prototype.hide = function hide(bool) { + // NOTE method overloading // param defaults to true + this.is_hidden = (bool === undefined) ? true : bool + return this + } + Page.prototype.addPage = function addPage($page) { + this.pages.push($page) + return this + } + Page.prototype.removePage = function removePage(arg) { + var page + if (typeof arg === 'function') { + page = arg.call(this) + } else if (typeof arg === 'string') { + page = this.getPage(arg) + } else { + page = arg + } + var index = this.pages.indexOf(page) + if (index >= 0) this.pages.splice(index, 1) + return this + } + + // GETTER FUNCTIONS + Page.prototype.getName = function getName() { + return this.name + } + Page.prototype.getURL = function getURL() { + return this.url + } + Page.prototype.getTitle = function getTitle() { + return this.title + } + Page.prototype.getDescription = function getDescription() { + return this.description + } + Page.prototype.getKeywords = function getKeywords() { + return this.keywords.slice() + } + Page.prototype.isHidden = function isHidden() { + return this.is_hidden + } + Page.prototype.getPage = function getPage(url) { + return this.pages.find(function (item) { return item.url === url }) || null + } + Page.prototype.getPagesAll = function getPagesAll() { + return this.pages.slice() + } + + // METHODS + Page.prototype.findPage = function findPage(url) { + return this.getPage(url) + || (function (self) { + var ancestor = self.pages.find(function (item) { return item.findPage(url) }) + return (ancestor) ? ancestor.findPage(url) : null + })(this) + } + + // STATIC MEMBERS + + return Page +})() diff --git a/docs/scripts/Styleguide.class.js b/docs/scripts/Styleguide.class.js new file mode 100644 index 0000000..b715c3d --- /dev/null +++ b/docs/scripts/Styleguide.class.js @@ -0,0 +1,61 @@ +// var +// Page = require('./Page.class.js') + +var Styleguide = (function () { + // CONSTRUCTOR + function Styleguide(name, url) { + var self = this + Page.call(self, {name: name, url: url}) + ;(function () { + // adding pages to self.pages + Page.prototype.addPage.call(self, new Page({ name: 'Pattern Library', url: 'index.html' })) + Page.prototype.addPage.call(self, new Page({ name: 'Visual Design', url: 'visual.html' }) + .setDescription('Color and font schemes, look-and-feel, overall voice and tone.') + .hide() + ) + Page.prototype.addPage.call(self, new Page({ name: 'Base Typography', url: 'base.html' }) + .setDescription('Bare, unstyled HTML elements. No classes.') + .addPage(new Page({ name: 'Table of Contents' , url: 'base.html#table-contents' })) + .addPage(new Page({ name: 'Headings & Paragraphs', url: 'base.html#headings-paragraphs' })) + .addPage(new Page({ name: 'Lists' , url: 'base.html#lists' })) + .addPage(new Page({ name: 'Tables' , url: 'base.html#tables' })) + .addPage(new Page({ name: 'Text-Level Elements' , url: '#text-level-elements' }) + .addPage(new Page({ name: 'Links' , url: 'base.html#links' })) + .addPage(new Page({ name: 'Stress' , url: 'base.html#stress' })) + .addPage(new Page({ name: 'Documentation', url: 'base.html#documentation' })) + .addPage(new Page({ name: 'Data' , url: 'base.html#data' })) + ) + .addPage(new Page({ name: 'Embedded Elements' , url: 'base.html#embedded-elements' })) + .addPage(new Page({ name: 'Forms' , url: 'base.html#forms' })) + .addPage(new Page({ name: 'Interactive Elements', url: 'base.html#interactive-elements' })) + ) + Page.prototype.addPage.call(self, new Page({ name: 'Objects', url: 'obj.html' }) + .setDescription('Patterns of structure that can be reused many times for many different purposes.') + .addPage(new Page({ name: 'Table of Contents', url: 'obj.html#table-contents' })) + .addPage(new Page({ name: 'The List Object' , url: 'obj.html#list-object' })) + .addPage(new Page({ name: 'The Flex Object' , url: 'obj.html#flex-object' })) + .addPage(new Page({ name: 'The Grid Object' , url: 'obj.html#grid-object' })) + ) + Page.prototype.addPage.call(self, new Page({ name: 'Components', url: 'comp.html' }) + .setDescription('Patterns of look-and-feel that are each only used for one purpose.') + .hide() + ) + Page.prototype.addPage.call(self, new Page({ name: 'Helpers', url: 'help.html' }) + .setDescription('Somewhat explicit classes used for enhancing default styles.') + .addPage(new Page({ name: 'Table of Contents', url: 'help.html#table-contents' })) + .addPage(new Page({ name: 'Block' , url: 'help.html#block' })) + .addPage(new Page({ name: 'Inline' , url: 'help.html#inline' })) + .addPage(new Page({ name: 'Clearfix' , url: 'help.html#cleafix' })) + ) + Page.prototype.addPage.call(self, new Page({ name: 'Atoms', url: 'atom.html' }) + .setDescription('Very specific classes used for creating anomalies or fixing broken styles.') + .addPage(new Page({ name: 'Table of Contents', url: 'atom.html#table-contents' })) + .addPage(new Page({ name: 'margin-bottom' , url: 'atom.html#margin-bottom' })) + .addPage(new Page({ name: 'padding-top' , url: 'atom.html#padding-top' })) + ) + })() + } + Styleguide.prototype = Object.create(Page.prototype) + Styleguide.prototype.constructor = Styleguide + return Styleguide +})() diff --git a/docs/scripts/Xmeter.class.js b/docs/scripts/Xmeter.class.js deleted file mode 100644 index 46c2644..0000000 --- a/docs/scripts/Xmeter.class.js +++ /dev/null @@ -1,80 +0,0 @@ -var Xmeter = (function () { - function Xmeter() {} - Xmeter.PAGES = [ - { - name: 'Pattern Library', url: 'index.html' - , description: '' - } - , { - name: 'Visual Design', url: 'visual.html' - , description: 'Color and font schemes, look-and-feel, overall mood and tone.' - , is_hidden: true - } - , { - name: 'Base Typography', url: 'base.html' - , description: 'Bare, unstyled HTML elements. No classes.' - , sub: [ - { name: 'Table of Contents' , url: 'base.html#table-contents' } - , { name: 'Headings & Paragraphs', url: 'base.html#headings-paragraphs' } - , { name: 'Lists' , url: 'base.html#lists' } - , { name: 'Tables' , url: 'base.html#tables' } - , { - name: 'Text-Level Elements', url: '#text-level-elements' - , sub: [ - { name: 'Links' , url: 'base.html#links' } - , { name: 'Stress' , url: 'base.html#stress' } - , { name: 'Documentation', url: 'base.html#documentation' } - , { name: 'Data' , url: 'base.html#data' } - ] - } - , { name: 'Embedded Elements' , url: 'base.html#embedded-elements' } - , { name: 'Forms' , url: 'base.html#forms' } - , { name: 'Interactive Elements', url: 'base.html#interactive-elements' } - ] - } - , { - name: 'Objects', url: 'obj.html' - , description: 'Patterns of structure that can be reused many times for many different purposes.' - , sub: [ - { name: 'Table of Contents', url: 'obj.html#table-contents' } - , { name: 'The List Object' , url: 'obj.html#list-object' } - , { name: 'The Flex Object' , url: 'obj.html#flex-object' } - , { name: 'The Grid Object' , url: 'obj.html#grid-object' } - ] - } - , { - name: 'Components', url: 'comp.html' - , description: 'Patterns of look-and-feel that are each only used for one purpose.' - , is_hidden: true - } - , { - name: 'Helpers', url: 'help.html' - , description: 'Somewhat explicit classes used for enhancing default styles.' - , sub: [ - { name: 'Table of Contents', url: 'help.html#table-contents' } - , { name: 'Block' , url: 'help.html#block' } - , { name: 'Inline' , url: 'help.html#inline' } - , { name: 'Clearfix' , url: 'help.html#cleafix' } - ] - } - , { - name: 'Atoms', url: 'atom.html' - , description: 'Very specific classes used for creating anomalies or fixing broken styles.' - , sub: [ - { name: 'Table of Contents', url: 'atom.html#table-contents' } - , { name: 'margin-bottom' , url: 'atom.html#margin-bottom' } - , { name: 'padding-top' , url: 'atom.html#padding-top' } - ] - } - ] - Xmeter.DOCS_CLASSES = { - figure : 'docs-figure' - , pre : 'docs-pre' - , code : 'docs-code' - , form : 'docs-form' - } - Xmeter.getPage = function getPage(url0) { - return Xmeter.PAGES.find(function (item) { return item.url === url0 }) - } - return Xmeter -})() diff --git a/package.json b/package.json index bdaf5ec..15d86f7 100644 --- a/package.json +++ b/package.json @@ -15,9 +15,11 @@ }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "js2pug": "js2pug docs/scripts/Xmeter.class.js && mv docs/scripts/Xmeter.class.js.pug docs/includes/class/_Xmeter.class.jade", + "js2pug:page": "js2pug docs/scripts/Page.class.js && mv docs/scripts/Page.class.js.pug docs/includes/class/_Page.class.jade", + "js2pug:sg": "js2pug docs/scripts/Styleguide.class.js && mv docs/scripts/Styleguide.class.js.pug docs/includes/class/_Styleguide.class.jade", + "js2pug:all": "npm run js2pug:page && npm run js2pug:sg", "jade:docs": "jade docs/{index,base,obj,help,atom}.jade", - "jade:all": "npm run js2pug && npm run jade:docs", + "jade:all": "npm run js2pug:all && npm run jade:docs", "lessc:docs": "lessc docs/styles/docs.less docs/styles/docs.css", "lessc:xmeter": "lessc-each src/ build/ && lessc xmeter.less xmeter.css", "lessc:all": "npm run lessc:docs && npm run lessc:xmeter", From 75b11cc2ef2b676e4fe5f07ad626bf7cb914905d Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Sun, 7 Aug 2016 13:51:46 -0400 Subject: [PATCH 17/53] restructure docs data --- docs/_docs.tpl.jade | 21 ++- docs/atom.jade | 2 +- docs/base.jade | 2 +- docs/help.jade | 2 +- docs/includes/_data.jade | 167 +++++++++++---------- docs/includes/class/_Page.class.jade | 109 ++++++++++++++ docs/includes/class/_Styleguide.class.jade | 63 ++++++++ docs/index.jade | 6 - docs/obj.jade | 2 +- 9 files changed, 272 insertions(+), 102 deletions(-) create mode 100644 docs/includes/class/_Page.class.jade create mode 100644 docs/includes/class/_Styleguide.class.jade diff --git a/docs/_docs.tpl.jade b/docs/_docs.tpl.jade index 7b1edc7..de76d6b 100644 --- a/docs/_docs.tpl.jade +++ b/docs/_docs.tpl.jade @@ -1,12 +1,11 @@ doctype html html(lang="en") + include includes/_data.jade + block vars + - + var page = Xmeter.docs 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="viewport" content="width=device-width, initial-scale=1") meta(name="description" content="A demo of Xmeter styles.") @@ -16,17 +15,17 @@ html(lang="en") main.docs-main block main header - h1= project_name + ' — ' + page.name + h1= page.title || (Xmeter.docs.name + ' — ' + page.name) block mainIntro - p= page.description + p= page.getDescription() nav#table-contents h2 Table of Contents block toc - +doctoc({pages: page.sub, depth: Infinity}) - unless page === Xmeter.getPage('index.html') + +doctoc({pages: page.getPagesAll(), depth: Infinity}) + unless page === Xmeter.docs footer: nav h1 Sitemap - +doctoc({pages: Xmeter.PAGES}) + +doctoc({pages: Xmeter.docs.getPagesAll()}) block scripts script(src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous") script. diff --git a/docs/atom.jade b/docs/atom.jade index 15a8e9d..e988bde 100644 --- a/docs/atom.jade +++ b/docs/atom.jade @@ -1,7 +1,7 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.getPage('atom.html') + - var page = Xmeter.docs.getPage('atom.html') block append main include includes/_atom.margin-bottom.docs.jade diff --git a/docs/base.jade b/docs/base.jade index 0a1a18d..6fd2da3 100644 --- a/docs/base.jade +++ b/docs/base.jade @@ -1,7 +1,7 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.getPage('base.html') + - var page = Xmeter.docs.getPage('base.html') block append main - var classname = Xmeter.DOCS_CLASSES diff --git a/docs/help.jade b/docs/help.jade index ea34949..7939bcc 100644 --- a/docs/help.jade +++ b/docs/help.jade @@ -1,7 +1,7 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.getPage('help.html') + - var page = Xmeter.docs.getPage('help.html') block append main include includes/_h-Block.docs.jade diff --git a/docs/includes/_data.jade b/docs/includes/_data.jade index 11cc208..69bb349 100644 --- a/docs/includes/_data.jade +++ b/docs/includes/_data.jade @@ -1,96 +1,101 @@ +include class/_Page.class.jade +include class/_Styleguide.class.jade - + //- var + //- Page = require('./Page.class.js') + //- , Styleguide = require('./Styleguide.class.js') + var Xmeter = (function () { function Xmeter() {} - Xmeter.PAGES = [ - { - name: 'Pattern Library', url: 'index.html' - , description: '' - } - , { - name: 'Visual Design', url: 'visual.html' - , description: 'Color and font schemes, look-and-feel, overall mood and tone.' - , is_hidden: true - } - , { - name: 'Base Typography', url: 'base.html' - , description: 'Bare, unstyled HTML elements. No classes.' - , sub: [ - { name: 'Table of Contents' , url: 'base.html#table-contents' } - , { name: 'Headings & Paragraphs', url: 'base.html#headings-paragraphs' } - , { name: 'Lists' , url: 'base.html#lists' } - , { name: 'Tables' , url: 'base.html#tables' } - , { - name: 'Text-Level Elements', url: '#text-level-elements' - , sub: [ - { name: 'Links' , url: 'base.html#links' } - , { name: 'Stress' , url: 'base.html#stress' } - , { name: 'Documentation', url: 'base.html#documentation' } - , { name: 'Data' , url: 'base.html#data' } - ] - } - , { name: 'Embedded Elements' , url: 'base.html#embedded-elements' } - , { name: 'Forms' , url: 'base.html#forms' } - , { name: 'Interactive Elements', url: 'base.html#interactive-elements' } - ] - } - , { - name: 'Objects', url: 'obj.html' - , description: 'Patterns of structure that can be reused many times for many different purposes.' - , sub: [ - { name: 'Table of Contents', url: 'obj.html#table-contents' } - , { name: 'The List Object' , url: 'obj.html#list-object' } - , { name: 'The Flex Object' , url: 'obj.html#flex-object' } - , { name: 'The Grid Object' , url: 'obj.html#grid-object' } - ] - } - , { - name: 'Components', url: 'comp.html' - , description: 'Patterns of look-and-feel that are each only used for one purpose.' - , is_hidden: true - } - , { - name: 'Helpers', url: 'help.html' - , description: 'Somewhat explicit classes used for enhancing default styles.' - , sub: [ - { name: 'Table of Contents', url: 'help.html#table-contents' } - , { name: 'Block' , url: 'help.html#block' } - , { name: 'Inline' , url: 'help.html#inline' } - , { name: 'Clearfix' , url: 'help.html#cleafix' } - ] - } - , { - name: 'Atoms', url: 'atom.html' - , description: 'Very specific classes used for creating anomalies or fixing broken styles.' - , sub: [ - { name: 'Table of Contents', url: 'atom.html#table-contents' } - , { name: 'margin-bottom' , url: 'atom.html#margin-bottom' } - , { name: 'padding-top' , url: 'atom.html#padding-top' } - ] - } - ] + Xmeter.docs = new Styleguide('Xmeter', '/') + .setTitle('Xmeter Style Guide') + //- Xmeter.docs.pages = [ + //- { + //- name: 'Pattern Library', url: 'index.html' + //- , description: '' + //- } + //- , { + //- name: 'Visual Design', url: 'visual.html' + //- , description: 'Color and font schemes, look-and-feel, overall mood and tone.' + //- , is_hidden: true + //- } + //- , { + //- name: 'Base Typography', url: 'base.html' + //- , description: 'Bare, unstyled HTML elements. No classes.' + //- , sub: [ + //- { name: 'Table of Contents' , url: 'base.html#table-contents' } + //- , { name: 'Headings & Paragraphs', url: 'base.html#headings-paragraphs' } + //- , { name: 'Lists' , url: 'base.html#lists' } + //- , { name: 'Tables' , url: 'base.html#tables' } + //- , { + //- name: 'Text-Level Elements', url: '#text-level-elements' + //- , sub: [ + //- { name: 'Links' , url: 'base.html#links' } + //- , { name: 'Stress' , url: 'base.html#stress' } + //- , { name: 'Documentation', url: 'base.html#documentation' } + //- , { name: 'Data' , url: 'base.html#data' } + //- ] + //- } + //- , { name: 'Embedded Elements' , url: 'base.html#embedded-elements' } + //- , { name: 'Forms' , url: 'base.html#forms' } + //- , { name: 'Interactive Elements', url: 'base.html#interactive-elements' } + //- ] + //- } + //- , { + //- name: 'Objects', url: 'obj.html' + //- , description: 'Patterns of structure that can be reused many times for many different purposes.' + //- , sub: [ + //- { name: 'Table of Contents', url: 'obj.html#table-contents' } + //- , { name: 'The List Object' , url: 'obj.html#list-object' } + //- , { name: 'The Flex Object' , url: 'obj.html#flex-object' } + //- , { name: 'The Grid Object' , url: 'obj.html#grid-object' } + //- ] + //- } + //- , { + //- name: 'Components', url: 'comp.html' + //- , description: 'Patterns of look-and-feel that are each only used for one purpose.' + //- , is_hidden: true + //- } + //- , { + //- name: 'Helpers', url: 'help.html' + //- , description: 'Somewhat explicit classes used for enhancing default styles.' + //- , sub: [ + //- { name: 'Table of Contents', url: 'help.html#table-contents' } + //- , { name: 'Block' , url: 'help.html#block' } + //- , { name: 'Inline' , url: 'help.html#inline' } + //- , { name: 'Clearfix' , url: 'help.html#cleafix' } + //- ] + //- } + //- , { + //- name: 'Atoms', url: 'atom.html' + //- , description: 'Very specific classes used for creating anomalies or fixing broken styles.' + //- , sub: [ + //- { name: 'Table of Contents', url: 'atom.html#table-contents' } + //- , { name: 'margin-bottom' , url: 'atom.html#margin-bottom' } + //- , { name: 'padding-top' , url: 'atom.html#padding-top' } + //- ] + //- } + //- ] Xmeter.DOCS_CLASSES = { figure : 'docs-figure' , pre : 'docs-pre' , code : 'docs-code' , form : 'docs-form' } - Xmeter.getPage = function getPage(url0) { - return Xmeter.PAGES.find(function (item) { return item.url === url0 }) || {} - } return Xmeter })() mixin doctoc(args) - - var pages = args.pages || [] - var class_obj = args.class_obj || {} - var depth = +args.depth || 0 - ol(class=class_obj.listclasses) + var pages = args.pages || [] + , classes = args.classes || {} + , depth = +args.depth || 0 + ol(class=classes.listclasses) each item in pages - unless item.is_hidden - li(class=class_obj.itemclasses) - a(class=class_obj.linkclasses href=item.url)= item.name - if item.description - = ': ' + item.description - if item.sub && depth > 0 - +doctoc({pages: item.sub, class_obj: (class_obj.sub || {}), depth: depth-1}) + unless item.isHidden() + li(class=classes.itemclasses) + a(class=classes.linkclasses href=item.getURL())= item.getName() + if item.getDescription() + = ': ' + item.getDescription() + if item.getPagesAll().length && depth > 0 + +doctoc({pages: item.getPagesAll(), classes: (classes.sub || {}), depth: depth-1}) diff --git a/docs/includes/class/_Page.class.jade b/docs/includes/class/_Page.class.jade new file mode 100644 index 0000000..a0943db --- /dev/null +++ b/docs/includes/class/_Page.class.jade @@ -0,0 +1,109 @@ +- + var Page = (function () { + //- CONSTRUCTOR + function Page($pageinfo) { + var self = this + $pageinfo = $pageinfo || {} + self.name = $pageinfo.name + self.url = $pageinfo.url + self.title = '' + self.description = '' + self.keywords = null + self.is_hidden = false + self.pages = [] + } + + //- SETTER FUNCTIONS + Page.prototype.setTitle = function setTitle(arg) { + var text + if (typeof arg === 'function') { + text = arg.call(this) + } else { + text = arg + } + this.title = text + return this + } + Page.prototype.setDescription = function setDescription(arg) { + var text + if (typeof arg === 'function') { + text = arg.call(this) + } else { + text = arg + } + this.description = text + return this + } + Page.prototype.setKeywords = function setKeywords(arg) { + var arr + if (typeof arg === 'function') { + arr = arg.call(this) + } else { + arr = arg + } + this.keywords = arr + return this + } + Page.prototype.hide = function hide(bool) { + //- NOTE method overloading //- param defaults to true + this.is_hidden = (bool === undefined) ? true : bool + return this + } + Page.prototype.addPage = function addPage($page) { + this.pages.push($page) + return this + } + Page.prototype.removePage = function removePage(arg) { + var page + if (typeof arg === 'function') { + page = arg.call(this) + } else if (typeof arg === 'string') { + page = this.getPage(arg) + } else { + page = arg + } + var index = this.pages.indexOf(page) + if (index >= 0) this.pages.splice(index, 1) + return this + } + + //- GETTER FUNCTIONS + Page.prototype.getName = function getName() { + return this.name + } + Page.prototype.getURL = function getURL() { + return this.url + } + Page.prototype.getTitle = function getTitle() { + return this.title + } + Page.prototype.getDescription = function getDescription() { + return this.description + } + Page.prototype.getKeywords = function getKeywords() { + return this.keywords.slice() + } + Page.prototype.isHidden = function isHidden() { + return this.is_hidden + } + Page.prototype.getPage = function getPage(url) { + return this.pages.find(function (item) { return item.url === url }) || null + } + Page.prototype.getPagesAll = function getPagesAll() { + return this.pages.slice() + } + + //- METHODS + Page.prototype.findPage = function findPage(url) { + return this.getPage(url) + || (function (self) { + var ancestor = self.pages.find(function (item) { return item.findPage(url) }) + return (ancestor) ? ancestor.findPage(url) : null + })(this) + } + + //- STATIC MEMBERS + + return Page + })() + \ No newline at end of file diff --git a/docs/includes/class/_Styleguide.class.jade b/docs/includes/class/_Styleguide.class.jade new file mode 100644 index 0000000..e1840a5 --- /dev/null +++ b/docs/includes/class/_Styleguide.class.jade @@ -0,0 +1,63 @@ +- + //- var + //- Page = require('./Page.class.js') + + var Styleguide = (function () { + //- CONSTRUCTOR + function Styleguide(name, url) { + var self = this + Page.call(self, {name: name, url: url}) + ;(function () { + //- adding pages to self.pages + Page.prototype.addPage.call(self, new Page({ name: 'Pattern Library', url: 'index.html' })) + Page.prototype.addPage.call(self, new Page({ name: 'Visual Design', url: 'visual.html' }) + .setDescription('Color and font schemes, look-and-feel, overall voice and tone.') + .hide() + ) + Page.prototype.addPage.call(self, new Page({ name: 'Base Typography', url: 'base.html' }) + .setDescription('Bare, unstyled HTML elements. No classes.') + .addPage(new Page({ name: 'Table of Contents' , url: 'base.html#table-contents' })) + .addPage(new Page({ name: 'Headings & Paragraphs', url: 'base.html#headings-paragraphs' })) + .addPage(new Page({ name: 'Lists' , url: 'base.html#lists' })) + .addPage(new Page({ name: 'Tables' , url: 'base.html#tables' })) + .addPage(new Page({ name: 'Text-Level Elements' , url: '#text-level-elements' }) + .addPage(new Page({ name: 'Links' , url: 'base.html#links' })) + .addPage(new Page({ name: 'Stress' , url: 'base.html#stress' })) + .addPage(new Page({ name: 'Documentation', url: 'base.html#documentation' })) + .addPage(new Page({ name: 'Data' , url: 'base.html#data' })) + ) + .addPage(new Page({ name: 'Embedded Elements' , url: 'base.html#embedded-elements' })) + .addPage(new Page({ name: 'Forms' , url: 'base.html#forms' })) + .addPage(new Page({ name: 'Interactive Elements', url: 'base.html#interactive-elements' })) + ) + Page.prototype.addPage.call(self, new Page({ name: 'Objects', url: 'obj.html' }) + .setDescription('Patterns of structure that can be reused many times for many different purposes.') + .addPage(new Page({ name: 'Table of Contents', url: 'obj.html#table-contents' })) + .addPage(new Page({ name: 'The List Object' , url: 'obj.html#list-object' })) + .addPage(new Page({ name: 'The Flex Object' , url: 'obj.html#flex-object' })) + .addPage(new Page({ name: 'The Grid Object' , url: 'obj.html#grid-object' })) + ) + Page.prototype.addPage.call(self, new Page({ name: 'Components', url: 'comp.html' }) + .setDescription('Patterns of look-and-feel that are each only used for one purpose.') + .hide() + ) + Page.prototype.addPage.call(self, new Page({ name: 'Helpers', url: 'help.html' }) + .setDescription('Somewhat explicit classes used for enhancing default styles.') + .addPage(new Page({ name: 'Table of Contents', url: 'help.html#table-contents' })) + .addPage(new Page({ name: 'Block' , url: 'help.html#block' })) + .addPage(new Page({ name: 'Inline' , url: 'help.html#inline' })) + .addPage(new Page({ name: 'Clearfix' , url: 'help.html#cleafix' })) + ) + Page.prototype.addPage.call(self, new Page({ name: 'Atoms', url: 'atom.html' }) + .setDescription('Very specific classes used for creating anomalies or fixing broken styles.') + .addPage(new Page({ name: 'Table of Contents', url: 'atom.html#table-contents' })) + .addPage(new Page({ name: 'margin-bottom' , url: 'atom.html#margin-bottom' })) + .addPage(new Page({ name: 'padding-top' , url: 'atom.html#padding-top' })) + ) + })() + } + Styleguide.prototype = Object.create(Page.prototype) + Styleguide.prototype.constructor = Styleguide + return Styleguide + })() + \ No newline at end of file diff --git a/docs/index.jade b/docs/index.jade index a3e462c..4ccb649 100644 --- a/docs/index.jade +++ b/docs/index.jade @@ -1,7 +1 @@ extends _docs.tpl.jade - -block append vars - - var page = Xmeter.getPage('index.html') - -block toc - +doctoc({pages: Xmeter.PAGES, depth: Infinity}) diff --git a/docs/obj.jade b/docs/obj.jade index 79be0e7..c8d4fcf 100644 --- a/docs/obj.jade +++ b/docs/obj.jade @@ -1,7 +1,7 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.getPage('obj.html') + - var page = Xmeter.docs.getPage('obj.html') block append main include includes/_o-List.docs.jade From 0a37f41413f3ca63d48c713ebd16d5bdb2f4c743 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Wed, 10 Aug 2016 15:02:37 -0400 Subject: [PATCH 18/53] rename class files --- .gitignore | 2 +- docs/{scripts => _classes}/Page.class.js | 0 docs/{scripts => _classes}/Styleguide.class.js | 0 docs/includes/_data.jade | 4 ++-- package.json | 4 ++-- 5 files changed, 5 insertions(+), 5 deletions(-) rename docs/{scripts => _classes}/Page.class.js (100%) rename docs/{scripts => _classes}/Styleguide.class.js (100%) diff --git a/.gitignore b/.gitignore index aa0a90c..7c2dc05 100644 --- a/.gitignore +++ b/.gitignore @@ -31,4 +31,4 @@ node_modules # Compiled source files build/ -docs/includes/class/ +docs/_classes/*.class.jade diff --git a/docs/scripts/Page.class.js b/docs/_classes/Page.class.js similarity index 100% rename from docs/scripts/Page.class.js rename to docs/_classes/Page.class.js diff --git a/docs/scripts/Styleguide.class.js b/docs/_classes/Styleguide.class.js similarity index 100% rename from docs/scripts/Styleguide.class.js rename to docs/_classes/Styleguide.class.js diff --git a/docs/includes/_data.jade b/docs/includes/_data.jade index dcf9d69..30bec21 100644 --- a/docs/includes/_data.jade +++ b/docs/includes/_data.jade @@ -1,5 +1,5 @@ -include class/_Page.class.jade -include class/_Styleguide.class.jade +include /docs/_classes/Page.class.jade +include /docs/_classes/Styleguide.class.jade - //- var //- Page = require('./Page.class.js') diff --git a/package.json b/package.json index 15d86f7..8fc1cbb 100644 --- a/package.json +++ b/package.json @@ -15,8 +15,8 @@ }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "js2pug:page": "js2pug docs/scripts/Page.class.js && mv docs/scripts/Page.class.js.pug docs/includes/class/_Page.class.jade", - "js2pug:sg": "js2pug docs/scripts/Styleguide.class.js && mv docs/scripts/Styleguide.class.js.pug docs/includes/class/_Styleguide.class.jade", + "js2pug:page": "js2pug docs/_classes/Page.class.js && mv docs/_classes/Page.class.js.pug docs/_classes/Page.class.jade", + "js2pug:sg": "js2pug docs/_classes/Styleguide.class.js && mv docs/_classes/Styleguide.class.js.pug docs/_classes/Styleguide.class.jade", "js2pug:all": "npm run js2pug:page && npm run js2pug:sg", "jade:docs": "jade docs/{index,base,obj,help,atom}.jade", "jade:all": "npm run js2pug:all && npm run jade:docs", From bf8d75f7d4c6395e802845d00424dbd97e384523 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Wed, 10 Aug 2016 15:03:42 -0400 Subject: [PATCH 19/53] refactor sg instance --- docs/_docs.tpl.jade | 10 +++++----- docs/atom.jade | 2 +- docs/base.jade | 2 +- docs/help.jade | 2 +- docs/includes/_data.jade | 4 ++-- docs/obj.jade | 2 +- 6 files changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/_docs.tpl.jade b/docs/_docs.tpl.jade index 6d958ec..de76d6b 100644 --- a/docs/_docs.tpl.jade +++ b/docs/_docs.tpl.jade @@ -3,9 +3,9 @@ html(lang="en") include includes/_data.jade block vars - - var page = Xmeter.site + var page = Xmeter.docs head - title= page.title || (page.name + ' | ' + Xmeter.site.name) + title= page.title || (page.name + ' | ' + Xmeter.docs.name) meta(charset="utf-8") meta(name="viewport" content="width=device-width, initial-scale=1") meta(name="description" content="A demo of Xmeter styles.") @@ -15,17 +15,17 @@ html(lang="en") main.docs-main block main header - h1= page.title || (Xmeter.site.name + ' — ' + page.name) + h1= page.title || (Xmeter.docs.name + ' — ' + page.name) block mainIntro p= page.getDescription() nav#table-contents h2 Table of Contents block toc +doctoc({pages: page.getPagesAll(), depth: Infinity}) - unless page === Xmeter.site + unless page === Xmeter.docs footer: nav h1 Sitemap - +doctoc({pages: Xmeter.site.getPagesAll()}) + +doctoc({pages: Xmeter.docs.getPagesAll()}) block scripts script(src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous") script. diff --git a/docs/atom.jade b/docs/atom.jade index 4f27188..e988bde 100644 --- a/docs/atom.jade +++ b/docs/atom.jade @@ -1,7 +1,7 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.site.getPage('atom.html') + - var page = Xmeter.docs.getPage('atom.html') block append main include includes/_atom.margin-bottom.docs.jade diff --git a/docs/base.jade b/docs/base.jade index f89c535..6fd2da3 100644 --- a/docs/base.jade +++ b/docs/base.jade @@ -1,7 +1,7 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.site.getPage('base.html') + - var page = Xmeter.docs.getPage('base.html') block append main - var classname = Xmeter.DOCS_CLASSES diff --git a/docs/help.jade b/docs/help.jade index 334fbfc..7939bcc 100644 --- a/docs/help.jade +++ b/docs/help.jade @@ -1,7 +1,7 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.site.getPage('help.html') + - var page = Xmeter.docs.getPage('help.html') block append main include includes/_h-Block.docs.jade diff --git a/docs/includes/_data.jade b/docs/includes/_data.jade index 30bec21..9d939a5 100644 --- a/docs/includes/_data.jade +++ b/docs/includes/_data.jade @@ -7,9 +7,9 @@ include /docs/_classes/Styleguide.class.jade var Xmeter = (function () { function Xmeter() {} - Xmeter.site = new Styleguide('Xmeter', '/') + Xmeter.docs = new Styleguide('Xmeter', '/') .setTitle('Xmeter Style Guide') - //- Xmeter.site.pages = [ + //- Xmeter.docs.pages = [ //- { //- name: 'Pattern Library', url: 'index.html' //- , description: '' diff --git a/docs/obj.jade b/docs/obj.jade index 48c42a7..c8d4fcf 100644 --- a/docs/obj.jade +++ b/docs/obj.jade @@ -1,7 +1,7 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.site.getPage('obj.html') + - var page = Xmeter.docs.getPage('obj.html') block append main include includes/_o-List.docs.jade From 48dd3f30383e6d43345eb59e43ca568b5898296b Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Sat, 13 Aug 2016 01:32:28 -0400 Subject: [PATCH 20/53] fix include statements --- .gitignore | 2 +- docs/includes/_data.jade | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/.gitignore b/.gitignore index 7c2dc05..aabe995 100644 --- a/.gitignore +++ b/.gitignore @@ -31,4 +31,4 @@ node_modules # Compiled source files build/ -docs/_classes/*.class.jade +docs/_classes/*.jade diff --git a/docs/includes/_data.jade b/docs/includes/_data.jade index 9d939a5..09ce001 100644 --- a/docs/includes/_data.jade +++ b/docs/includes/_data.jade @@ -1,9 +1,9 @@ -include /docs/_classes/Page.class.jade -include /docs/_classes/Styleguide.class.jade +include ../_classes/Page.class.jade +include ../_classes/Styleguide.class.jade - //- var - //- Page = require('./Page.class.js') - //- , Styleguide = require('./Styleguide.class.js') + //- Page = require('../_classes/Page.class.js') + //- , Styleguide = require('../_classes/Styleguide.class.js') var Xmeter = (function () { function Xmeter() {} From 906374c438e900e5132699cf3a03f80f8ca4cd91 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Sat, 13 Aug 2016 11:47:37 -0400 Subject: [PATCH 21/53] revise Styleguide & Xmeter classes & doctoc() mixin --- docs/_classes/Styleguide.class.js | 95 +++++++++++++++---------------- docs/_classes/Xmeter.class.js | 43 ++++++++++++++ docs/_docs.tpl.jade | 17 ++++-- docs/atom.jade | 2 +- docs/base.jade | 2 +- docs/help.jade | 2 +- docs/includes/_data.jade | 92 +++--------------------------- docs/index.jade | 2 + docs/obj.jade | 2 +- package.json | 3 +- 10 files changed, 116 insertions(+), 144 deletions(-) create mode 100644 docs/_classes/Xmeter.class.js diff --git a/docs/_classes/Styleguide.class.js b/docs/_classes/Styleguide.class.js index b715c3d..ee17568 100644 --- a/docs/_classes/Styleguide.class.js +++ b/docs/_classes/Styleguide.class.js @@ -1,61 +1,58 @@ // var // Page = require('./Page.class.js') +// TODO change classname to `StyleGuide` var Styleguide = (function () { // CONSTRUCTOR function Styleguide(name, url) { var self = this - Page.call(self, {name: name, url: url}) - ;(function () { - // adding pages to self.pages - Page.prototype.addPage.call(self, new Page({ name: 'Pattern Library', url: 'index.html' })) - Page.prototype.addPage.call(self, new Page({ name: 'Visual Design', url: 'visual.html' }) - .setDescription('Color and font schemes, look-and-feel, overall voice and tone.') - .hide() - ) - Page.prototype.addPage.call(self, new Page({ name: 'Base Typography', url: 'base.html' }) - .setDescription('Bare, unstyled HTML elements. No classes.') - .addPage(new Page({ name: 'Table of Contents' , url: 'base.html#table-contents' })) - .addPage(new Page({ name: 'Headings & Paragraphs', url: 'base.html#headings-paragraphs' })) - .addPage(new Page({ name: 'Lists' , url: 'base.html#lists' })) - .addPage(new Page({ name: 'Tables' , url: 'base.html#tables' })) - .addPage(new Page({ name: 'Text-Level Elements' , url: '#text-level-elements' }) - .addPage(new Page({ name: 'Links' , url: 'base.html#links' })) - .addPage(new Page({ name: 'Stress' , url: 'base.html#stress' })) - .addPage(new Page({ name: 'Documentation', url: 'base.html#documentation' })) - .addPage(new Page({ name: 'Data' , url: 'base.html#data' })) - ) - .addPage(new Page({ name: 'Embedded Elements' , url: 'base.html#embedded-elements' })) - .addPage(new Page({ name: 'Forms' , url: 'base.html#forms' })) - .addPage(new Page({ name: 'Interactive Elements', url: 'base.html#interactive-elements' })) - ) - Page.prototype.addPage.call(self, new Page({ name: 'Objects', url: 'obj.html' }) - .setDescription('Patterns of structure that can be reused many times for many different purposes.') - .addPage(new Page({ name: 'Table of Contents', url: 'obj.html#table-contents' })) - .addPage(new Page({ name: 'The List Object' , url: 'obj.html#list-object' })) - .addPage(new Page({ name: 'The Flex Object' , url: 'obj.html#flex-object' })) - .addPage(new Page({ name: 'The Grid Object' , url: 'obj.html#grid-object' })) - ) - Page.prototype.addPage.call(self, new Page({ name: 'Components', url: 'comp.html' }) - .setDescription('Patterns of look-and-feel that are each only used for one purpose.') - .hide() - ) - Page.prototype.addPage.call(self, new Page({ name: 'Helpers', url: 'help.html' }) - .setDescription('Somewhat explicit classes used for enhancing default styles.') - .addPage(new Page({ name: 'Table of Contents', url: 'help.html#table-contents' })) - .addPage(new Page({ name: 'Block' , url: 'help.html#block' })) - .addPage(new Page({ name: 'Inline' , url: 'help.html#inline' })) - .addPage(new Page({ name: 'Clearfix' , url: 'help.html#cleafix' })) - ) - Page.prototype.addPage.call(self, new Page({ name: 'Atoms', url: 'atom.html' }) - .setDescription('Very specific classes used for creating anomalies or fixing broken styles.') - .addPage(new Page({ name: 'Table of Contents', url: 'atom.html#table-contents' })) - .addPage(new Page({ name: 'margin-bottom' , url: 'atom.html#margin-bottom' })) - .addPage(new Page({ name: 'padding-top' , url: 'atom.html#padding-top' })) - ) - })() + Page.call(self, { name: name, url: url }) + self.was_initialized = false } Styleguide.prototype = Object.create(Page.prototype) Styleguide.prototype.constructor = Styleguide + + // METHODS + Styleguide.prototype.init = function init() { + var self = this + if (!self.was_initialized) { + self + .addPage(new Page({ name: self.name, url: 'index.html' })) + .addPage(new Page({ name: 'Visual Design', url: 'visual.html' }) + .setDescription('Color and font schemes, look-and-feel, overall voice and tone.') + ) + .addPage(new Page({ name: 'Base Typography', url: 'base.html' }) + .setDescription('Bare, unstyled HTML elements. No classes.') + .addPage(new Page({ name: 'Table of Contents' , url: '#table-contents' })) + .addPage(new Page({ name: 'Headings & Paragraphs', url: '#headings-paragraphs' })) + .addPage(new Page({ name: 'Lists' , url: '#lists' })) + .addPage(new Page({ name: 'Tables' , url: '#tables' })) + .addPage(new Page({ name: 'Text-Level Elements' , url: '#text-level-elements' }) + .addPage(new Page({ name: 'Links' , url: '#links' })) + .addPage(new Page({ name: 'Stress' , url: '#stress' })) + .addPage(new Page({ name: 'Documentation', url: '#documentation' })) + .addPage(new Page({ name: 'Data' , url: '#data' })) + ) + .addPage(new Page({ name: 'Embedded Elements' , url: '#embedded-elements' })) + .addPage(new Page({ name: 'Forms' , url: '#forms' })) + .addPage(new Page({ name: 'Interactive Elements', url: '#interactive-elements' })) + ) + .addPage(new Page({ name: 'Objects', url: 'obj.html' }) + .setDescription('Patterns of structure that can be reused many times for many different purposes.') + ) + .addPage(new Page({ name: 'Components', url: 'comp.html' }) + .setDescription('Patterns of look-and-feel that are each only used for one purpose.') + ) + .addPage(new Page({ name: 'Helpers', url: 'help.html' }) + .setDescription('Somewhat explicit classes used for enhancing default styles.') + ) + .addPage(new Page({ name: 'Atoms', url: 'atom.html' }) + .setDescription('Very specific classes used for creating anomalies or fixing broken styles.') + ) + .was_initialized = true + } + return self + } + return Styleguide })() diff --git a/docs/_classes/Xmeter.class.js b/docs/_classes/Xmeter.class.js new file mode 100644 index 0000000..124d86f --- /dev/null +++ b/docs/_classes/Xmeter.class.js @@ -0,0 +1,43 @@ +var Xmeter = (function () { + // CONSTRUCTOR + function Xmeter() { + var self = this + Styleguide.call(self, 'Xmeter', '/docs/' ) + Styleguide.prototype.setTitle.call(self, 'Xmeter Style Guide') + } + Xmeter.prototype = Object.create(Styleguide.prototype) + Xmeter.prototype.constructor = Xmeter + + // METHODS + Xmeter.prototype.init = function init() { + var self = this + Styleguide.prototype.init.call(self) + self.getPage('visual.html').hide() + self.getPage('obj.html') + .addPage(new Page({ name: 'Table of Contents', url: '#table-contents' })) + .addPage(new Page({ name: 'The List Object' , url: '#list-object' })) + .addPage(new Page({ name: 'The Flex Object' , url: '#flex-object' })) + .addPage(new Page({ name: 'The Grid Object' , url: '#grid-object' })) + self.getPage('comp.html').hide() + self.getPage('help.html') + .addPage(new Page({ name: 'Table of Contents', url: '#table-contents' })) + .addPage(new Page({ name: 'Block' , url: '#block' })) + .addPage(new Page({ name: 'Inline' , url: '#inline' })) + .addPage(new Page({ name: 'Clearfix' , url: '#cleafix' })) + self.getPage('atom.html') + .addPage(new Page({ name: 'Table of Contents', url: '#table-contents' })) + .addPage(new Page({ name: 'margin-bottom' , url: '#margin-bottom' })) + .addPage(new Page({ name: 'padding-top' , url: '#padding-top' })) + return self + } + + // STATIC MEMBERS + Xmeter.DOCS_CLASSES = { + figure : 'docs-figure' + , pre : 'docs-pre' + , code : 'docs-code' + , form : 'docs-form' + } + + return Xmeter +})() diff --git a/docs/_docs.tpl.jade b/docs/_docs.tpl.jade index de76d6b..a0ea26c 100644 --- a/docs/_docs.tpl.jade +++ b/docs/_docs.tpl.jade @@ -3,9 +3,10 @@ html(lang="en") include includes/_data.jade block vars - - var page = Xmeter.docs + var xm = (new Xmeter()).init() + var page = xm head - title= page.title || (page.name + ' | ' + Xmeter.docs.name) + title= page.title || (page.name + ' | ' + xm.name) meta(charset="utf-8") meta(name="viewport" content="width=device-width, initial-scale=1") meta(name="description" content="A demo of Xmeter styles.") @@ -15,17 +16,21 @@ html(lang="en") main.docs-main block main header - h1= page.title || (Xmeter.docs.name + ' — ' + page.name) + //- h1= page.title || (xm.name + ' — ' + page.name) + if page.title + h1= page.title + else + h1 #[a(href=xm.getURL())= xm.name] — #{page.name} block mainIntro p= page.getDescription() nav#table-contents h2 Table of Contents block toc - +doctoc({pages: page.getPagesAll(), depth: Infinity}) - unless page === Xmeter.docs + +doctoc({page: page, depth: Infinity}) + block footer footer: nav h1 Sitemap - +doctoc({pages: Xmeter.docs.getPagesAll()}) + +doctoc({page: xm}) block scripts script(src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous") script. diff --git a/docs/atom.jade b/docs/atom.jade index e988bde..596e1c1 100644 --- a/docs/atom.jade +++ b/docs/atom.jade @@ -1,7 +1,7 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.docs.getPage('atom.html') + - var page = xm.getPage('atom.html') block append main include includes/_atom.margin-bottom.docs.jade diff --git a/docs/base.jade b/docs/base.jade index 6fd2da3..e462d6c 100644 --- a/docs/base.jade +++ b/docs/base.jade @@ -1,7 +1,7 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.docs.getPage('base.html') + - var page = xm.getPage('base.html') block append main - var classname = Xmeter.DOCS_CLASSES diff --git a/docs/help.jade b/docs/help.jade index 7939bcc..11d311c 100644 --- a/docs/help.jade +++ b/docs/help.jade @@ -1,7 +1,7 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.docs.getPage('help.html') + - var page = xm.getPage('help.html') block append main include includes/_h-Block.docs.jade diff --git a/docs/includes/_data.jade b/docs/includes/_data.jade index d3187e7..16188c4 100644 --- a/docs/includes/_data.jade +++ b/docs/includes/_data.jade @@ -1,102 +1,26 @@ include ../_classes/Page.class.jade include ../_classes/Styleguide.class.jade +include ../_classes/Xmeter.class.jade - //- var //- Page = require('../_classes/Page.class.js') //- , Styleguide = require('../_classes/Styleguide.class.js') - - var Xmeter = (function () { - function Xmeter() {} - Xmeter.docs = new Styleguide('Xmeter', '/') - .setTitle('Xmeter Style Guide') - //- Xmeter.docs.pages = [ - //- { - //- name: 'Pattern Library', url: 'index.html' - //- , description: '' - //- } - //- , { - //- name: 'Visual Design', url: 'visual.html' - //- , description: 'Color and font schemes, look-and-feel, overall mood and tone.' - //- , is_hidden: true - //- } - //- , { - //- name: 'Base Typography', url: 'base.html' - //- , description: 'Bare, unstyled HTML elements. No classes.' - //- , sub: [ - //- { name: 'Table of Contents' , url: 'base.html#table-contents' } - //- , { name: 'Headings & Paragraphs', url: 'base.html#headings-paragraphs' } - //- , { name: 'Lists' , url: 'base.html#lists' } - //- , { name: 'Tables' , url: 'base.html#tables' } - //- , { - //- name: 'Text-Level Elements', url: '#text-level-elements' - //- , sub: [ - //- { name: 'Links' , url: 'base.html#links' } - //- , { name: 'Stress' , url: 'base.html#stress' } - //- , { name: 'Documentation', url: 'base.html#documentation' } - //- , { name: 'Data' , url: 'base.html#data' } - //- ] - //- } - //- , { name: 'Embedded Elements' , url: 'base.html#embedded-elements' } - //- , { name: 'Forms' , url: 'base.html#forms' } - //- , { name: 'Interactive Elements', url: 'base.html#interactive-elements' } - //- ] - //- } - //- , { - //- name: 'Objects', url: 'obj.html' - //- , description: 'Patterns of structure that can be reused many times for many different purposes.' - //- , sub: [ - //- { name: 'Table of Contents', url: 'obj.html#table-contents' } - //- , { name: 'The List Object' , url: 'obj.html#list-object' } - //- , { name: 'The Flex Object' , url: 'obj.html#flex-object' } - //- , { name: 'The Grid Object' , url: 'obj.html#grid-object' } - //- ] - //- } - //- , { - //- name: 'Components', url: 'comp.html' - //- , description: 'Patterns of look-and-feel that are each only used for one purpose.' - //- , is_hidden: true - //- } - //- , { - //- name: 'Helpers', url: 'help.html' - //- , description: 'Somewhat explicit classes used for enhancing default styles.' - //- , sub: [ - //- { name: 'Table of Contents', url: 'help.html#table-contents' } - //- , { name: 'Block' , url: 'help.html#block' } - //- , { name: 'Inline' , url: 'help.html#inline' } - //- , { name: 'Clearfix' , url: 'help.html#cleafix' } - //- ] - //- } - //- , { - //- name: 'Atoms', url: 'atom.html' - //- , description: 'Very specific classes used for creating anomalies or fixing broken styles.' - //- , sub: [ - //- { name: 'Table of Contents', url: 'atom.html#table-contents' } - //- , { name: 'margin-bottom' , url: 'atom.html#margin-bottom' } - //- , { name: 'padding-top' , url: 'atom.html#padding-top' } - //- ] - //- } - //- ] - Xmeter.DOCS_CLASSES = { - figure : 'docs-figure' - , pre : 'docs-pre' - , code : 'docs-code' - , form : 'docs-form' - } - return Xmeter - })() + //- , Xmeter = require('../_classes/Xmeter.class.js') mixin doctoc(args) - - var pages = args.pages || [] + var page = args.page || new Page() , classes = args.classes || {} , depth = +args.depth || 0 ol(class=classes.listclasses) - each item in pages + each item in page.getPagesAll() unless item.isHidden() li(class=classes.itemclasses) - a(class=classes.linkclasses href=item.getURL())= item.getName() + a(class=classes.linkclasses + href=((item.getURL().slice(0,1) === '#') ? page.getURL().concat(item.getURL()) : item.getURL()) + )= item.getName() if item.getDescription() = ': ' + item.getDescription() if item.getPagesAll().length && depth > 0 - +doctoc({pages: item.getPagesAll(), classes: (classes.sub || {}), depth: depth-1}) + +doctoc({page: item, classes: (classes.sub || {}), depth: depth-1}) diff --git a/docs/index.jade b/docs/index.jade index 4ccb649..feb5176 100644 --- a/docs/index.jade +++ b/docs/index.jade @@ -1 +1,3 @@ extends _docs.tpl.jade + +block footer diff --git a/docs/obj.jade b/docs/obj.jade index c8d4fcf..259169b 100644 --- a/docs/obj.jade +++ b/docs/obj.jade @@ -1,7 +1,7 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.docs.getPage('obj.html') + - var page = xm.getPage('obj.html') block append main include includes/_o-List.docs.jade diff --git a/package.json b/package.json index 8fc1cbb..8184e00 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,8 @@ "test": "echo \"Error: no test specified\" && exit 1", "js2pug:page": "js2pug docs/_classes/Page.class.js && mv docs/_classes/Page.class.js.pug docs/_classes/Page.class.jade", "js2pug:sg": "js2pug docs/_classes/Styleguide.class.js && mv docs/_classes/Styleguide.class.js.pug docs/_classes/Styleguide.class.jade", - "js2pug:all": "npm run js2pug:page && npm run js2pug:sg", + "js2pug:xm": "js2pug docs/_classes/Xmeter.class.js && mv docs/_classes/Xmeter.class.js.pug docs/_classes/Xmeter.class.jade", + "js2pug:all": "npm run js2pug:page && npm run js2pug:sg && npm run js2pug:xm", "jade:docs": "jade docs/{index,base,obj,help,atom}.jade", "jade:all": "npm run js2pug:all && npm run jade:docs", "lessc:docs": "lessc docs/styles/docs.less docs/styles/docs.css", From abff8ff5bb006667c32b6e8e3482da00fc4a16e6 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Sat, 13 Aug 2016 15:52:51 -0400 Subject: [PATCH 22/53] minor updates --- docs/_classes/Page.class.js | 6 +++++- docs/_classes/Styleguide.class.js | 10 ++++------ docs/_docs.tpl.jade | 14 ++++++-------- docs/index.jade | 3 +++ 4 files changed, 18 insertions(+), 15 deletions(-) diff --git a/docs/_classes/Page.class.js b/docs/_classes/Page.class.js index e4d0c05..36cb500 100644 --- a/docs/_classes/Page.class.js +++ b/docs/_classes/Page.class.js @@ -2,7 +2,7 @@ var Page = (function () { // CONSTRUCTOR function Page($pageinfo) { var self = this - $pageinfo = $pageinfo || {} + $pageinfo = $pageinfo || {} // NOTE constructor overloading self.name = $pageinfo.name self.url = $pageinfo.url self.title = '' @@ -65,6 +65,10 @@ var Page = (function () { if (index >= 0) this.pages.splice(index, 1) return this } + Page.prototype.removeAllPages = function removeAllPages() { + this.pages = [] + return this + } // GETTER FUNCTIONS Page.prototype.getName = function getName() { diff --git a/docs/_classes/Styleguide.class.js b/docs/_classes/Styleguide.class.js index ee17568..fe642ec 100644 --- a/docs/_classes/Styleguide.class.js +++ b/docs/_classes/Styleguide.class.js @@ -1,5 +1,4 @@ -// var -// Page = require('./Page.class.js') +// var Page = require('./Page.class.js') // TODO change classname to `StyleGuide` var Styleguide = (function () { @@ -16,7 +15,8 @@ var Styleguide = (function () { Styleguide.prototype.init = function init() { var self = this if (!self.was_initialized) { - self + self.was_initialized = true + return self .addPage(new Page({ name: self.name, url: 'index.html' })) .addPage(new Page({ name: 'Visual Design', url: 'visual.html' }) .setDescription('Color and font schemes, look-and-feel, overall voice and tone.') @@ -49,9 +49,7 @@ var Styleguide = (function () { .addPage(new Page({ name: 'Atoms', url: 'atom.html' }) .setDescription('Very specific classes used for creating anomalies or fixing broken styles.') ) - .was_initialized = true - } - return self + } else return } return Styleguide diff --git a/docs/_docs.tpl.jade b/docs/_docs.tpl.jade index a0ea26c..b4188f2 100644 --- a/docs/_docs.tpl.jade +++ b/docs/_docs.tpl.jade @@ -2,11 +2,9 @@ doctype html html(lang="en") include includes/_data.jade block vars - - - var xm = (new Xmeter()).init() - var page = xm + - var xm = new Xmeter().init() head - title= page.title || (page.name + ' | ' + xm.name) + title= page.getTitle() || (page.name + ' | ' + xm.name) meta(charset="utf-8") meta(name="viewport" content="width=device-width, initial-scale=1") meta(name="description" content="A demo of Xmeter styles.") @@ -16,11 +14,11 @@ html(lang="en") main.docs-main block main header - //- h1= page.title || (xm.name + ' — ' + page.name) - if page.title - h1= page.title + //- h1= page.getTitle() || (xm.getName() + ' — ' + page.getName()) + if page.getTitle() + h1= page.getTitle() else - h1 #[a(href=xm.getURL())= xm.name] — #{page.name} + h1 #[a(href=xm.getURL())= xm.getName()] — #{page.getName()} block mainIntro p= page.getDescription() nav#table-contents diff --git a/docs/index.jade b/docs/index.jade index feb5176..77e64f5 100644 --- a/docs/index.jade +++ b/docs/index.jade @@ -1,3 +1,6 @@ extends _docs.tpl.jade +block append vars + - var page = xm + block footer From e1e0ec01d2db8f7d2235089d8372493440816520 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Sun, 14 Aug 2016 12:30:42 -0400 Subject: [PATCH 23/53] Xmeter.DOCS instanceof Styleguide --- docs/_classes/Xmeter.class.js | 33 +++++++++++++++++---------------- docs/_docs.tpl.jade | 9 ++++----- docs/atom.jade | 2 +- docs/base.jade | 2 +- docs/help.jade | 2 +- docs/includes/_data.jade | 6 ------ docs/index.jade | 2 +- docs/obj.jade | 2 +- 8 files changed, 26 insertions(+), 32 deletions(-) diff --git a/docs/_classes/Xmeter.class.js b/docs/_classes/Xmeter.class.js index 124d86f..f31f86e 100644 --- a/docs/_classes/Xmeter.class.js +++ b/docs/_classes/Xmeter.class.js @@ -1,37 +1,38 @@ +// var Styleguide = require('../_classes/Styleguide.class.js') + var Xmeter = (function () { // CONSTRUCTOR function Xmeter() { - var self = this - Styleguide.call(self, 'Xmeter', '/docs/' ) - Styleguide.prototype.setTitle.call(self, 'Xmeter Style Guide') } - Xmeter.prototype = Object.create(Styleguide.prototype) - Xmeter.prototype.constructor = Xmeter // METHODS - Xmeter.prototype.init = function init() { - var self = this - Styleguide.prototype.init.call(self) - self.getPage('visual.html').hide() - self.getPage('obj.html') + + // STATIC MEMBERS + Xmeter.DOCS = new Styleguide('Xmeter', '/docs/') + .setTitle('Xmeter Style Guide') + .init() + ;(function () { + // adding pages to Xmeter.DOCS + Xmeter.DOCS.getPage('visual.html') + .hide() + Xmeter.DOCS.getPage('obj.html') .addPage(new Page({ name: 'Table of Contents', url: '#table-contents' })) .addPage(new Page({ name: 'The List Object' , url: '#list-object' })) .addPage(new Page({ name: 'The Flex Object' , url: '#flex-object' })) .addPage(new Page({ name: 'The Grid Object' , url: '#grid-object' })) - self.getPage('comp.html').hide() - self.getPage('help.html') + Xmeter.DOCS.getPage('comp.html') + .hide() + Xmeter.DOCS.getPage('help.html') .addPage(new Page({ name: 'Table of Contents', url: '#table-contents' })) .addPage(new Page({ name: 'Block' , url: '#block' })) .addPage(new Page({ name: 'Inline' , url: '#inline' })) .addPage(new Page({ name: 'Clearfix' , url: '#cleafix' })) - self.getPage('atom.html') + Xmeter.DOCS.getPage('atom.html') .addPage(new Page({ name: 'Table of Contents', url: '#table-contents' })) .addPage(new Page({ name: 'margin-bottom' , url: '#margin-bottom' })) .addPage(new Page({ name: 'padding-top' , url: '#padding-top' })) - return self - } + })() - // STATIC MEMBERS Xmeter.DOCS_CLASSES = { figure : 'docs-figure' , pre : 'docs-pre' diff --git a/docs/_docs.tpl.jade b/docs/_docs.tpl.jade index b4188f2..d2f469e 100644 --- a/docs/_docs.tpl.jade +++ b/docs/_docs.tpl.jade @@ -2,9 +2,8 @@ doctype html html(lang="en") include includes/_data.jade block vars - - var xm = new Xmeter().init() head - title= page.getTitle() || (page.name + ' | ' + xm.name) + title= page.getTitle() || (page.name + ' | ' + Xmeter.DOCS.name) meta(charset="utf-8") meta(name="viewport" content="width=device-width, initial-scale=1") meta(name="description" content="A demo of Xmeter styles.") @@ -14,11 +13,11 @@ html(lang="en") main.docs-main block main header - //- h1= page.getTitle() || (xm.getName() + ' — ' + page.getName()) + //- h1= page.getTitle() || (Xmeter.DOCS.getName() + ' — ' + page.getName()) if page.getTitle() h1= page.getTitle() else - h1 #[a(href=xm.getURL())= xm.getName()] — #{page.getName()} + h1 #[a(href=Xmeter.DOCS.getURL())= Xmeter.DOCS.getName()] — #{page.getName()} block mainIntro p= page.getDescription() nav#table-contents @@ -28,7 +27,7 @@ html(lang="en") block footer footer: nav h1 Sitemap - +doctoc({page: xm}) + +doctoc({page: Xmeter.DOCS}) block scripts script(src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous") script. diff --git a/docs/atom.jade b/docs/atom.jade index 596e1c1..30727b2 100644 --- a/docs/atom.jade +++ b/docs/atom.jade @@ -1,7 +1,7 @@ extends _docs.tpl.jade block append vars - - var page = xm.getPage('atom.html') + - var page = Xmeter.DOCS.getPage('atom.html') block append main include includes/_atom.margin-bottom.docs.jade diff --git a/docs/base.jade b/docs/base.jade index e462d6c..5de6106 100644 --- a/docs/base.jade +++ b/docs/base.jade @@ -1,7 +1,7 @@ extends _docs.tpl.jade block append vars - - var page = xm.getPage('base.html') + - var page = Xmeter.DOCS.getPage('base.html') block append main - var classname = Xmeter.DOCS_CLASSES diff --git a/docs/help.jade b/docs/help.jade index 11d311c..1bd0dc1 100644 --- a/docs/help.jade +++ b/docs/help.jade @@ -1,7 +1,7 @@ extends _docs.tpl.jade block append vars - - var page = xm.getPage('help.html') + - var page = Xmeter.DOCS.getPage('help.html') block append main include includes/_h-Block.docs.jade diff --git a/docs/includes/_data.jade b/docs/includes/_data.jade index 16188c4..0e4c43b 100644 --- a/docs/includes/_data.jade +++ b/docs/includes/_data.jade @@ -2,12 +2,6 @@ include ../_classes/Page.class.jade include ../_classes/Styleguide.class.jade include ../_classes/Xmeter.class.jade -- - //- var - //- Page = require('../_classes/Page.class.js') - //- , Styleguide = require('../_classes/Styleguide.class.js') - //- , Xmeter = require('../_classes/Xmeter.class.js') - mixin doctoc(args) - var page = args.page || new Page() diff --git a/docs/index.jade b/docs/index.jade index 77e64f5..003bc2f 100644 --- a/docs/index.jade +++ b/docs/index.jade @@ -1,6 +1,6 @@ extends _docs.tpl.jade block append vars - - var page = xm + - var page = Xmeter.DOCS block footer diff --git a/docs/obj.jade b/docs/obj.jade index 259169b..eaa75ed 100644 --- a/docs/obj.jade +++ b/docs/obj.jade @@ -1,7 +1,7 @@ extends _docs.tpl.jade block append vars - - var page = xm.getPage('obj.html') + - var page = Xmeter.DOCS.getPage('obj.html') block append main include includes/_o-List.docs.jade From 28f1655043f5345eb1d2bad25e76dd31f62e4ee1 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Sun, 14 Aug 2016 12:36:44 -0400 Subject: [PATCH 24/53] absolute urls --- docs/_classes/Styleguide.class.js | 24 ++++++++++++------------ docs/_classes/Xmeter.class.js | 22 +++++++++++----------- docs/_docs.tpl.jade | 4 ++-- docs/includes/_data.jade | 11 +++++------ 4 files changed, 30 insertions(+), 31 deletions(-) diff --git a/docs/_classes/Styleguide.class.js b/docs/_classes/Styleguide.class.js index fe642ec..4ed41e8 100644 --- a/docs/_classes/Styleguide.class.js +++ b/docs/_classes/Styleguide.class.js @@ -23,19 +23,19 @@ var Styleguide = (function () { ) .addPage(new Page({ name: 'Base Typography', url: 'base.html' }) .setDescription('Bare, unstyled HTML elements. No classes.') - .addPage(new Page({ name: 'Table of Contents' , url: '#table-contents' })) - .addPage(new Page({ name: 'Headings & Paragraphs', url: '#headings-paragraphs' })) - .addPage(new Page({ name: 'Lists' , url: '#lists' })) - .addPage(new Page({ name: 'Tables' , url: '#tables' })) - .addPage(new Page({ name: 'Text-Level Elements' , url: '#text-level-elements' }) - .addPage(new Page({ name: 'Links' , url: '#links' })) - .addPage(new Page({ name: 'Stress' , url: '#stress' })) - .addPage(new Page({ name: 'Documentation', url: '#documentation' })) - .addPage(new Page({ name: 'Data' , url: '#data' })) + .addPage(new Page({ name: 'Table of Contents' , url: 'base.html#table-contents' })) + .addPage(new Page({ name: 'Headings & Paragraphs', url: 'base.html#headings-paragraphs' })) + .addPage(new Page({ name: 'Lists' , url: 'base.html#lists' })) + .addPage(new Page({ name: 'Tables' , url: 'base.html#tables' })) + .addPage(new Page({ name: 'Text-Level Elements' , url: 'base.html#text-level-elements' }) + .addPage(new Page({ name: 'Links' , url: 'base.html#links' })) + .addPage(new Page({ name: 'Stress' , url: 'base.html#stress' })) + .addPage(new Page({ name: 'Documentation', url: 'base.html#documentation' })) + .addPage(new Page({ name: 'Data' , url: 'base.html#data' })) ) - .addPage(new Page({ name: 'Embedded Elements' , url: '#embedded-elements' })) - .addPage(new Page({ name: 'Forms' , url: '#forms' })) - .addPage(new Page({ name: 'Interactive Elements', url: '#interactive-elements' })) + .addPage(new Page({ name: 'Embedded Elements' , url: 'base.html#embedded-elements' })) + .addPage(new Page({ name: 'Forms' , url: 'base.html#forms' })) + .addPage(new Page({ name: 'Interactive Elements', url: 'base.html#interactive-elements' })) ) .addPage(new Page({ name: 'Objects', url: 'obj.html' }) .setDescription('Patterns of structure that can be reused many times for many different purposes.') diff --git a/docs/_classes/Xmeter.class.js b/docs/_classes/Xmeter.class.js index f31f86e..d7ce384 100644 --- a/docs/_classes/Xmeter.class.js +++ b/docs/_classes/Xmeter.class.js @@ -16,21 +16,21 @@ var Xmeter = (function () { Xmeter.DOCS.getPage('visual.html') .hide() Xmeter.DOCS.getPage('obj.html') - .addPage(new Page({ name: 'Table of Contents', url: '#table-contents' })) - .addPage(new Page({ name: 'The List Object' , url: '#list-object' })) - .addPage(new Page({ name: 'The Flex Object' , url: '#flex-object' })) - .addPage(new Page({ name: 'The Grid Object' , url: '#grid-object' })) + .addPage(new Page({ name: 'Table of Contents', url: 'obj.html#table-contents' })) + .addPage(new Page({ name: 'The List Object' , url: 'obj.html#list-object' })) + .addPage(new Page({ name: 'The Flex Object' , url: 'obj.html#flex-object' })) + .addPage(new Page({ name: 'The Grid Object' , url: 'obj.html#grid-object' })) Xmeter.DOCS.getPage('comp.html') .hide() Xmeter.DOCS.getPage('help.html') - .addPage(new Page({ name: 'Table of Contents', url: '#table-contents' })) - .addPage(new Page({ name: 'Block' , url: '#block' })) - .addPage(new Page({ name: 'Inline' , url: '#inline' })) - .addPage(new Page({ name: 'Clearfix' , url: '#cleafix' })) + .addPage(new Page({ name: 'Table of Contents', url: 'help.html#table-contents' })) + .addPage(new Page({ name: 'Block' , url: 'help.html#block' })) + .addPage(new Page({ name: 'Inline' , url: 'help.html#inline' })) + .addPage(new Page({ name: 'Clearfix' , url: 'help.html#cleafix' })) Xmeter.DOCS.getPage('atom.html') - .addPage(new Page({ name: 'Table of Contents', url: '#table-contents' })) - .addPage(new Page({ name: 'margin-bottom' , url: '#margin-bottom' })) - .addPage(new Page({ name: 'padding-top' , url: '#padding-top' })) + .addPage(new Page({ name: 'Table of Contents', url: 'atom.html#table-contents' })) + .addPage(new Page({ name: 'margin-bottom' , url: 'atom.html#margin-bottom' })) + .addPage(new Page({ name: 'padding-top' , url: 'atom.html#padding-top' })) })() Xmeter.DOCS_CLASSES = { diff --git a/docs/_docs.tpl.jade b/docs/_docs.tpl.jade index d2f469e..27c01ec 100644 --- a/docs/_docs.tpl.jade +++ b/docs/_docs.tpl.jade @@ -23,11 +23,11 @@ html(lang="en") nav#table-contents h2 Table of Contents block toc - +doctoc({page: page, depth: Infinity}) + +doctoc({pages: page.getPagesAll(), depth: Infinity}) block footer footer: nav h1 Sitemap - +doctoc({page: Xmeter.DOCS}) + +doctoc({pages: Xmeter.DOCS.getPagesAll()}) block scripts script(src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous") script. diff --git a/docs/includes/_data.jade b/docs/includes/_data.jade index 0e4c43b..87dcbeb 100644 --- a/docs/includes/_data.jade +++ b/docs/includes/_data.jade @@ -3,18 +3,17 @@ include ../_classes/Styleguide.class.jade include ../_classes/Xmeter.class.jade mixin doctoc(args) + //- NOTE parameter validation - - var page = args.page || new Page() + var pages = args.pages || [] , classes = args.classes || {} , depth = +args.depth || 0 ol(class=classes.listclasses) - each item in page.getPagesAll() + each item in pages unless item.isHidden() li(class=classes.itemclasses) - a(class=classes.linkclasses - href=((item.getURL().slice(0,1) === '#') ? page.getURL().concat(item.getURL()) : item.getURL()) - )= item.getName() + a(class=classes.linkclasses href=item.getURL())= item.getName() if item.getDescription() = ': ' + item.getDescription() if item.getPagesAll().length && depth > 0 - +doctoc({page: item, classes: (classes.sub || {}), depth: depth-1}) + +doctoc({pages: item.getPagesAll(), classes: (classes.sub || {}), depth: depth-1}) From f95982fa48e66888dbc01449e3a7bb8f8fa515e6 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Sun, 14 Aug 2016 12:57:04 -0400 Subject: [PATCH 25/53] add docs description --- docs/_classes/Xmeter.class.js | 4 ++-- docs/_docs.tpl.jade | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/_classes/Xmeter.class.js b/docs/_classes/Xmeter.class.js index d7ce384..2e6d2ae 100644 --- a/docs/_classes/Xmeter.class.js +++ b/docs/_classes/Xmeter.class.js @@ -2,14 +2,14 @@ var Xmeter = (function () { // CONSTRUCTOR - function Xmeter() { - } + function Xmeter() {} // METHODS // STATIC MEMBERS Xmeter.DOCS = new Styleguide('Xmeter', '/docs/') .setTitle('Xmeter Style Guide') + .setDescription('A demo of Xmeter styles.') .init() ;(function () { // adding pages to Xmeter.DOCS diff --git a/docs/_docs.tpl.jade b/docs/_docs.tpl.jade index 27c01ec..ba61795 100644 --- a/docs/_docs.tpl.jade +++ b/docs/_docs.tpl.jade @@ -5,8 +5,8 @@ html(lang="en") head title= page.getTitle() || (page.name + ' | ' + Xmeter.DOCS.name) meta(charset="utf-8") + meta(name="description" content=Xmeter.DOCS.getDescription()) 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 From 521feb4865210d04ac8f37334ab4250e80e8801e Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Wed, 17 Aug 2016 14:19:31 -0400 Subject: [PATCH 26/53] add new adjusted hn font sizes --- src/__settings.less | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/__settings.less b/src/__settings.less index 423b6f4..5982962 100644 --- a/src/__settings.less +++ b/src/__settings.less @@ -25,3 +25,11 @@ @g-font_size_h4: 16/16; // 1.000 @g-font_size_h5: 14/16; // 0.875 @g-font_size_h6: 12/16; // 0.750 + +// new font sizes as of 2016-08-17 +@g-font_size_h1: 48/16; // 3.000 +@g-font_size_h2: 32/16; // 2.000 +@g-font_size_h3: 24/16; // 1.500 +@g-font_size_h4: 16/16; // 1.000 +@g-font_size_h5: 12/16; // 0.750 +@g-font_size_h6: 8/16; // 0.500 From cef1826c336f9fc4ad59db3abaeb55469ae30fc6 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Wed, 17 Aug 2016 14:44:31 -0400 Subject: [PATCH 27/53] use global font size vars for styles --- src/__settings.less | 24 +++++++++++++++++------- src/_base.forms.less | 2 +- src/_base.grouping.paras.less | 2 +- src/_base.text.data.less | 2 +- src/_base.text.doctext.less | 2 +- src/_base.text.stress.less | 2 +- 6 files changed, 22 insertions(+), 12 deletions(-) diff --git a/src/__settings.less b/src/__settings.less index 5982962..3c26b76 100644 --- a/src/__settings.less +++ b/src/__settings.less @@ -26,10 +26,20 @@ @g-font_size_h5: 14/16; // 0.875 @g-font_size_h6: 12/16; // 0.750 -// new font sizes as of 2016-08-17 -@g-font_size_h1: 48/16; // 3.000 -@g-font_size_h2: 32/16; // 2.000 -@g-font_size_h3: 24/16; // 1.500 -@g-font_size_h4: 16/16; // 1.000 -@g-font_size_h5: 12/16; // 0.750 -@g-font_size_h6: 8/16; // 0.500 +// new global font sizes as of 2016-08-17 +@g-font_size_peta: 96/16; // 6.00 // lines: 4 +@g-font_size_tera: 64/16; // 4.00 // lines: 3 +@g-font_size_giga: 48/16; // 3.00 // lines: 2 +@g-font_size_mega: 32/16; // 2.00 // lines: 2 +@g-font_size_kilo: 24/16; // 1.50 // lines: 1 +@g-font_size_norm: 16/16; // 1.00 // lines: 1 +@g-font_size_mill: 12/16; // 0.75 // lines: 1 +@g-font_size_micr: 8/16; // 0.50 // lines: 1 + +// new heading sizes +@g-font_size_h1: @g-font_size_giga; +@g-font_size_h2: @g-font_size_mega; +@g-font_size_h3: @g-font_size_kilo; +@g-font_size_h4: @g-font_size_norm; +@g-font_size_h5: @g-font_size_mill; +@g-font_size_h6: @g-font_size_micr; diff --git a/src/_base.forms.less b/src/_base.forms.less index 5941ade..b03406d 100644 --- a/src/_base.forms.less +++ b/src/_base.forms.less @@ -38,7 +38,7 @@ button { // small font size for textual inputs input:not([type="button"]):not([type="reset"]):not([type="submit"]), textarea { - .font-size-el(@g-font_size_h6); + .font-size-el(@g-font_size_mill); } textarea { diff --git a/src/_base.grouping.paras.less b/src/_base.grouping.paras.less index f527728..c4b72c4 100644 --- a/src/_base.grouping.paras.less +++ b/src/_base.grouping.paras.less @@ -9,7 +9,7 @@ p { } pre { - .font-size-el(@g-font_size_h6); + .font-size-el(@g-font_size_mill); text-align: left; text-indent: 0; white-space: pre; diff --git a/src/_base.text.data.less b/src/_base.text.data.less index 6f44f54..6ece378 100644 --- a/src/_base.text.data.less +++ b/src/_base.text.data.less @@ -10,7 +10,7 @@ data { time { } code, kbd, samp { - font-size: (@g-font_size_h6 * 1em); + font-size: (@g-font_size_mill * 1em); white-space: nowrap; code, kbd, samp { font-size: inherit; // undo compounding font sizes diff --git a/src/_base.text.doctext.less b/src/_base.text.doctext.less index 70f37c5..cf6fc4e 100644 --- a/src/_base.text.doctext.less +++ b/src/_base.text.doctext.less @@ -38,7 +38,7 @@ cite { font-style: italic; } sup, sub { - font-size: (@g-font_size_h6 * 1em); + font-size: (@g-font_size_mill * 1em); } sup { } diff --git a/src/_base.text.stress.less b/src/_base.text.stress.less index b1b12c5..7042908 100644 --- a/src/_base.text.stress.less +++ b/src/_base.text.stress.less @@ -21,7 +21,7 @@ u { color: #080; } small { - font-size: (@g-font_size_h6 * 1em); + font-size: (@g-font_size_mill * 1em); } s { text-decoration: line-through; From ee9247e6a0f7d549376acf8f488ef899310b1c02 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Wed, 17 Aug 2016 15:14:12 -0400 Subject: [PATCH 28/53] add font size atoms --- docs/_classes/Xmeter.class.js | 1 + docs/atom.jade | 2 + docs/includes/_atom.font-size.docs.jade | 34 +++++ src/__settings.less | 6 - src/_atom.less | 170 ++++++++++++++++++++++++ 5 files changed, 207 insertions(+), 6 deletions(-) create mode 100644 docs/includes/_atom.font-size.docs.jade diff --git a/docs/_classes/Xmeter.class.js b/docs/_classes/Xmeter.class.js index 2e6d2ae..1f5f3ff 100644 --- a/docs/_classes/Xmeter.class.js +++ b/docs/_classes/Xmeter.class.js @@ -31,6 +31,7 @@ var Xmeter = (function () { .addPage(new Page({ name: 'Table of Contents', url: 'atom.html#table-contents' })) .addPage(new Page({ name: 'margin-bottom' , url: 'atom.html#margin-bottom' })) .addPage(new Page({ name: 'padding-top' , url: 'atom.html#padding-top' })) + .addPage(new Page({ name: 'font-size' , url: 'atom.html#font-size' })) })() Xmeter.DOCS_CLASSES = { diff --git a/docs/atom.jade b/docs/atom.jade index 30727b2..4f5f9c1 100644 --- a/docs/atom.jade +++ b/docs/atom.jade @@ -8,3 +8,5 @@ block append main +docs_marginBottom(Xmeter.DOCS_CLASSES) include includes/_atom.padding-top.docs.jade +docs_paddingTop(Xmeter.DOCS_CLASSES) + include includes/_atom.font-size.docs.jade + +docs_fontSize(Xmeter.DOCS_CLASSES) diff --git a/docs/includes/_atom.font-size.docs.jade b/docs/includes/_atom.font-size.docs.jade new file mode 100644 index 0000000..306f00c --- /dev/null +++ b/docs/includes/_atom.font-size.docs.jade @@ -0,0 +1,34 @@ +mixin docs_fontSize(classname) + - classname = classname || {} + section#font-size + h2 font-size + 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=classname.code) .font-size-el()] mixin, + for maintaining vertical rhythm. + p. + See all the font sizes in the source file #[code(class=classname.code) /src/__settings.less], + and all atoms in #[code(class=classname.code) /src/_atom.less] + pre(class=classname.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); } + figure(class=classname.figure) + p + | The following #[code(class=classname.code) u] element is one step bigger than normal:#{' '} + u.-fz-kilo this is the element. + pre(class=classname.pre). + <u class="#[u -fz-kilo]">this is the element.</u> + figure(class=classname.figure) + p.-fz-el-mill. + This entire paragraph is one step smaller than normal. + Use #[code(class=classname.code) .-fz-el-*] on blocks. + pre(class=classname.pre). + <p class="#[u -fz-el-mill]">This entire paragraph ...</p> diff --git a/src/__settings.less b/src/__settings.less index 3c26b76..2595de5 100644 --- a/src/__settings.less +++ b/src/__settings.less @@ -19,12 +19,6 @@ @g-vru_px: (@g-line_height * @g-1rem); // fallback for @g-vru, which is in rems @g-vru: (@g-line_height * 1rem); -@g-font_size_h1: 32/16; // 2.000 -@g-font_size_h2: 24/16; // 1.500 -@g-font_size_h3: 20/16; // 1.250 -@g-font_size_h4: 16/16; // 1.000 -@g-font_size_h5: 14/16; // 0.875 -@g-font_size_h6: 12/16; // 0.750 // new global font sizes as of 2016-08-17 @g-font_size_peta: 96/16; // 6.00 // lines: 4 diff --git a/src/_atom.less b/src/_atom.less index ddf81af..55330da 100644 --- a/src/_atom.less +++ b/src/_atom.less @@ -39,3 +39,173 @@ @media screen and (min-width: 60em) { .-pt-1vru-sG { .-pt-1vru; } } @media screen and (min-width: 75em) { .-pt-1vru-sT { .-pt-1vru; } } @media screen and (min-width: 90em) { .-pt-1vru-sP { .-pt-1vru; } } + + +@import (reference) url('__tool.fontsize.less'); +// Sets font-size properties. +// First group sets only font-size in ems; +// second group uses the `.font-size-el()` mixin for vertical rhythm. +// See `__tool.fontsize.less` for more info. +// +// ^author +// : Chris Harvey +// ^updated +// : 2016-08-17 +.-fz-micr { font-size: @g-font_size_micr * 1em; } +.-fz-mill { font-size: @g-font_size_mill * 1em; } +.-fz-norm { font-size: @g-font_size_norm * 1em; } +.-fz-kilo { font-size: @g-font_size_kilo * 1em; } +.-fz-mega { font-size: @g-font_size_mega * 1em; } +.-fz-giga { font-size: @g-font_size_giga * 1em; } +.-fz-tera { font-size: @g-font_size_tera * 1em; } +.-fz-peta { font-size: @g-font_size_peta * 1em; } +@media screen { + .-fz-micr-s { .-fz-micr; } + .-fz-mill-s { .-fz-mill; } + .-fz-norm-s { .-fz-norm; } + .-fz-kilo-s { .-fz-kilo; } + .-fz-mega-s { .-fz-mega; } + .-fz-giga-s { .-fz-giga; } + .-fz-tera-s { .-fz-tera; } + .-fz-peta-s { .-fz-peta; } +} +@media print { + .-fz-micr-p { .-fz-micr; } + .-fz-mill-p { .-fz-mill; } + .-fz-norm-p { .-fz-norm; } + .-fz-kilo-p { .-fz-kilo; } + .-fz-mega-p { .-fz-mega; } + .-fz-giga-p { .-fz-giga; } + .-fz-tera-p { .-fz-tera; } + .-fz-peta-p { .-fz-peta; } +} +@media screen and (min-width: 30em) { + .-fz-micr-sK { .-fz-micr; } + .-fz-mill-sK { .-fz-mill; } + .-fz-norm-sK { .-fz-norm; } + .-fz-kilo-sK { .-fz-kilo; } + .-fz-mega-sK { .-fz-mega; } + .-fz-giga-sK { .-fz-giga; } + .-fz-tera-sK { .-fz-tera; } + .-fz-peta-sK { .-fz-peta; } +} +@media screen and (min-width: 45em) { + .-fz-micr-sM { .-fz-micr; } + .-fz-mill-sM { .-fz-mill; } + .-fz-norm-sM { .-fz-norm; } + .-fz-kilo-sM { .-fz-kilo; } + .-fz-mega-sM { .-fz-mega; } + .-fz-giga-sM { .-fz-giga; } + .-fz-tera-sM { .-fz-tera; } + .-fz-peta-sM { .-fz-peta; } +} +@media screen and (min-width: 60em) { + .-fz-micr-sG { .-fz-micr; } + .-fz-mill-sG { .-fz-mill; } + .-fz-norm-sG { .-fz-norm; } + .-fz-kilo-sG { .-fz-kilo; } + .-fz-mega-sG { .-fz-mega; } + .-fz-giga-sG { .-fz-giga; } + .-fz-tera-sG { .-fz-tera; } + .-fz-peta-sG { .-fz-peta; } +} +@media screen and (min-width: 75em) { + .-fz-micr-sT { .-fz-micr; } + .-fz-mill-sT { .-fz-mill; } + .-fz-norm-sT { .-fz-norm; } + .-fz-kilo-sT { .-fz-kilo; } + .-fz-mega-sT { .-fz-mega; } + .-fz-giga-sT { .-fz-giga; } + .-fz-tera-sT { .-fz-tera; } + .-fz-peta-sT { .-fz-peta; } +} +@media screen and (min-width: 90em) { + .-fz-micr-sP { .-fz-micr; } + .-fz-mill-sP { .-fz-mill; } + .-fz-norm-sP { .-fz-norm; } + .-fz-kilo-sP { .-fz-kilo; } + .-fz-mega-sP { .-fz-mega; } + .-fz-giga-sP { .-fz-giga; } + .-fz-tera-sP { .-fz-tera; } + .-fz-peta-sP { .-fz-peta; } +} + + +.-fz-el-micr { .font-size-el(@g-font_size_micr); } +.-fz-el-mill { .font-size-el(@g-font_size_mill); } +.-fz-el-norm { .font-size-el(@g-font_size_norm); } +.-fz-el-kilo { .font-size-el(@g-font_size_kilo); } +.-fz-el-mega { .font-size-el(@g-font_size_mega); } +.-fz-el-giga { .font-size-el(@g-font_size_giga); } +.-fz-el-tera { .font-size-el(@g-font_size_tera); } +.-fz-el-peta { .font-size-el(@g-font_size_peta); } +@media screen { + .-fz-el-micr-s { .-fz-el-micr; } + .-fz-el-mill-s { .-fz-el-mill; } + .-fz-el-norm-s { .-fz-el-norm; } + .-fz-el-kilo-s { .-fz-el-kilo; } + .-fz-el-mega-s { .-fz-el-mega; } + .-fz-el-giga-s { .-fz-el-giga; } + .-fz-el-tera-s { .-fz-el-tera; } + .-fz-el-peta-s { .-fz-el-peta; } +} +@media print { + .-fz-el-micr-p { .-fz-el-micr; } + .-fz-el-mill-p { .-fz-el-mill; } + .-fz-el-norm-p { .-fz-el-norm; } + .-fz-el-kilo-p { .-fz-el-kilo; } + .-fz-el-mega-p { .-fz-el-mega; } + .-fz-el-giga-p { .-fz-el-giga; } + .-fz-el-tera-p { .-fz-el-tera; } + .-fz-el-peta-p { .-fz-el-peta; } +} +@media screen and (min-width: 30em) { + .-fz-el-micr-sK { .-fz-el-micr; } + .-fz-el-mill-sK { .-fz-el-mill; } + .-fz-el-norm-sK { .-fz-el-norm; } + .-fz-el-kilo-sK { .-fz-el-kilo; } + .-fz-el-mega-sK { .-fz-el-mega; } + .-fz-el-giga-sK { .-fz-el-giga; } + .-fz-el-tera-sK { .-fz-el-tera; } + .-fz-el-peta-sK { .-fz-el-peta; } +} +@media screen and (min-width: 45em) { + .-fz-el-micr-sM { .-fz-el-micr; } + .-fz-el-mill-sM { .-fz-el-mill; } + .-fz-el-norm-sM { .-fz-el-norm; } + .-fz-el-kilo-sM { .-fz-el-kilo; } + .-fz-el-mega-sM { .-fz-el-mega; } + .-fz-el-giga-sM { .-fz-el-giga; } + .-fz-el-tera-sM { .-fz-el-tera; } + .-fz-el-peta-sM { .-fz-el-peta; } +} +@media screen and (min-width: 60em) { + .-fz-el-micr-sG { .-fz-el-micr; } + .-fz-el-mill-sG { .-fz-el-mill; } + .-fz-el-norm-sG { .-fz-el-norm; } + .-fz-el-kilo-sG { .-fz-el-kilo; } + .-fz-el-mega-sG { .-fz-el-mega; } + .-fz-el-giga-sG { .-fz-el-giga; } + .-fz-el-tera-sG { .-fz-el-tera; } + .-fz-el-peta-sG { .-fz-el-peta; } +} +@media screen and (min-width: 75em) { + .-fz-el-micr-sT { .-fz-el-micr; } + .-fz-el-mill-sT { .-fz-el-mill; } + .-fz-el-norm-sT { .-fz-el-norm; } + .-fz-el-kilo-sT { .-fz-el-kilo; } + .-fz-el-mega-sT { .-fz-el-mega; } + .-fz-el-giga-sT { .-fz-el-giga; } + .-fz-el-tera-sT { .-fz-el-tera; } + .-fz-el-peta-sT { .-fz-el-peta; } +} +@media screen and (min-width: 90em) { + .-fz-el-micr-sP { .-fz-el-micr; } + .-fz-el-mill-sP { .-fz-el-mill; } + .-fz-el-norm-sP { .-fz-el-norm; } + .-fz-el-kilo-sP { .-fz-el-kilo; } + .-fz-el-mega-sP { .-fz-el-mega; } + .-fz-el-giga-sP { .-fz-el-giga; } + .-fz-el-tera-sP { .-fz-el-tera; } + .-fz-el-peta-sP { .-fz-el-peta; } +} From 289aeaa859162aa1484bb495da5b33cd102bb637 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Fri, 19 Aug 2016 22:04:03 -0400 Subject: [PATCH 29/53] generate section headings --- docs/_classes/Styleguide.class.js | 2 ++ docs/_docs.tpl.jade | 11 ----------- docs/base.jade | 13 +++++++++++++ docs/includes/_atom.margin-bottom.docs.jade | 3 +-- docs/includes/_atom.padding-top.docs.jade | 3 +-- docs/includes/_data.jade | 15 +++++++++++++++ docs/includes/_h-Block.docs.jade | 3 +-- docs/includes/_h-Clearfix.docs.jade | 3 +-- docs/includes/_h-Inline.docs.jade | 3 +-- docs/includes/_o-Flex.docs.jade | 3 +-- docs/includes/_o-Grid.docs.jade | 3 +-- docs/includes/_o-List.docs.jade | 3 +-- 12 files changed, 38 insertions(+), 27 deletions(-) diff --git a/docs/_classes/Styleguide.class.js b/docs/_classes/Styleguide.class.js index 4ed41e8..cb54810 100644 --- a/docs/_classes/Styleguide.class.js +++ b/docs/_classes/Styleguide.class.js @@ -52,5 +52,7 @@ var Styleguide = (function () { } else return } + // STATIC MEMBERS + return Styleguide })() diff --git a/docs/_docs.tpl.jade b/docs/_docs.tpl.jade index ba61795..ab41830 100644 --- a/docs/_docs.tpl.jade +++ b/docs/_docs.tpl.jade @@ -29,14 +29,3 @@ html(lang="en") h1 Sitemap +doctoc({pages: Xmeter.DOCS.getPagesAll()}) block scripts - script(src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous") - script. - function toURL(string) { - return encodeURIComponent(string.toLowerCase().replace(/[\W]+/g, '-')) - } - $('h1, h2, h3, h4, h5, h6').each(function () { - if (!$(this).parents('figure').length) { - var id = '_' + toURL($(this).text()) - $(this).append($('').addClass('docs-_fragid').attr('id', id).attr('href', '#' + id)) - } - }) diff --git a/docs/base.jade b/docs/base.jade index 5de6106..ae1bf02 100644 --- a/docs/base.jade +++ b/docs/base.jade @@ -6,3 +6,16 @@ block append vars block append main - var classname = Xmeter.DOCS_CLASSES include includes/_base.docs.jade + +block append scripts + script(src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous") + script. + function toURL(string) { + return encodeURIComponent(string.toLowerCase().replace(/[\W]+/g, '-')) + } + $('h1, h2, h3, h4, h5, h6').each(function () { + if (!$(this).parents('figure').length) { + var id = toURL($(this).text()) + $(this).append($('').addClass('docs-_fragid').attr('id', id).attr('href', '#' + id)) + } + }) diff --git a/docs/includes/_atom.margin-bottom.docs.jade b/docs/includes/_atom.margin-bottom.docs.jade index 38300e1..a2737c4 100644 --- a/docs/includes/_atom.margin-bottom.docs.jade +++ b/docs/includes/_atom.margin-bottom.docs.jade @@ -1,7 +1,6 @@ mixin docs_marginBottom(classname) - classname = classname || {} - section#margin-bottom - h2 margin-bottom + +newSection(2, Xmeter.DOCS.findPage('atom.html#margin-bottom')) p. This atom sets the bottom margin to one #[dfn vertical rhythm unit] (1vru), which is equal to the #[code(class=classname.code) html] element’s diff --git a/docs/includes/_atom.padding-top.docs.jade b/docs/includes/_atom.padding-top.docs.jade index 99f36b0..e33f109 100644 --- a/docs/includes/_atom.padding-top.docs.jade +++ b/docs/includes/_atom.padding-top.docs.jade @@ -1,7 +1,6 @@ mixin docs_paddingTop(classname) - classname = classname || {} - section#padding-top - h2 padding-top + +newSection(2, Xmeter.DOCS.findPage('atom.html#padding-top')) p. This atom sets the top padding to 1#[b: abbr(title="vertical rhythm unit") vru]. pre(class=classname.pre). diff --git a/docs/includes/_data.jade b/docs/includes/_data.jade index 87dcbeb..4b1c2c8 100644 --- a/docs/includes/_data.jade +++ b/docs/includes/_data.jade @@ -17,3 +17,18 @@ mixin doctoc(args) = ': ' + item.getDescription() if item.getPagesAll().length && depth > 0 +doctoc({pages: item.getPagesAll(), classes: (classes.sub || {}), depth: depth-1}) + +mixin newSection(hn, page) + - + var text = page.getName() + , id = page.getURL().split('#')[1] + section(id=id) + if hn === 1 + h1 #{text} #[a.docs-_fragid(href='#' + id)] + else if hn === 2 + h2 #{text} #[a.docs-_fragid(href='#' + id)] + else if hn === 3 + h3 #{text} #[a.docs-_fragid(href='#' + id)] + else + p #{text} + block diff --git a/docs/includes/_h-Block.docs.jade b/docs/includes/_h-Block.docs.jade index 21e7605..6801aae 100644 --- a/docs/includes/_h-Block.docs.jade +++ b/docs/includes/_h-Block.docs.jade @@ -1,7 +1,6 @@ mixin docs_block(classname) - classname = classname || {} - section#block - h2 Block + +newSection(2, Xmeter.DOCS.findPage('help.html#block')) p. The Block Helper creates a blocky look, with an inherited line-height to maintain vertical rhythm. diff --git a/docs/includes/_h-Clearfix.docs.jade b/docs/includes/_h-Clearfix.docs.jade index 49a04b3..7b86464 100644 --- a/docs/includes/_h-Clearfix.docs.jade +++ b/docs/includes/_h-Clearfix.docs.jade @@ -1,7 +1,6 @@ mixin docs_clearfix(classname) - classname = classname || {} - section#clearfix - h2 Clearfix + +newSection(2, Xmeter.DOCS.findPage('help.html#cleafix')) p. The Clearfix Helper creates a line break after an element. This could be a container of floats, or it could simply be an inline list item. diff --git a/docs/includes/_h-Inline.docs.jade b/docs/includes/_h-Inline.docs.jade index 6f4da36..cfa89b6 100644 --- a/docs/includes/_h-Inline.docs.jade +++ b/docs/includes/_h-Inline.docs.jade @@ -1,7 +1,6 @@ mixin docs_inline(classname) - classname = classname || {} - section#inline - h2 Inline + +newSection(2, Xmeter.DOCS.findPage('help.html#inline')) p. Creates an inline look, with zero line-height to maintain vertical rhythm. diff --git a/docs/includes/_o-Flex.docs.jade b/docs/includes/_o-Flex.docs.jade index 3a5db46..ba60c5f 100644 --- a/docs/includes/_o-Flex.docs.jade +++ b/docs/includes/_o-Flex.docs.jade @@ -1,7 +1,6 @@ mixin docs_flex(classname) - classname = classname || {} - section#flex-object - h2 The Flex Object + +newSection(2, Xmeter.DOCS.findPage('obj.html#flex-object')) p. A Flex Object is simply a container of flexible items arranged in one dimension. Each flex item has a #[b main size] of #[code(class=classname.code) auto], diff --git a/docs/includes/_o-Grid.docs.jade b/docs/includes/_o-Grid.docs.jade index c3e69b8..7330ea2 100644 --- a/docs/includes/_o-Grid.docs.jade +++ b/docs/includes/_o-Grid.docs.jade @@ -1,7 +1,6 @@ mixin docs_grid(classname) - classname = classname || {} - section#grid-object - h2 The Grid Object + +newSection(2, Xmeter.DOCS.findPage('obj.html#grid-object')) p. The Grid Object is similar to the Flex Object except that it can be extended to two dimensions. diff --git a/docs/includes/_o-List.docs.jade b/docs/includes/_o-List.docs.jade index 7c94884..b728784 100644 --- a/docs/includes/_o-List.docs.jade +++ b/docs/includes/_o-List.docs.jade @@ -1,7 +1,6 @@ mixin docs_list(classname) - classname = classname || {} - section#list-object - h2 The List Object + +newSection(2, Xmeter.DOCS.findPage('obj.html#list-object')) p. Use the List Object to remove the usual padding and list item markers accompanied by (un)ordered lists. The result is a list of items, each on its own line. From c119e22a9d94c3adefccdafead1339c75cf838fb Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Fri, 19 Aug 2016 22:13:07 -0400 Subject: [PATCH 30/53] organize generators --- docs/atom.jade | 10 +- docs/help.jade | 15 +-- docs/includes/_atom.margin-bottom.docs.jade | 23 ++-- docs/includes/_atom.padding-top.docs.jade | 17 ++- docs/includes/_h-Block.docs.jade | 23 ++-- docs/includes/_h-Clearfix.docs.jade | 63 ++++++----- docs/includes/_h-Inline.docs.jade | 41 ++++---- docs/includes/_o-Flex.docs.jade | 85 ++++++++------- docs/includes/_o-Grid.docs.jade | 111 ++++++++++---------- docs/includes/_o-List.docs.jade | 37 ++++--- docs/obj.jade | 15 +-- 11 files changed, 220 insertions(+), 220 deletions(-) diff --git a/docs/atom.jade b/docs/atom.jade index 30727b2..b6a2fdc 100644 --- a/docs/atom.jade +++ b/docs/atom.jade @@ -4,7 +4,9 @@ block append vars - var page = Xmeter.DOCS.getPage('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.findPage('atom.html#margin-bottom')) + include includes/_atom.margin-bottom.docs.jade + +docs_marginBottom(Xmeter.DOCS_CLASSES) + +newSection(2, Xmeter.DOCS.findPage('atom.html#padding-top')) + include includes/_atom.padding-top.docs.jade + +docs_paddingTop(Xmeter.DOCS_CLASSES) diff --git a/docs/help.jade b/docs/help.jade index 1bd0dc1..27954cd 100644 --- a/docs/help.jade +++ b/docs/help.jade @@ -4,9 +4,12 @@ block append vars - var page = Xmeter.DOCS.getPage('help.html') block append main - include includes/_h-Block.docs.jade - +docs_block(Xmeter.DOCS_CLASSES) - include includes/_h-Inline.docs.jade - +docs_inline(Xmeter.DOCS_CLASSES) - include includes/_h-Clearfix.docs.jade - +docs_clearfix(Xmeter.DOCS_CLASSES) + +newSection(2, Xmeter.DOCS.findPage('help.html#block')) + include includes/_h-Block.docs.jade + +docs_block(Xmeter.DOCS_CLASSES) + +newSection(2, Xmeter.DOCS.findPage('help.html#inline')) + include includes/_h-Inline.docs.jade + +docs_inline(Xmeter.DOCS_CLASSES) + +newSection(2, Xmeter.DOCS.findPage('help.html#cleafix')) + include includes/_h-Clearfix.docs.jade + +docs_clearfix(Xmeter.DOCS_CLASSES) diff --git a/docs/includes/_atom.margin-bottom.docs.jade b/docs/includes/_atom.margin-bottom.docs.jade index a2737c4..134750f 100644 --- a/docs/includes/_atom.margin-bottom.docs.jade +++ b/docs/includes/_atom.margin-bottom.docs.jade @@ -1,15 +1,14 @@ mixin docs_marginBottom(classname) - classname = classname || {} - +newSection(2, Xmeter.DOCS.findPage('atom.html#margin-bottom')) - p. - This atom sets the bottom margin to one #[dfn vertical rhythm unit] (1vru), - which is equal to the #[code(class=classname.code) html] element’s - #[code(class=classname.code) line-height] multiplied by - #[code(class=classname.code) 1rem]. + p. + This atom sets the bottom margin to one #[dfn vertical rhythm unit] (1vru), + which is equal to the #[code(class=classname.code) html] element’s + #[code(class=classname.code) line-height] multiplied by + #[code(class=classname.code) 1rem]. + pre(class=classname.pre). + @g-vru: @g-line_height * 1rem; + .-mb-1vru { margin-bottom: @g-vru; } + figure(class=classname.figure) + div.-mb-1vru Most typographical block elements like paragraphs and lists are automatically given this style. pre(class=classname.pre). - @g-vru: @g-line_height * 1rem; - .-mb-1vru { margin-bottom: @g-vru; } - figure(class=classname.figure) - div.-mb-1vru Most typographical block elements like paragraphs and lists are automatically given this style. - pre(class=classname.pre). - <div class="#[u -mb-1vru]">Most ...</div> + <div class="#[u -mb-1vru]">Most ...</div> diff --git a/docs/includes/_atom.padding-top.docs.jade b/docs/includes/_atom.padding-top.docs.jade index e33f109..4d92baf 100644 --- a/docs/includes/_atom.padding-top.docs.jade +++ b/docs/includes/_atom.padding-top.docs.jade @@ -1,12 +1,11 @@ mixin docs_paddingTop(classname) - classname = classname || {} - +newSection(2, Xmeter.DOCS.findPage('atom.html#padding-top')) - p. - This atom sets the top padding to 1#[b: abbr(title="vertical rhythm unit") vru]. + p. + This atom sets the top padding to 1#[b: abbr(title="vertical rhythm unit") vru]. + pre(class=classname.pre). + @g-vru: @g-line_height * 1rem; + .-pt-1vru { padding-top: @g-vru; } + figure(class=classname.figure) + div.-pt-1vru Usually only Heading 1 is given this style, but it is also useful for moving an element down the page. pre(class=classname.pre). - @g-vru: @g-line_height * 1rem; - .-pt-1vru { padding-top: @g-vru; } - figure(class=classname.figure) - div.-pt-1vru Usually only Heading 1 is given this style, but it is also useful for moving an element down the page. - pre(class=classname.pre). - <div class="#[u -pt-1vru]">Usually only ...</div> + <div class="#[u -pt-1vru]">Usually only ...</div> diff --git a/docs/includes/_h-Block.docs.jade b/docs/includes/_h-Block.docs.jade index 6801aae..1d43f09 100644 --- a/docs/includes/_h-Block.docs.jade +++ b/docs/includes/_h-Block.docs.jade @@ -1,15 +1,14 @@ mixin docs_block(classname) - classname = classname || {} - +newSection(2, Xmeter.DOCS.findPage('help.html#block')) + p. + The Block Helper creates a blocky look, + with an inherited line-height to maintain vertical rhythm. + figure(class=classname.figure) p. - The Block Helper creates a blocky look, - with an inherited line-height to maintain vertical rhythm. - figure(class=classname.figure) - p. - Albert Einstein was made famous by his equation - #[b.h-Block(style="text-align:center;") E = mc#[sup 2]] - which explains the relationship between energy and mass. - pre(class=classname.pre). - <p>... his famous equation - <b class="#[u h-Block]" style="text-align:center;">E = mc<sup>2</sup></b> - which explains ...</p> + Albert Einstein was made famous by his equation + #[b.h-Block(style="text-align:center;") E = mc#[sup 2]] + which explains the relationship between energy and mass. + pre(class=classname.pre). + <p>... his famous equation + <b class="#[u h-Block]" style="text-align:center;">E = mc<sup>2</sup></b> + which explains ...</p> diff --git a/docs/includes/_h-Clearfix.docs.jade b/docs/includes/_h-Clearfix.docs.jade index 7b86464..4b2c4f7 100644 --- a/docs/includes/_h-Clearfix.docs.jade +++ b/docs/includes/_h-Clearfix.docs.jade @@ -1,34 +1,33 @@ mixin docs_clearfix(classname) - classname = classname || {} - +newSection(2, Xmeter.DOCS.findPage('help.html#cleafix')) - p. - The Clearfix Helper creates a line break after an element. - This could be a container of floats, or it could simply be an inline list item. - Use this as an alternative to the #[code(class=classname.code) br] element. - figure(class=classname.figure) - div.h-Clearfix - div(style="font-weight: 700; float: left;") gravity - div(style="font-weight: 700; float: right;") supernova - div spacetime black hole singularity - pre(class=classname.pre). - <div class="#[u h-Clearfix]"> - <div style="float: left;">gravity</div> - <div style="float: right;">supernova</div> - </div> - <div>spacetime black hole singularity</div> - figcaption The Clearfix Helper is used in the classical sense. - figure(class=classname.figure) - ul - span.o-Inline spacetime#{' '} - span.o-Inline.h-Clearfix black hole#{' '} - span.o-Inline singularity#{' '} - span.o-Inline neutron star#{' '} - pre(class=classname.pre). - <ul> - <li class="o-Inline">spacetime </li> - <li class="o-Inline #[u h-Clearfix]">black hole </li> - <li class="o-Inline">singularity </li> - <li class="o-Inline">neutron star </li> - </ul> - figcaption. - The Clearfix Helper creates a line break after the 2nd inline item. + p. + The Clearfix Helper creates a line break after an element. + This could be a container of floats, or it could simply be an inline list item. + Use this as an alternative to the #[code(class=classname.code) br] element. + figure(class=classname.figure) + div.h-Clearfix + div(style="font-weight: 700; float: left;") gravity + div(style="font-weight: 700; float: right;") supernova + div spacetime black hole singularity + pre(class=classname.pre). + <div class="#[u h-Clearfix]"> + <div style="float: left;">gravity</div> + <div style="float: right;">supernova</div> + </div> + <div>spacetime black hole singularity</div> + figcaption The Clearfix Helper is used in the classical sense. + figure(class=classname.figure) + ul + span.o-Inline spacetime#{' '} + span.o-Inline.h-Clearfix black hole#{' '} + span.o-Inline singularity#{' '} + span.o-Inline neutron star#{' '} + pre(class=classname.pre). + <ul> + <li class="o-Inline">spacetime </li> + <li class="o-Inline #[u h-Clearfix]">black hole </li> + <li class="o-Inline">singularity </li> + <li class="o-Inline">neutron star </li> + </ul> + figcaption. + The Clearfix Helper creates a line break after the 2nd inline item. diff --git a/docs/includes/_h-Inline.docs.jade b/docs/includes/_h-Inline.docs.jade index cfa89b6..b9c58a1 100644 --- a/docs/includes/_h-Inline.docs.jade +++ b/docs/includes/_h-Inline.docs.jade @@ -1,23 +1,22 @@ mixin docs_inline(classname) - classname = classname || {} - +newSection(2, Xmeter.DOCS.findPage('help.html#inline')) - p. - Creates an inline look, - with zero line-height to maintain vertical rhythm. - p. - This class is useful for creating inline lists, that is, - lists whose items are each displayed in line, one right after another. - figure(class=classname.figure) - ul - li.h-Inline spacetime#{' '} - li.h-Inline black hole#{' '} - li.h-Inline singularity#{' '} - li.h-Inline gravity#{' '} - li.h-Inline supernova#{' '} - li.h-Inline neutron star#{' '} - pre(class=classname.pre). - <ul> - <li class="#[u h-Inline]">spacetime </li> - <li class="#[u h-Inline]">black hole </li> - ... - </ul> + p. + Creates an inline look, + with zero line-height to maintain vertical rhythm. + p. + This class is useful for creating inline lists, that is, + lists whose items are each displayed in line, one right after another. + figure(class=classname.figure) + ul + li.h-Inline spacetime#{' '} + li.h-Inline black hole#{' '} + li.h-Inline singularity#{' '} + li.h-Inline gravity#{' '} + li.h-Inline supernova#{' '} + li.h-Inline neutron star#{' '} + pre(class=classname.pre). + <ul> + <li class="#[u h-Inline]">spacetime </li> + <li class="#[u h-Inline]">black hole </li> + ... + </ul> diff --git a/docs/includes/_o-Flex.docs.jade b/docs/includes/_o-Flex.docs.jade index ba60c5f..8e2a690 100644 --- a/docs/includes/_o-Flex.docs.jade +++ b/docs/includes/_o-Flex.docs.jade @@ -1,45 +1,44 @@ mixin docs_flex(classname) - classname = classname || {} - +newSection(2, Xmeter.DOCS.findPage('obj.html#flex-object')) - p. - A Flex Object is simply a container of flexible items arranged in one dimension. - Each flex item has a #[b main size] of #[code(class=classname.code) auto], - depending on its contents. - The flex items will grow or shrink together to fit into the allotted space. - If overridden, the extra space (if any) will be distributed #[em between] the items. - figure(class=classname.figure) - ul.o-List.o-Flex - li.o-List__Item.o-Flex__Item Burns & McDonnell Engineering - li.o-List__Item.o-Flex__Item DIS-TRAN Steel, LLC - li.o-List__Item.o-Flex__Item EDM International - pre(class=classname.pre). - <ul class="o-List #[u o-Flex]"> - <li class="o-List__Item #[u o-Flex__Item]">Burns & McDonnell Engineering</li> - <li class="o-List__Item #[u o-Flex__Item]">DIS-TRAN Steel, LLC</li> - ... - </ul> - figcaption. - A Flex Object with extra space. - figure(class=classname.figure) - ul.o-List.o-Flex - li.o-List__Item.o-Flex__Item Burns & McDonnell Engineering - li.o-List__Item.o-Flex__Item DIS-TRAN Steel, LLC - li.o-List__Item.o-Flex__Item EDM International - li.o-List__Item.o-Flex__Item Electrical Consultants, Inc. - li.o-List__Item.o-Flex__Item Fabrimet Inc. - li.o-List__Item.o-Flex__Item Falcon Steel Company - li.o-List__Item.o-Flex__Item Sabre-FWT - li.o-List__Item.o-Flex__Item HDR - li.o-List__Item.o-Flex__Item Mitas Energy - li.o-List__Item.o-Flex__Item Power Consulting Associates, LLC - li.o-List__Item.o-Flex__Item Power Line Systems, Inc. - li.o-List__Item.o-Flex__Item Quanta Services - li.o-List__Item.o-Flex__Item ReliaPOLE Inspection Services - pre(class=classname.pre). - <ul class="o-List #[u o-Flex]"> - <li class="o-List__Item #[u o-Flex__Item]">Burns & McDonnell Engineering</li> - <li class="o-List__Item #[u o-Flex__Item]">DIS-TRAN Steel, LLC</li> - ... - </ul> - figcaption. - A Flex Object with not enough space. + p. + A Flex Object is simply a container of flexible items arranged in one dimension. + Each flex item has a #[b main size] of #[code(class=classname.code) auto], + depending on its contents. + The flex items will grow or shrink together to fit into the allotted space. + If overridden, the extra space (if any) will be distributed #[em between] the items. + figure(class=classname.figure) + ul.o-List.o-Flex + li.o-List__Item.o-Flex__Item Burns & McDonnell Engineering + li.o-List__Item.o-Flex__Item DIS-TRAN Steel, LLC + li.o-List__Item.o-Flex__Item EDM International + pre(class=classname.pre). + <ul class="o-List #[u o-Flex]"> + <li class="o-List__Item #[u o-Flex__Item]">Burns & McDonnell Engineering</li> + <li class="o-List__Item #[u o-Flex__Item]">DIS-TRAN Steel, LLC</li> + ... + </ul> + figcaption. + A Flex Object with extra space. + figure(class=classname.figure) + ul.o-List.o-Flex + li.o-List__Item.o-Flex__Item Burns & McDonnell Engineering + li.o-List__Item.o-Flex__Item DIS-TRAN Steel, LLC + li.o-List__Item.o-Flex__Item EDM International + li.o-List__Item.o-Flex__Item Electrical Consultants, Inc. + li.o-List__Item.o-Flex__Item Fabrimet Inc. + li.o-List__Item.o-Flex__Item Falcon Steel Company + li.o-List__Item.o-Flex__Item Sabre-FWT + li.o-List__Item.o-Flex__Item HDR + li.o-List__Item.o-Flex__Item Mitas Energy + li.o-List__Item.o-Flex__Item Power Consulting Associates, LLC + li.o-List__Item.o-Flex__Item Power Line Systems, Inc. + li.o-List__Item.o-Flex__Item Quanta Services + li.o-List__Item.o-Flex__Item ReliaPOLE Inspection Services + pre(class=classname.pre). + <ul class="o-List #[u o-Flex]"> + <li class="o-List__Item #[u o-Flex__Item]">Burns & McDonnell Engineering</li> + <li class="o-List__Item #[u o-Flex__Item]">DIS-TRAN Steel, LLC</li> + ... + </ul> + figcaption. + A Flex Object with not enough space. diff --git a/docs/includes/_o-Grid.docs.jade b/docs/includes/_o-Grid.docs.jade index 7330ea2..50b80a3 100644 --- a/docs/includes/_o-Grid.docs.jade +++ b/docs/includes/_o-Grid.docs.jade @@ -1,58 +1,57 @@ mixin docs_grid(classname) - classname = classname || {} - +newSection(2, Xmeter.DOCS.findPage('obj.html#grid-object')) - p. - The Grid Object is similar to the Flex Object except that it can be extended - to two dimensions. - It has the structure of a list in that all items share the same container - (unlike tables where cells might not share the same row), while at the same time - appearing like a table with rows and columns. - p. - By default, each item has a #[b main size] of #[code(class=classname.code) 100%] (unless overridden). - Using media queries, you can achieve a flexible and responsive table effect, - adjusting the number of #[b cross axes]—columns if - #[code(class=classname.code) flex-direction: row;], or rows if - #[code(class=classname.code) flex-direction: column;]—based on screen size. - In order to appear like a table, all the items within - a #[b cross axis] should have the same #[b main size]. - figure(class=classname.figure) - ul.o-List.o-Grid - li.o-List__Item.o-Grid__Item Burns & McDonnell Engineering - li.o-List__Item.o-Grid__Item DIS-TRAN Steel, LLC - li.o-List__Item.o-Grid__Item EDM International - pre(class=classname.pre). - <ul class="o-List #[u o-Grid]"> - <li class="o-List__Item #[u o-Grid__Item]">Burns & McDonnell Engineering</li> - <li class="o-List__Item #[u o-Grid__Item]">DIS-TRAN Steel, LLC</li> - ... - </ul> - figcaption A Grid Object with extra space. - figure(class=classname.figure) - ul.o-List.o-Grid - li.o-List__Item.o-Grid__Item Burns & McDonnell Engineering - li.o-List__Item.o-Grid__Item DIS-TRAN Steel, LLC - li.o-List__Item.o-Grid__Item EDM International - li.o-List__Item.o-Grid__Item Electrical Consultants, Inc. - li.o-List__Item.o-Grid__Item Fabrimet Inc. - li.o-List__Item.o-Grid__Item Falcon Steel Company - li.o-List__Item.o-Grid__Item Sabre-FWT - li.o-List__Item.o-Grid__Item HDR - li.o-List__Item.o-Grid__Item Mitas Energy - li.o-List__Item.o-Grid__Item Power Consulting Associates, LLC - li.o-List__Item.o-Grid__Item Power Line Systems, Inc. - li.o-List__Item.o-Grid__Item Quanta Services - li.o-List__Item.o-Grid__Item ReliaPOLE Inspection Services - li.o-List__Item.o-Grid__Item Sabre-FWT - li.o-List__Item.o-Grid__Item SAE Towers - li.o-List__Item.o-Grid__Item TAPP Steel Poles - li.o-List__Item.o-Grid__Item Trinity Meyer Utility Structures - li.o-List__Item.o-Grid__Item TRC Engineers - li.o-List__Item.o-Grid__Item Underground Devices - li.o-List__Item.o-Grid__Item Valmont Newmark - pre(class=classname.pre). - <ul class="o-List #[u o-Grid]"> - <li class="o-List__Item #[u o-Grid__Item]">Burns & McDonnell Engineering</li> - <li class="o-List__Item #[u o-Grid__Item]">DIS-TRAN Steel, LLC</li> - ... - </ul> - figcaption A Grid Object with not enough space. + p. + The Grid Object is similar to the Flex Object except that it can be extended + to two dimensions. + It has the structure of a list in that all items share the same container + (unlike tables where cells might not share the same row), while at the same time + appearing like a table with rows and columns. + p. + By default, each item has a #[b main size] of #[code(class=classname.code) 100%] (unless overridden). + Using media queries, you can achieve a flexible and responsive table effect, + adjusting the number of #[b cross axes]—columns if + #[code(class=classname.code) flex-direction: row;], or rows if + #[code(class=classname.code) flex-direction: column;]—based on screen size. + In order to appear like a table, all the items within + a #[b cross axis] should have the same #[b main size]. + figure(class=classname.figure) + ul.o-List.o-Grid + li.o-List__Item.o-Grid__Item Burns & McDonnell Engineering + li.o-List__Item.o-Grid__Item DIS-TRAN Steel, LLC + li.o-List__Item.o-Grid__Item EDM International + pre(class=classname.pre). + <ul class="o-List #[u o-Grid]"> + <li class="o-List__Item #[u o-Grid__Item]">Burns & McDonnell Engineering</li> + <li class="o-List__Item #[u o-Grid__Item]">DIS-TRAN Steel, LLC</li> + ... + </ul> + figcaption A Grid Object with extra space. + figure(class=classname.figure) + ul.o-List.o-Grid + li.o-List__Item.o-Grid__Item Burns & McDonnell Engineering + li.o-List__Item.o-Grid__Item DIS-TRAN Steel, LLC + li.o-List__Item.o-Grid__Item EDM International + li.o-List__Item.o-Grid__Item Electrical Consultants, Inc. + li.o-List__Item.o-Grid__Item Fabrimet Inc. + li.o-List__Item.o-Grid__Item Falcon Steel Company + li.o-List__Item.o-Grid__Item Sabre-FWT + li.o-List__Item.o-Grid__Item HDR + li.o-List__Item.o-Grid__Item Mitas Energy + li.o-List__Item.o-Grid__Item Power Consulting Associates, LLC + li.o-List__Item.o-Grid__Item Power Line Systems, Inc. + li.o-List__Item.o-Grid__Item Quanta Services + li.o-List__Item.o-Grid__Item ReliaPOLE Inspection Services + li.o-List__Item.o-Grid__Item Sabre-FWT + li.o-List__Item.o-Grid__Item SAE Towers + li.o-List__Item.o-Grid__Item TAPP Steel Poles + li.o-List__Item.o-Grid__Item Trinity Meyer Utility Structures + li.o-List__Item.o-Grid__Item TRC Engineers + li.o-List__Item.o-Grid__Item Underground Devices + li.o-List__Item.o-Grid__Item Valmont Newmark + pre(class=classname.pre). + <ul class="o-List #[u o-Grid]"> + <li class="o-List__Item #[u o-Grid__Item]">Burns & McDonnell Engineering</li> + <li class="o-List__Item #[u o-Grid__Item]">DIS-TRAN Steel, LLC</li> + ... + </ul> + figcaption A Grid Object with not enough space. diff --git a/docs/includes/_o-List.docs.jade b/docs/includes/_o-List.docs.jade index b728784..ca38866 100644 --- a/docs/includes/_o-List.docs.jade +++ b/docs/includes/_o-List.docs.jade @@ -1,21 +1,20 @@ mixin docs_list(classname) - classname = classname || {} - +newSection(2, Xmeter.DOCS.findPage('obj.html#list-object')) - p. - Use the List Object to remove the usual padding and list item markers accompanied by - (un)ordered lists. The result is a list of items, each on its own line. - Combine this class with other classes to create a variety of styles. - figure(class=classname.figure) - ul.o-List - li.o-List__Item Burns & McDonnell Engineering - li.o-List__Item DIS-TRAN Steel, LLC - li.o-List__Item EDM International - li.o-List__Item Electrical Consultants, Inc. - li.o-List__Item Fabrimet Inc. - li.o-List__Item Falcon Steel Company - pre(class=classname.pre). - <ul class="#[u o-List]"> - <li class="#[u o-List__Item]">Burns & McDonnell Engineering</li> - <li class="#[u o-List__Item]">DIS-TRAN Steel, LLC</li> - ... - </ul> + p. + Use the List Object to remove the usual padding and list item markers accompanied by + (un)ordered lists. The result is a list of items, each on its own line. + Combine this class with other classes to create a variety of styles. + figure(class=classname.figure) + ul.o-List + li.o-List__Item Burns & McDonnell Engineering + li.o-List__Item DIS-TRAN Steel, LLC + li.o-List__Item EDM International + li.o-List__Item Electrical Consultants, Inc. + li.o-List__Item Fabrimet Inc. + li.o-List__Item Falcon Steel Company + pre(class=classname.pre). + <ul class="#[u o-List]"> + <li class="#[u o-List__Item]">Burns & McDonnell Engineering</li> + <li class="#[u o-List__Item]">DIS-TRAN Steel, LLC</li> + ... + </ul> diff --git a/docs/obj.jade b/docs/obj.jade index eaa75ed..b33ccc4 100644 --- a/docs/obj.jade +++ b/docs/obj.jade @@ -4,9 +4,12 @@ block append vars - var page = Xmeter.DOCS.getPage('obj.html') block append main - include includes/_o-List.docs.jade - +docs_list(Xmeter.DOCS_CLASSES) - include includes/_o-Flex.docs.jade - +docs_flex(Xmeter.DOCS_CLASSES) - include includes/_o-Grid.docs.jade - +docs_grid(Xmeter.DOCS_CLASSES) + +newSection(2, Xmeter.DOCS.findPage('obj.html#list-object')) + include includes/_o-List.docs.jade + +docs_list(Xmeter.DOCS_CLASSES) + +newSection(2, Xmeter.DOCS.findPage('obj.html#flex-object')) + include includes/_o-Flex.docs.jade + +docs_flex(Xmeter.DOCS_CLASSES) + +newSection(2, Xmeter.DOCS.findPage('obj.html#grid-object')) + include includes/_o-Grid.docs.jade + +docs_grid(Xmeter.DOCS_CLASSES) From 38c560e9ddfacb309a5457b12312ac62558f6f96 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Fri, 19 Aug 2016 22:15:56 -0400 Subject: [PATCH 31/53] improve frag id styling --- docs/base.jade | 2 +- docs/styles/docs.less | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/base.jade b/docs/base.jade index ae1bf02..66f9257 100644 --- a/docs/base.jade +++ b/docs/base.jade @@ -15,7 +15,7 @@ block append scripts } $('h1, h2, h3, h4, h5, h6').each(function () { if (!$(this).parents('figure').length) { - var id = toURL($(this).text()) + var id = '_' + toURL($(this).text()) // underscore avoids conflict with section ids $(this).append($('').addClass('docs-_fragid').attr('id', id).attr('href', '#' + id)) } }) diff --git a/docs/styles/docs.less b/docs/styles/docs.less index 48d0b56..ee480b8 100644 --- a/docs/styles/docs.less +++ b/docs/styles/docs.less @@ -63,11 +63,11 @@ margin-left: 1rem; font-weight: 100; &::before { - content: '\00a7'; + content: ''; } } h1, h2, h3, h4, h5, h6 { - &:not(:hover) > .docs-_fragid { - visibility: hidden; + &:hover > .docs-_fragid::before { + content: '\00a7'; } } From c7468095f5d6dd7103f6b71a833c6002d8a0bc0e Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Fri, 19 Aug 2016 22:28:35 -0400 Subject: [PATCH 32/53] hard-code base.jade frag ids --- docs/_docs.tpl.jade | 1 - docs/base.jade | 13 ------------- docs/includes/_base.docs.jade | 22 +++++++++++----------- 3 files changed, 11 insertions(+), 25 deletions(-) diff --git a/docs/_docs.tpl.jade b/docs/_docs.tpl.jade index ab41830..6d662f0 100644 --- a/docs/_docs.tpl.jade +++ b/docs/_docs.tpl.jade @@ -28,4 +28,3 @@ html(lang="en") footer: nav h1 Sitemap +doctoc({pages: Xmeter.DOCS.getPagesAll()}) - block scripts diff --git a/docs/base.jade b/docs/base.jade index 66f9257..5de6106 100644 --- a/docs/base.jade +++ b/docs/base.jade @@ -6,16 +6,3 @@ block append vars block append main - var classname = Xmeter.DOCS_CLASSES include includes/_base.docs.jade - -block append scripts - script(src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous") - script. - function toURL(string) { - return encodeURIComponent(string.toLowerCase().replace(/[\W]+/g, '-')) - } - $('h1, h2, h3, h4, h5, h6').each(function () { - if (!$(this).parents('figure').length) { - var id = '_' + toURL($(this).text()) // underscore avoids conflict with section ids - $(this).append($('').addClass('docs-_fragid').attr('id', id).attr('href', '#' + id)) - } - }) diff --git a/docs/includes/_base.docs.jade b/docs/includes/_base.docs.jade index 7c8ee8e..22ab195 100644 --- a/docs/includes/_base.docs.jade +++ b/docs/includes/_base.docs.jade @@ -1,7 +1,7 @@ - classname = classname || {} section#headings-paragraphs block headingsParagraphs - h2 Headings & Paragraphs + h2 Headings & Paragraphs #[a.docs-_fragid(href='#headings-paragraphs')] figure(class=classname.figure) h1 Heading 1 #[code(class=classname.code) h1] p. @@ -117,7 +117,7 @@ section#headings-paragraphs hr section#lists block lists - h2 Lists + h2 Lists #[a.docs-_fragid(href='#lists')] figure(class=classname.figure) figcaption Ordered List #[code(class=classname.code) ol] ol @@ -157,7 +157,7 @@ section#lists li 2nd value section#tables block tables - h2 Tables + h2 Tables #[a.docs-_fragid(href='#tables')] figure(class=classname.figure) table caption #[code(class=classname.code) table] #[code(class=classname.code) caption] @@ -184,17 +184,17 @@ section#tables +tablebodyrows(3,3) section#text-level-elements block textLevelElements - h2 Text-Level Elements + h2 Text-Level Elements #[a.docs-_fragid(href='#text-level-elements')] section#links block links - h3 Links + h3 Links #[a.docs-_fragid(href='#links')] figure(class=classname.figure): ul block linksList li: a a li: a(href="#0") a[href] section#stress block stress - h3 Stress + h3 Stress #[a.docs-_fragid(href='#stress')] figure(class=classname.figure): ul block stressList li: em emphasized text #[code(class=classname.code) em] @@ -206,7 +206,7 @@ section#text-level-elements li: s text shown to be no longer relevant #[code(class=classname.code) s] section#documentation block documentation - h3 Documentation + h3 Documentation #[a.docs-_fragid(href='#documentation')] figure(class=classname.figure): ul block documentationList li: ins content shown to be inserted into a document #[code(class=classname.code) ins] @@ -221,7 +221,7 @@ section#text-level-elements li: sub subscript #[code(class=classname.code) sub] section#data block data - h3 Data + h3 Data #[a.docs-_fragid(href='#data')] figure(class=classname.figure): ul block dataList li: time(datetime="Z") a specific date or time #[code(class=classname.code) time] @@ -232,10 +232,10 @@ section#text-level-elements li: samp sample computer output #[code(class=classname.code) samp] section#embedded-elements block embeddedElements - h2 Embedded Elements + h2 Embedded Elements #[a.docs-_fragid(href='#embedded-elements')] section#forms block forms - h2 Forms + h2 Forms #[a.docs-_fragid(href='#forms')] form(class=classname.form) figure(class=classname.figure) fieldset @@ -328,7 +328,7 @@ section#forms textarea section#interactive-elements block interactiveElements - h2 Interactive Elements + h2 Interactive Elements #[a.docs-_fragid(href='#interactive-elements')] figure(class=classname.figure) details summary Integer at lacus et diam tristique #[code(class=classname.code) details summary] suscipit. From e9961c026fd477edd80d321c2dfac14bab1b93e4 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Fri, 19 Aug 2016 22:34:55 -0400 Subject: [PATCH 33/53] generate font-size frag id --- docs/atom.jade | 5 ++- docs/includes/_atom.font-size.docs.jade | 60 ++++++++++++------------- 2 files changed, 32 insertions(+), 33 deletions(-) diff --git a/docs/atom.jade b/docs/atom.jade index ef22ae5..d39a14d 100644 --- a/docs/atom.jade +++ b/docs/atom.jade @@ -10,5 +10,6 @@ block append main +newSection(2, Xmeter.DOCS.findPage('atom.html#padding-top')) include includes/_atom.padding-top.docs.jade +docs_paddingTop(Xmeter.DOCS_CLASSES) - include includes/_atom.font-size.docs.jade - +docs_fontSize(Xmeter.DOCS_CLASSES) + +newSection(2, Xmeter.DOCS.findPage('atom.html#font-size')) + include includes/_atom.font-size.docs.jade + +docs_fontSize(Xmeter.DOCS_CLASSES) diff --git a/docs/includes/_atom.font-size.docs.jade b/docs/includes/_atom.font-size.docs.jade index 306f00c..64915d0 100644 --- a/docs/includes/_atom.font-size.docs.jade +++ b/docs/includes/_atom.font-size.docs.jade @@ -1,34 +1,32 @@ mixin docs_fontSize(classname) - classname = classname || {} - section#font-size - h2 font-size - 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=classname.code) .font-size-el()] mixin, - for maintaining vertical rhythm. - p. - See all the font sizes in the source file #[code(class=classname.code) /src/__settings.less], - and all atoms in #[code(class=classname.code) /src/_atom.less] + 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=classname.code) .font-size-el()] mixin, + for maintaining vertical rhythm. + p. + See all the font sizes in the source file #[code(class=classname.code) /src/__settings.less], + and all atoms in #[code(class=classname.code) /src/_atom.less] + pre(class=classname.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); } + figure(class=classname.figure) + p + | The following #[code(class=classname.code) u] element is one step bigger than normal:#{' '} + u.-fz-kilo this is the element. pre(class=classname.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); } - figure(class=classname.figure) - p - | The following #[code(class=classname.code) u] element is one step bigger than normal:#{' '} - u.-fz-kilo this is the element. - pre(class=classname.pre). - <u class="#[u -fz-kilo]">this is the element.</u> - figure(class=classname.figure) - p.-fz-el-mill. - This entire paragraph is one step smaller than normal. - Use #[code(class=classname.code) .-fz-el-*] on blocks. - pre(class=classname.pre). - <p class="#[u -fz-el-mill]">This entire paragraph ...</p> + <u class="#[u -fz-kilo]">this is the element.</u> + figure(class=classname.figure) + p.-fz-el-mill. + This entire paragraph is one step smaller than normal. + Use #[code(class=classname.code) .-fz-el-*] on blocks. + pre(class=classname.pre). + <p class="#[u -fz-el-mill]">This entire paragraph ...</p> From 06fd49247078d82b57f7e9bcb5e0e835529f4804 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Fri, 19 Aug 2016 22:51:32 -0400 Subject: [PATCH 34/53] update tools docs --- docs/tools.md | 41 ++++++++++++++++++++++------------------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/docs/tools.md b/docs/tools.md index f656e78..fecce7e 100644 --- a/docs/tools.md +++ b/docs/tools.md @@ -2,17 +2,20 @@ Functions and mixins used for development. -Tools are mixins and/or functions in the codebase that are used in development. +These are the mixins and/or functions in the codebase that are used in development. These rules don’t output any CSS, but they do make writing CSS a lot easier by encapsulating reusable sets of property declarations. -[Fallback Tools](#fallback-tools) are simply mixins that address +[Fallbacks](#fallbacks) are simply mixins that address browser vendor prefixes for CSS properties and values, -whereas [Module Tools](#module-tools) combine properties commonly used together. +whereas [Tools](#tools) combine properties commonly used together. + +WARNING: Syntax shown in code below has not been completely resolved. +Watch out for changes. ## Table of Contents 1. [Table of Contents](#table-contents) -- [Fallback Tools](#fallback-tools) +- [Fallbacks](#fallbacks) 1. [box-sizing](#box-sizing) - [The Flexbox Tools](#flexbox-tools) - [transform](#transform) @@ -20,7 +23,7 @@ whereas [Module Tools](#module-tools) combine properties commonly used together - [column-count](#column-count) - [column-width](#column-width) - [filter](#filter) -- [Module Tools](#module-tools) +- [Tools](#tools) 1. [vertspacing](#vertspacing) - [borders](#borders) - [border-radius](#border-radius) @@ -28,11 +31,11 @@ whereas [Module Tools](#module-tools) combine properties commonly used together - [delims](#delims) - [sprite](#sprite) -## Fallback Tools +## Fallbacks ### box-sizing ```less -@import (reference) url('/node_modules/xmeter/src/__tool.fallback.box-sizing.less'); +@import (reference) url('/node_modules/xmeter/src/__fallback.box-sizing.less'); .your-class { .box-sizing([!content-box | border-box]?); } @@ -45,7 +48,7 @@ whereas [Module Tools](#module-tools) combine properties commonly used together ### transform ```less -@import (reference) url('/node_modules/xmeter/src/__tool.fallback.transform.less'); +@import (reference) url('/node_modules/xmeter/src/__fallback.transform.less'); .your-class { .transform([!none | ]?); } @@ -53,7 +56,7 @@ whereas [Module Tools](#module-tools) combine properties commonly used together ### transform-origin ```less -@import (reference) url('/node_modules/xmeter/src/__tool.fallback.transform-origin.less'); +@import (reference) url('/node_modules/xmeter/src/__fallback.transform-origin.less'); .your-class { .transform-origin(?:[50% 50% 0]); } @@ -67,7 +70,7 @@ whereas [Module Tools](#module-tools) combine properties commonly used together ### column-count ```less -@import (reference) url('/node_modules/xmeter/src/__tool.fallback.column-count.less'); +@import (reference) url('/node_modules/xmeter/src/__fallback.column-count.less'); .your-class { .column-count([!auto | ]?); } @@ -75,7 +78,7 @@ whereas [Module Tools](#module-tools) combine properties commonly used together ### column-width ```less -@import (reference) url('/node_modules/xmeter/src/__tool.fallback.column-width.less'); +@import (reference) url('/node_modules/xmeter/src/__fallback.column-width.less'); .your-class { .column-width([!auto | ]?); } @@ -83,17 +86,17 @@ whereas [Module Tools](#module-tools) combine properties commonly used together ### filter ```less -@import (reference) url('/node_modules/xmeter/src/__tool.fallback.filter.less'); +@import (reference) url('/node_modules/xmeter/src/__fallback.filter.less'); .your-class { .column-width([!none | ]?); } ``` -## Module Tools +## Tools ### vertspacing ```less -@import (reference) url('/node_modules/xmeter/src/__tool.module.vertspacing.less'); +@import (reference) url('/node_modules/xmeter/src/__tool.vertspacing.less'); .your-module { .vertspacing(?:@g-vru); } @@ -101,7 +104,7 @@ whereas [Module Tools](#module-tools) combine properties commonly used together ### borders ```less -@import (reference) url('/node_modules/xmeter/src/__tool.module.borders.less'); +@import (reference) url('/node_modules/xmeter/src/__tool.borders.less'); .your-class { .border-vert([top | bot | topbot | all]; ?:0); } @@ -109,7 +112,7 @@ whereas [Module Tools](#module-tools) combine properties commonly used together ### border-radius ```less -@import (reference) url('/node_modules/xmeter/src/__tool.module.border-radius.less'); +@import (reference) url('/node_modules/xmeter/src/__tool.border-radius.less'); .your-class { .border-left-radius(?:0); .border-right-radius(?:0); @@ -120,7 +123,7 @@ whereas [Module Tools](#module-tools) combine properties commonly used together ### Font Sizing Tools ```less -@import (reference) url('/node_modules/xmeter/src/__tool.module.fontsize.less'); +@import (reference) url('/node_modules/xmeter/src/__tool.fontsize.less'); .your-module { .font-size-mod(?:1); .your-element { @@ -131,7 +134,7 @@ whereas [Module Tools](#module-tools) combine properties commonly used together ### delims ```less -@import (reference) url('/node_modules/xmeter/src/__tool.module.delims.less'); +@import (reference) url('/node_modules/xmeter/src/__tool.delims.less'); .your-class { .delims([!none | [ ]+]?); .parens(); // ( ) @@ -149,7 +152,7 @@ whereas [Module Tools](#module-tools) combine properties commonly used together ### sprite ```less -@import (reference) url('/node_modules/xmeter/src/__tool.module.delims.less'); +@import (reference) url('/node_modules/xmeter/src/__tool.delims.less'); .your-class { .sprite([horizontal | vertical]; ; ; ); } From 72e94171c3a0641fe51867c7bd481a5af4aea981 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Fri, 19 Aug 2016 23:27:32 -0400 Subject: [PATCH 35/53] 5.1.0 --- package.json | 2 +- xmeter.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 8184e00..47cb5e2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "xmeter", - "version": "5.0.0", + "version": "5.1.0", "description": "A default stylesheet with a set of tools that make designing with vertical rhythm easy.", "main": "xmeter.css", "dependencies": {}, diff --git a/xmeter.less b/xmeter.less index dd93095..516c917 100644 --- a/xmeter.less +++ b/xmeter.less @@ -1,7 +1,7 @@ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\ xmeter - Version: 5.0.0 + Version: 5.1.0 Licence: MIT Repo : https://github.com/chharvey/xmeter.git Home : https://github.com/chharvey/xmeter#readme From 06c2a992bfc4f4b4223db5b977bcec72ff8aa1bf Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Fri, 19 Aug 2016 23:48:26 -0400 Subject: [PATCH 36/53] more font-size examples --- docs/includes/_atom.font-size.docs.jade | 48 ++++++++++++++++++++----- 1 file changed, 40 insertions(+), 8 deletions(-) diff --git a/docs/includes/_atom.font-size.docs.jade b/docs/includes/_atom.font-size.docs.jade index 64915d0..86ef669 100644 --- a/docs/includes/_atom.font-size.docs.jade +++ b/docs/includes/_atom.font-size.docs.jade @@ -19,14 +19,46 @@ mixin docs_fontSize(classname) .-fz-norm { font-size: @g-font_size_norm * 1em; } .-fz-el-norm { .font-size-el(@g-font_size_norm); } figure(class=classname.figure) - p - | The following #[code(class=classname.code) u] element is one step bigger than normal:#{' '} - u.-fz-kilo this is the element. + figcaption.-mb-1vru. + Use #[code(class=classname.code) .-fz-*] on inline elements. + Numbers shown are font-sizes(ems). + ul + li #[u.-fz-peta universe] (6.00) + li #[u.-fz-tera galaxy ] (4.00) + li #[u.-fz-giga star ] (3.00) + li #[u.-fz-mega planet ] (2.00) + li #[u.-fz-kilo asteroid] (1.50) + li #[u.-fz-norm molecule] (1.00) + li #[u.-fz-mill atom ] (0.75) + li #[u.-fz-micr quark ] (0.50) pre(class=classname.pre). - <u class="#[u -fz-kilo]">this is the element.</u> + <li><u class="#[u -fz-peta]">universe</u> (6.00)</li> + <li><u class="#[u -fz-tera]">galaxy </u> (4.00)</li> + <li><u class="#[u -fz-giga]">star </u> (3.00)</li> + <li><u class="#[u -fz-mega]">planet </u> (2.00)</li> + <li><u class="#[u -fz-kilo]">asteroid</u> (1.50)</li> + <li><u class="#[u -fz-norm]">molecule</u> (1.00)</li> + <li><u class="#[u -fz-mill]">atom </u> (0.75)</li> + <li><u class="#[u -fz-micr]">quark </u> (0.50)</li> figure(class=classname.figure) - p.-fz-el-mill. - This entire paragraph is one step smaller than normal. - Use #[code(class=classname.code) .-fz-el-*] on blocks. + figcaption. + Use #[code(class=classname.code) .-fz-el-*] on block elements. + Numbers shown are font-sizes(ems)/line-heights. + ul(style="overflow:auto;white-space:nowrap;") + li.-fz-el-peta universe (6.00/0.250) + li.-fz-el-tera galaxy (4.00/0.375) + li.-fz-el-giga star (3.00/0.500) + li.-fz-el-mega planet (2.00/0.750) + li.-fz-el-kilo asteroid (1.50/1.000) + li.-fz-el-norm molecule (1.00/1.500) + li.-fz-el-mill atom (0.75/2.000) + li.-fz-el-micr quark (0.50/3.000) pre(class=classname.pre). - <p class="#[u -fz-el-mill]">This entire paragraph ...</p> + <li class="#[u -fz-el-peta]">universe (6.00/0.250)</li> + <li class="#[u -fz-el-tera]">galaxy (4.00/0.375)</li> + <li class="#[u -fz-el-giga]">star (3.00/0.500)</li> + <li class="#[u -fz-el-mega]">planet (2.00/0.750)</li> + <li class="#[u -fz-el-kilo]">asteroid (1.50/1.000)</li> + <li class="#[u -fz-el-norm]">molecule (1.00/1.500)</li> + <li class="#[u -fz-el-mill]">atom (0.75/2.000)</li> + <li class="#[u -fz-el-micr]">quark (0.50/3.000)</li> From 61ddbd3d570dc4899f3657dd2271ca5daade2525 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Fri, 19 Aug 2016 23:50:14 -0400 Subject: [PATCH 37/53] rebuild 2016-08-19T23:50 --- docs/atom.html | 34 + docs/base.html | 72 ++ docs/help.html | 23 + docs/index.html | 1 + docs/obj.html | 37 + docs/styles/docs.css | 71 ++ xmeter.css | 2047 ++++++++++++++++++++++++++++++++++++++++++ xmeter.min.css | 1 + 8 files changed, 2286 insertions(+) create mode 100644 docs/atom.html create mode 100644 docs/base.html create mode 100644 docs/help.html create mode 100644 docs/index.html create mode 100644 docs/obj.html create mode 100644 docs/styles/docs.css create mode 100644 xmeter.css create mode 100644 xmeter.min.css diff --git a/docs/atom.html b/docs/atom.html new file mode 100644 index 0000000..74d5fea --- /dev/null +++ b/docs/atom.html @@ -0,0 +1,34 @@ +Atoms | Xmeter

Xmeter — Atoms

Very specific classes used for creating anomalies or fixing broken styles.

margin-bottom

This atom sets the bottom margin to one vertical rhythm unit (1vru), +which is equal to the html element’s +line-height multiplied by +1rem.

@g-vru: @g-line_height * 1rem;
+.-mb-1vru { margin-bottom: @g-vru; }
Most typographical block elements like paragraphs and lists are automatically given this style.
<div class="-mb-1vru">Most ...</div>

padding-top

This atom sets the top padding to 1vru.

@g-vru: @g-line_height * 1rem;
+.-pt-1vru { padding-top: @g-vru; }
Usually only Heading 1 is given this style, but it is also useful for moving an element down the page.
<div class="-pt-1vru">Usually only ...</div>

font-size

These are two groups of atoms. The first group simply sets the font size of an element. +The second group uses the .font-size-el() mixin, +for maintaining vertical rhythm.

See all the font sizes in the source file /src/__settings.less, +and all atoms in /src/_atom.less

@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); }
Use .-fz-* on inline elements. +Numbers shown are font-sizes(ems).
  • universe (6.00)
  • galaxy (4.00)
  • star (3.00)
  • planet (2.00)
  • asteroid (1.50)
  • molecule (1.00)
  • atom (0.75)
  • quark (0.50)
<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>
Use .-fz-el-* on block elements. +Numbers shown are font-sizes(ems)/line-heights.
  • universe (6.00/0.250)
  • galaxy (4.00/0.375)
  • star (3.00/0.500)
  • planet (2.00/0.750)
  • asteroid (1.50/1.000)
  • molecule (1.00/1.500)
  • atom (0.75/2.000)
  • quark (0.50/3.000)
<li class="-fz-el-peta">universe (6.00/0.250)</li>
+<li class="-fz-el-tera">galaxy   (4.00/0.375)</li>
+<li class="-fz-el-giga">star     (3.00/0.500)</li>
+<li class="-fz-el-mega">planet   (2.00/0.750)</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>
\ No newline at end of file diff --git a/docs/base.html b/docs/base.html new file mode 100644 index 0000000..4863559 --- /dev/null +++ b/docs/base.html @@ -0,0 +1,72 @@ +Base Typography | Xmeter

Xmeter — Base Typography

Bare, unstyled HTML elements. No classes.

Headings & Paragraphs

Heading 1 h1

Paragraph p +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.

Heading 2 h2

Paragraph p +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.

Heading 3 h3

Paragraph p +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.

Heading 4 h4

Paragraph p +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.

Heading 5 h5

Paragraph p +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.

Heading 6 h6

Paragraph p +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.

Lorem Ipsum h1

Lorem Ipsum h2

Lorem Ipsum h3

Lorem Ipsum h4

Lorem Ipsum h5
Lorem Ipsum h6
12345 address Ave br
+Washington, DC 00000 br
+United States of America
Pellentesque pre 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; })
+    };
+  }
+}
Aenean consectetur figure suscipit urna, non vehicula lacus blandit et.
Integer at lacus et diam tristique figure figcaption suscipit.
Donec blockquote vel dolor ut felis dapibus ultricies vitae a nibh.
A horizontal rule hr is present below.

Lists

Ordered List ol
  1. List item li
  2. List item li
    1. Nested list item
    2. Nested list item
      1. Another nested list item
      2. Another nested list item
Unrdered List ul
  • List item li
  • List item li
    • Nested list item
    • Nested list item
      • Another nested list item
      • Another nested list item
Dictionary List dl
key dt
value dd
  • 1st key
  • 2nd key
value
key
  • 1st value
  • 2nd value

Tables

table caption
theader trow 1 theading 1theader trow 1 theading 2theader trow 1 theading 3
tfooter trow 1 tdata 1tfooter trow 1 tdata 2tfooter trow 1 tdata 3
tfooter trow 2 tdata 1tfooter trow 2 tdata 2tfooter trow 2 tdata 3
tbody trow 1 tdata 1tbody trow 1 tdata 2tbody trow 1 tdata 3
tbody trow 2 tdata 1tbody trow 2 tdata 2tbody trow 2 tdata 3
tbody trow 3 tdata 1tbody trow 3 tdata 2tbody trow 3 tdata 3

Text-Level Elements

Stress

  • emphasized text em
  • important text strong
  • alternate voice/mood (scare quotes, mentioning words, foreign expressions) i
  • relevant in some context mark
  • unarticulated annotation u
  • side comment small
  • text shown to be no longer relevant s

Documentation

  • content shown to be inserted into a document ins
  • content shown to be deleted from a document del
  • definining instance of a term dfn
  • keyword or technical term b
  • abbreviation or acronym abbr[title]
  • variable var
  • quoted material q
  • reference to a work, some part of a work, or the creator of a work cite
  • superscript sup
  • subscript sub

Data

  • generic machine-readable data data
  • a fragment of code code
  • user input kbd
  • a button or key on a physical device kbd > kbd
  • sample computer output samp

Embedded Elements

Forms

Integer at lacus et diam tristique fieldset legend suscipit.Aenean consectetur fieldset suscipit urna, non vehicula lacus blandit et.
single line text inputs
date/time
without text input
check boxes
radio buttons
drop-down list (select only one)
drop-down list (select multiple)
buttons
textarea

Interactive Elements

Integer at lacus et diam tristique details summary suscipit.Aenean consectetur details suscipit urna, non vehicula lacus blandit et.
\ No newline at end of file diff --git a/docs/help.html b/docs/help.html new file mode 100644 index 0000000..6a6fbda --- /dev/null +++ b/docs/help.html @@ -0,0 +1,23 @@ +Helpers | Xmeter

Xmeter — Helpers

Somewhat explicit classes used for enhancing default styles.

Block

The Block Helper creates a blocky look, +with an inherited line-height to maintain vertical rhythm.

Albert Einstein was made famous by his equation +E = mc2 +which explains the relationship between energy and mass.

<p>... his famous equation
+  <b class="h-Block" style="text-align:center;">E = mc<sup>2</sup></b>
+  which explains ...</p>

Inline

Creates an inline look, +with zero line-height to maintain vertical rhythm.

This class is useful for creating inline lists, that is, +lists whose items are each displayed in line, one right after another.

  • spacetime
  • black hole
  • singularity
  • gravity
  • supernova
  • neutron star 
<ul>
+  <li class="h-Inline">spacetime </li>
+  <li class="h-Inline">black hole </li>
+  ...
+</ul>

Clearfix

The Clearfix Helper creates a line break after an element. +This could be a container of floats, or it could simply be an inline list item. +Use this as an alternative to the br element.

gravity
supernova
spacetime black hole singularity
<div class="h-Clearfix">
+  <div style="float:  left;">gravity</div>
+  <div style="float: right;">supernova</div>
+</div>
+<div>spacetime black hole singularity</div>
The Clearfix Helper is used in the classical sense.
    spacetime black hole singularity neutron star 
<ul>
+  <li class="o-Inline">spacetime </li>
+  <li class="o-Inline  h-Clearfix">black hole </li>
+  <li class="o-Inline">singularity </li>
+  <li class="o-Inline">neutron star </li>
+</ul>
The Clearfix Helper creates a line break after the 2nd inline item.
\ No newline at end of file diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..d05b5dd --- /dev/null +++ b/docs/index.html @@ -0,0 +1 @@ +Xmeter Style Guide

Xmeter Style Guide

A demo of Xmeter styles.

\ No newline at end of file diff --git a/docs/obj.html b/docs/obj.html new file mode 100644 index 0000000..0a3955f --- /dev/null +++ b/docs/obj.html @@ -0,0 +1,37 @@ +Objects | Xmeter

Xmeter — Objects

Patterns of structure that can be reused many times for many different purposes.

The List Object

Use the List Object to remove the usual padding and list item markers accompanied by +(un)ordered lists. The result is a list of items, each on its own line. +Combine this class with other classes to create a variety of styles.

  • Burns & McDonnell Engineering
  • DIS-TRAN Steel, LLC
  • EDM International
  • Electrical Consultants, Inc.
  • Fabrimet Inc.
  • Falcon Steel Company
<ul class="o-List">
+  <li class="o-List__Item">Burns & McDonnell Engineering</li>
+  <li class="o-List__Item">DIS-TRAN Steel, LLC</li>
+  ...
+</ul>

The Flex Object

A Flex Object is simply a container of flexible items arranged in one dimension. +Each flex item has a main size of auto, +depending on its contents. +The flex items will grow or shrink together to fit into the allotted space. +If overridden, the extra space (if any) will be distributed between the items.

  • Burns & McDonnell Engineering
  • DIS-TRAN Steel, LLC
  • EDM International
<ul class="o-List  o-Flex">
+  <li class="o-List__Item  o-Flex__Item">Burns & McDonnell Engineering</li>
+  <li class="o-List__Item  o-Flex__Item">DIS-TRAN Steel, LLC</li>
+  ...
+</ul>
A Flex Object with extra space.
  • Burns & McDonnell Engineering
  • DIS-TRAN Steel, LLC
  • EDM International
  • Electrical Consultants, Inc.
  • Fabrimet Inc.
  • Falcon Steel Company
  • Sabre-FWT
  • HDR
  • Mitas Energy
  • Power Consulting Associates, LLC
  • Power Line Systems, Inc.
  • Quanta Services
  • ReliaPOLE Inspection Services
<ul class="o-List  o-Flex">
+  <li class="o-List__Item  o-Flex__Item">Burns & McDonnell Engineering</li>
+  <li class="o-List__Item  o-Flex__Item">DIS-TRAN Steel, LLC</li>
+  ...
+</ul>
A Flex Object with not enough space.

The Grid Object

The Grid Object is similar to the Flex Object except that it can be extended +to two dimensions. +It has the structure of a list in that all items share the same container +(unlike tables where cells might not share the same row), while at the same time +appearing like a table with rows and columns.

By default, each item has a main size of 100% (unless overridden). +Using media queries, you can achieve a flexible and responsive table effect, +adjusting the number of cross axes—columns if +flex-direction: row;, or rows if +flex-direction: column;—based on screen size. +In order to appear like a table, all the items within +a cross axis should have the same main size.

  • Burns & McDonnell Engineering
  • DIS-TRAN Steel, LLC
  • EDM International
<ul class="o-List  o-Grid">
+  <li class="o-List__Item  o-Grid__Item">Burns & McDonnell Engineering</li>
+  <li class="o-List__Item  o-Grid__Item">DIS-TRAN Steel, LLC</li>
+  ...
+</ul>
A Grid Object with extra space.
  • Burns & McDonnell Engineering
  • DIS-TRAN Steel, LLC
  • EDM International
  • Electrical Consultants, Inc.
  • Fabrimet Inc.
  • Falcon Steel Company
  • Sabre-FWT
  • HDR
  • Mitas Energy
  • Power Consulting Associates, LLC
  • Power Line Systems, Inc.
  • Quanta Services
  • ReliaPOLE Inspection Services
  • Sabre-FWT
  • SAE Towers
  • TAPP Steel Poles
  • Trinity Meyer Utility Structures
  • TRC Engineers
  • Underground Devices
  • Valmont Newmark
<ul class="o-List  o-Grid">
+  <li class="o-List__Item  o-Grid__Item">Burns & McDonnell Engineering</li>
+  <li class="o-List__Item  o-Grid__Item">DIS-TRAN Steel, LLC</li>
+  ...
+</ul>
A Grid Object with not enough space.
\ No newline at end of file diff --git a/docs/styles/docs.css b/docs/styles/docs.css new file mode 100644 index 0000000..30aa397 --- /dev/null +++ b/docs/styles/docs.css @@ -0,0 +1,71 @@ +/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\ + xmeter +\*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ +/*================================*\ + docs.less +\*================================*/ +.docs-body { + background-image: url('https://chharvey.github.io/core/images/crossgrid-lined.svg'); + background-position: left top; + background-size: 1px 24px; + background-repeat: repeat; +} +.docs-main { + margin: 0 1rem 1.5rem; +} +.docs-pre, +.docs-code { + background-color: #333; + color: #ccc; + border-radius: 0.25rem; +} +.docs-pre u, +.docs-code u { + color: #6c6; +} +.docs-pre strong, +.docs-code strong { + color: #eee; +} +.docs-pre, +.docs-figure { + padding: 0.75rem 0.5rem; +} +.docs-code { + padding: 2px 4px; +} +.docs-figure { + position: relative; + margin-left: 1rem; + margin-right: 1rem; + border-width: 1px; + margin-top: -2px; + border-style: solid; + border-color: #ddd; + border-radius: 0.5rem; + background-color: #eee; + overflow: auto; +} +.docs-figure > figcaption { + font-style: italic; +} +.docs-form { + background: #fff; +} +.docs-_fragid { + display: inline; + line-height: 0; + margin-left: 1rem; + font-weight: 100; +} +.docs-_fragid::before { + content: ''; +} +h1:hover > .docs-_fragid::before, +h2:hover > .docs-_fragid::before, +h3:hover > .docs-_fragid::before, +h4:hover > .docs-_fragid::before, +h5:hover > .docs-_fragid::before, +h6:hover > .docs-_fragid::before { + content: '\00a7'; +} diff --git a/xmeter.css b/xmeter.css new file mode 100644 index 0000000..31051d6 --- /dev/null +++ b/xmeter.css @@ -0,0 +1,2047 @@ +/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\ + xmeter + Version: 5.1.0 + Licence: MIT + Repo : https://github.com/chharvey/xmeter.git + Home : https://github.com/chharvey/xmeter#readme + Author : Chris Harvey (https://chharvey.github.io/) +\*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ +/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\ + resetcss + Version: 1.0.3 + Licence: MIT + Repo : https://github.com/chharvey/resetcss.git + Home : https://github.com/chharvey/resetcss#readme + Author : Chris Harvey (https://chharvey.github.io/) +\*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ +/*================================*\ + reset.less +\*================================*/ +body { + text-align: left; + background: #fff; + color: #000; +} +sup, +sub { + vertical-align: inherit; +} +body, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +p, +figure, +blockquote, +pre, +ol, +ul, +dl, +dd, +fieldset { + margin: 0; +} +ol, +ul, +th, +td, +legend { + padding: 0; +} +h1, +h2, +h3, +h4, +h5, +h6, +address, +pre, +th, +em, +strong, +i, +small, +dfn, +b, +var, +cite, +sup, +sub, +code, +kbd, +samp { + font: inherit; +} +caption, +th { + text-align: inherit; +} +pre { + white-space: inherit; +} +mark { + background: transparent; +} +a, +u, +s, +ins, +del { + text-decoration: none; +} +ol, +ul { + list-style: none; +} +q { + quotes: none; +} +a, +mark { + color: inherit; +} + +/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ + +/** + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + * 2. Add the correct display in IE. + */ + +article, +aside, +details, /* 1 */ +figcaption, +figure, +footer, +header, +main, /* 2 */ +menu, +nav, +section, +summary { /* 1 */ + display: block; +} + +/** + * Add the correct display in IE 9-. + */ + +audio, +canvas, +progress, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Add the correct display in IE 10-. + * 1. Add the correct display in IE. + */ + +template, /* 1 */ +[hidden] { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ + +a:active, +a:hover { + outline-width: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +select, +textarea { + font: inherit; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Restore the font weight unset by the previous rule. + */ + +optgroup { + font-weight: bold; +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Change the border, margin, and padding in all browsers (opinionated). + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/*================================*\ + xmeter.less +\*================================*/ +/** + * CONTENTS + * + * reset.css (above).............strips all elements of all browser-default styles + * normalize.css (above).........(@necolas) addresses browser discrepancies + * + * BASE + * generic........................styles that apply to `html` and very far-reaching groups of elements + * sections.......................secioning content and section-related elements + * grouping.......................grouping content + * ....paras..........................paragraphs, block-level textual elements + * ....lists..........................ordered, unordered, dictionary + * ....tables.........................tables + * text...........................text-level and inline elements + * ....links..........................inline hyperlinks + * ....stress.........................text outstanding from surrounding prose + * ....doctext........................documentation elements + * ....data...........................machine- or human-readable data + * embedded.......................images and other media + * forms..........................form elements + * interactive....................interactive elements + * + * OBJECTS + * List...........................plain, unstyled, blocky list + * Flex...........................one-dimensional flexible box + * Grid...........................two-dimensional flexible box + * + * HELPERS + * Block..........................gives a blocky look + * Inline.........................a simple inline object + * Clearfix.......................creates a line break and clears floats + * + * ATOMS + * atom...........................single-use classes + */ +/*################################*\ + xmeter | _base.generic.less +\*################################*/ +*, +*::before, +*::after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + border: 0 solid; + content: ' '; + content: ''; + content: none; +} +@media print { + *, + *::before, + *::after { + background: transparent !important; + box-shadow: none !important; + text-shadow: none !important; + } +} +html { + font-size: 100%; + font-size: 16px; + line-height: 1.5; +} +h1, +h2, +h3, +h4, +h5, +h6, +p, +pre, +figure, +blockquote, +ol, +ul, +dl, +table, +fieldset { + margin-bottom: 1.5rem; +} +h1 { + padding-top: 1.5rem; +} +span, +br, +em, +strong, +i, +mark, +u, +small, +s, +dfn, +b, +abbr, +var, +q, +cite, +sup, +sub, +data, +time, +code, +kbd, +samp { + line-height: 0; +} +a, +ins, +del { + display: contents; +} + +/*################################*\ + xmeter | _base.sections.less +\*################################*/ +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 700; +} +h1 { + font-size: 3em; + line-height: 0.5; +} +h2 { + font-size: 2em; + line-height: 0.75; +} +h3 { + font-size: 1.5em; + line-height: 1; +} +h4 { + font-size: 1em; + line-height: 1.5; +} +h5 { + font-size: 0.75em; + line-height: 2; +} +h6 { + font-size: 0.5em; + line-height: 3; +} +h1 { + margin-top: 0; +} + +/*################################*\ + xmeter | _base.grouping.less +\*################################*/ +hr { + display: none; +} + +/*################################*\ + xmeter | _base.grouping.paras.less +\*################################*/ +pre { + font-size: 0.75em; + line-height: 2; + text-align: left; + text-indent: 0; + white-space: pre; + overflow: auto; +} +figure { + margin-top: 0; + margin-left: 0; + margin-right: 0; +} + +/*################################*\ + xmeter | _base.grouping.lists.less +\*################################*/ +li > ol, +li > ul, +li > dl, +dt > ol, +dt > ul, +dt > dl, +dd > ol, +dd > ul, +dd > dl { + margin-bottom: 0; +} +ol, +ul { + padding: 0 0 0 4rem; +} +li > ol, +li > ul, +dt > ol, +dt > ul, +dd > ol, +dd > ul { + padding-left: 2rem; +} +ol { + list-style-type: decimal; +} +ul { + list-style-type: disc; +} + +/*################################*\ + xmeter | _base.grouping.tables.less +\*################################*/ +table { + max-width: 100%; + border-collapse: collapse; + text-align: left; +} +caption { + text-align: center; +} +thead, +tfoot { + vertical-align: bottom; +} +tbody { + vertical-align: top; +} +th { + font-weight: 700; + text-align: center; +} + +/*################################*\ + xmeter | _base.text.less +\*################################*/ + +/*################################*\ + xmeter | _base.text.links.less +\*################################*/ +a { + color: #00e; +} +@media screen { + a:not([href]) { + opacity: 0.5; + } +} + +/*################################*\ + xmeter | _base.text.stress.less +\*################################*/ +em { + font-style: italic; +} +strong { + font-weight: 700; +} +i { + font-style: italic; +} +u { + text-decoration: underline; + color: #080; +} +small { + font-size: 0.75em; +} +s { + text-decoration: line-through; + color: #b00; +} + +/*################################*\ + xmeter | _base.text.doctext.less +\*################################*/ +ins { + background: #a6f3a6; +} +del { + background: #f8cbcb; +} +dfn { + font-style: inherit; + font-weight: 700; +} +b { + font-weight: 700; +} +abbr[title] { + cursor: help; + text-decoration: none; +} +var { + font-style: italic; +} +q { + quotes: '\201c' '\201d'; + quotes: initial; +} +q::before { + content: open-quote; +} +q::after { + content: close-quote; +} +cite { + font-style: italic; +} +sup, +sub { + font-size: 0.75em; +} + +/*################################*\ + xmeter | _base.text.data.less +\*################################*/ +code, +kbd, +samp { + font-size: 0.75em; + white-space: nowrap; +} +code code, +kbd code, +samp code, +code kbd, +kbd kbd, +samp kbd, +code samp, +kbd samp, +samp samp { + font-size: inherit; +} + +/*################################*\ + xmeter | _base.embedded.less +\*################################*/ +img { + width: auto; + height: auto; + max-width: 100%; + font-style: italic; + vertical-align: middle; +} + +/*################################*\ + xmeter | _base.forms.less +\*################################*/ +fieldset, +input, +select, +textarea, +button { + border-width: 1px; + margin-top: -2px; + border-style: solid; + border-color: #c0c0c0; + border-color: rgba(0, 0, 0, 0.25); +} +fieldset { + padding: 0 1rem; + margin-left: 0; + margin-right: 0; +} +input, +select, +textarea, +button { + padding: 0 0.25rem; +} +input:not([type="button"]):not([type="reset"]):not([type="submit"]), +textarea { + font-size: 0.75em; + line-height: 2; +} +textarea { + width: 30rem; + height: 9rem; + line-height: 1.5; +} +input[type="button"], +input[type="reset"], +input[type="submit"], +button { + background-color: #c0c0c0; + background-color: rgba(0, 0, 0, 0.25); +} +input[type="search"] { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/*################################*\ + xmeter | _base.interactive.less +\*################################*/ + +/*################################*\ + xmeter | _o-List.less +\*################################*/ +.o-List { + padding-left: 0; + list-style: none; +} +@media screen { + .o-List-s { + padding-left: 0; + list-style: none; + } +} +@media print { + .o-List-p { + padding-left: 0; + list-style: none; + } +} +@media screen and (min-width: 30em) { + .o-List-sK { + padding-left: 0; + list-style: none; + } +} +@media screen and (min-width: 45em) { + .o-List-sM { + padding-left: 0; + list-style: none; + } +} +@media screen and (min-width: 60em) { + .o-List-sG { + padding-left: 0; + list-style: none; + } +} +@media screen and (min-width: 75em) { + .o-List-sT { + padding-left: 0; + list-style: none; + } +} +@media screen and (min-width: 90em) { + .o-List-sP { + padding-left: 0; + list-style: none; + } +} + +/*################################*\ + xmeter | _o-Flex.less +\*################################*/ +.o-Flex { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + line-height: inherit; + -webkit-justify-content: space-between; + -moz-justify-content: space-between; + -ms-justify-content: space-between; + justify-content: space-between; +} +.o-Flex__Item { + -webkit-box-flex: auto; + -moz-box-flex: auto; + -webkit-flex: auto; + -moz-flex: auto; + -ms-flex: auto; + flex: auto; +} +@media screen { + .o-Flex-s { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + line-height: inherit; + -webkit-justify-content: space-between; + -moz-justify-content: space-between; + -ms-justify-content: space-between; + justify-content: space-between; + } + .o-Flex__Item-s { + -webkit-box-flex: auto; + -moz-box-flex: auto; + -webkit-flex: auto; + -moz-flex: auto; + -ms-flex: auto; + flex: auto; + } +} +@media print { + .o-Flex-p { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + line-height: inherit; + -webkit-justify-content: space-between; + -moz-justify-content: space-between; + -ms-justify-content: space-between; + justify-content: space-between; + } + .o-Flex__Item-p { + -webkit-box-flex: auto; + -moz-box-flex: auto; + -webkit-flex: auto; + -moz-flex: auto; + -ms-flex: auto; + flex: auto; + } +} +@media screen and (min-width: 30em) { + .o-Flex-sK { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + line-height: inherit; + -webkit-justify-content: space-between; + -moz-justify-content: space-between; + -ms-justify-content: space-between; + justify-content: space-between; + } + .o-Flex__Item-sK { + -webkit-box-flex: auto; + -moz-box-flex: auto; + -webkit-flex: auto; + -moz-flex: auto; + -ms-flex: auto; + flex: auto; + } +} +@media screen and (min-width: 45em) { + .o-Flex-sM { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + line-height: inherit; + -webkit-justify-content: space-between; + -moz-justify-content: space-between; + -ms-justify-content: space-between; + justify-content: space-between; + } + .o-Flex__Item-sM { + -webkit-box-flex: auto; + -moz-box-flex: auto; + -webkit-flex: auto; + -moz-flex: auto; + -ms-flex: auto; + flex: auto; + } +} +@media screen and (min-width: 60em) { + .o-Flex-sG { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + line-height: inherit; + -webkit-justify-content: space-between; + -moz-justify-content: space-between; + -ms-justify-content: space-between; + justify-content: space-between; + } + .o-Flex__Item-sG { + -webkit-box-flex: auto; + -moz-box-flex: auto; + -webkit-flex: auto; + -moz-flex: auto; + -ms-flex: auto; + flex: auto; + } +} +@media screen and (min-width: 75em) { + .o-Flex-sT { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + line-height: inherit; + -webkit-justify-content: space-between; + -moz-justify-content: space-between; + -ms-justify-content: space-between; + justify-content: space-between; + } + .o-Flex__Item-sT { + -webkit-box-flex: auto; + -moz-box-flex: auto; + -webkit-flex: auto; + -moz-flex: auto; + -ms-flex: auto; + flex: auto; + } +} +@media screen and (min-width: 90em) { + .o-Flex-sP { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + line-height: inherit; + -webkit-justify-content: space-between; + -moz-justify-content: space-between; + -ms-justify-content: space-between; + justify-content: space-between; + } + .o-Flex__Item-sP { + -webkit-box-flex: auto; + -moz-box-flex: auto; + -webkit-flex: auto; + -moz-flex: auto; + -ms-flex: auto; + flex: auto; + } +} + +/*################################*\ + xmeter | _o-Grid.less +\*################################*/ +.o-Grid { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + line-height: inherit; + -webkit-flex-wrap: wrap; + -moz-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.o-Grid__Item { + -webkit-box-flex: 100%; + -moz-box-flex: 100%; + -webkit-flex: 100%; + -moz-flex: 100%; + -ms-flex: 100%; + flex: 100%; +} +@media screen { + .o-Grid-s { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + line-height: inherit; + -webkit-flex-wrap: wrap; + -moz-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } + .o-Grid__Item-s { + -webkit-box-flex: 100%; + -moz-box-flex: 100%; + -webkit-flex: 100%; + -moz-flex: 100%; + -ms-flex: 100%; + flex: 100%; + } +} +@media print { + .o-Grid-p { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + line-height: inherit; + -webkit-flex-wrap: wrap; + -moz-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } + .o-Grid__Item-p { + -webkit-box-flex: 100%; + -moz-box-flex: 100%; + -webkit-flex: 100%; + -moz-flex: 100%; + -ms-flex: 100%; + flex: 100%; + } +} +@media screen and (min-width: 30em) { + .o-Grid-sK { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + line-height: inherit; + -webkit-flex-wrap: wrap; + -moz-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } + .o-Grid__Item-sK { + -webkit-box-flex: 100%; + -moz-box-flex: 100%; + -webkit-flex: 100%; + -moz-flex: 100%; + -ms-flex: 100%; + flex: 100%; + } +} +@media screen and (min-width: 45em) { + .o-Grid-sM { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + line-height: inherit; + -webkit-flex-wrap: wrap; + -moz-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } + .o-Grid__Item-sM { + -webkit-box-flex: 100%; + -moz-box-flex: 100%; + -webkit-flex: 100%; + -moz-flex: 100%; + -ms-flex: 100%; + flex: 100%; + } +} +@media screen and (min-width: 60em) { + .o-Grid-sG { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + line-height: inherit; + -webkit-flex-wrap: wrap; + -moz-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } + .o-Grid__Item-sG { + -webkit-box-flex: 100%; + -moz-box-flex: 100%; + -webkit-flex: 100%; + -moz-flex: 100%; + -ms-flex: 100%; + flex: 100%; + } +} +@media screen and (min-width: 75em) { + .o-Grid-sT { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + line-height: inherit; + -webkit-flex-wrap: wrap; + -moz-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } + .o-Grid__Item-sT { + -webkit-box-flex: 100%; + -moz-box-flex: 100%; + -webkit-flex: 100%; + -moz-flex: 100%; + -ms-flex: 100%; + flex: 100%; + } +} +@media screen and (min-width: 90em) { + .o-Grid-sP { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + line-height: inherit; + -webkit-flex-wrap: wrap; + -moz-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } + .o-Grid__Item-sP { + -webkit-box-flex: 100%; + -moz-box-flex: 100%; + -webkit-flex: 100%; + -moz-flex: 100%; + -ms-flex: 100%; + flex: 100%; + } +} + +/*################################*\ + xmeter | _h-Block.less +\*################################*/ +.h-Block { + display: block; + line-height: inherit; +} +@media screen { + .h-Block-s { + display: block; + line-height: inherit; + } +} +@media print { + .h-Block-p { + display: block; + line-height: inherit; + } +} +@media screen and (min-width: 30em) { + .h-Block-sK { + display: block; + line-height: inherit; + } +} +@media screen and (min-width: 45em) { + .h-Block-sM { + display: block; + line-height: inherit; + } +} +@media screen and (min-width: 60em) { + .h-Block-sG { + display: block; + line-height: inherit; + } +} +@media screen and (min-width: 75em) { + .h-Block-sT { + display: block; + line-height: inherit; + } +} +@media screen and (min-width: 90em) { + .h-Block-sP { + display: block; + line-height: inherit; + } +} + +/*################################*\ + xmeter | _h-Inline.less +\*################################*/ +.h-Inline { + display: inline; + line-height: 0; +} +@media screen { + .h-Inline-s { + display: inline; + line-height: 0; + } +} +@media print { + .h-Inline-p { + display: inline; + line-height: 0; + } +} +@media screen and (min-width: 30em) { + .h-Inline-sK { + display: inline; + line-height: 0; + } +} +@media screen and (min-width: 45em) { + .h-Inline-sM { + display: inline; + line-height: 0; + } +} +@media screen and (min-width: 60em) { + .h-Inline-sG { + display: inline; + line-height: 0; + } +} +@media screen and (min-width: 75em) { + .h-Inline-sT { + display: inline; + line-height: 0; + } +} +@media screen and (min-width: 90em) { + .h-Inline-sP { + display: inline; + line-height: 0; + } +} + +/*################################*\ + xmeter | _h-Clearfix.less +\*################################*/ +.h-Clearfix::after { + content: ''; + display: block; + clear: both; +} +@media screen { + .h-Clearfix-s::after { + content: ''; + display: block; + clear: both; + } +} +@media print { + .h-Clearfix-p::after { + content: ''; + display: block; + clear: both; + } +} +@media screen and (min-width: 30em) { + .h-Clearfix-sK::after { + content: ''; + display: block; + clear: both; + } +} +@media screen and (min-width: 45em) { + .h-Clearfix-sM::after { + content: ''; + display: block; + clear: both; + } +} +@media screen and (min-width: 60em) { + .h-Clearfix-sG::after { + content: ''; + display: block; + clear: both; + } +} +@media screen and (min-width: 75em) { + .h-Clearfix-sT::after { + content: ''; + display: block; + clear: both; + } +} +@media screen and (min-width: 90em) { + .h-Clearfix-sP::after { + content: ''; + display: block; + clear: both; + } +} + +/*################################*\ + xmeter | _atom.less +\*################################*/ +.-mb-1vru { + margin-bottom: 1.5rem; +} +@media screen { + .-mb-1vru-s { + margin-bottom: 1.5rem; + } +} +@media print { + .-mb-1vru-p { + margin-bottom: 1.5rem; + } +} +@media screen and (min-width: 30em) { + .-mb-1vru-sK { + margin-bottom: 1.5rem; + } +} +@media screen and (min-width: 45em) { + .-mb-1vru-sM { + margin-bottom: 1.5rem; + } +} +@media screen and (min-width: 60em) { + .-mb-1vru-sG { + margin-bottom: 1.5rem; + } +} +@media screen and (min-width: 75em) { + .-mb-1vru-sT { + margin-bottom: 1.5rem; + } +} +@media screen and (min-width: 90em) { + .-mb-1vru-sP { + margin-bottom: 1.5rem; + } +} +.-pt-1vru { + padding-top: 1.5rem; +} +@media screen { + .-pt-1vru-s { + padding-top: 1.5rem; + } +} +@media print { + .-pt-1vru-p { + padding-top: 1.5rem; + } +} +@media screen and (min-width: 30em) { + .-pt-1vru-sK { + padding-top: 1.5rem; + } +} +@media screen and (min-width: 45em) { + .-pt-1vru-sM { + padding-top: 1.5rem; + } +} +@media screen and (min-width: 60em) { + .-pt-1vru-sG { + padding-top: 1.5rem; + } +} +@media screen and (min-width: 75em) { + .-pt-1vru-sT { + padding-top: 1.5rem; + } +} +@media screen and (min-width: 90em) { + .-pt-1vru-sP { + padding-top: 1.5rem; + } +} +.-fz-micr { + font-size: 0.5em; +} +.-fz-mill { + font-size: 0.75em; +} +.-fz-norm { + font-size: 1em; +} +.-fz-kilo { + font-size: 1.5em; +} +.-fz-mega { + font-size: 2em; +} +.-fz-giga { + font-size: 3em; +} +.-fz-tera { + font-size: 4em; +} +.-fz-peta { + font-size: 6em; +} +@media screen { + .-fz-micr-s { + font-size: 0.5em; + } + .-fz-mill-s { + font-size: 0.75em; + } + .-fz-norm-s { + font-size: 1em; + } + .-fz-kilo-s { + font-size: 1.5em; + } + .-fz-mega-s { + font-size: 2em; + } + .-fz-giga-s { + font-size: 3em; + } + .-fz-tera-s { + font-size: 4em; + } + .-fz-peta-s { + font-size: 6em; + } +} +@media print { + .-fz-micr-p { + font-size: 0.5em; + } + .-fz-mill-p { + font-size: 0.75em; + } + .-fz-norm-p { + font-size: 1em; + } + .-fz-kilo-p { + font-size: 1.5em; + } + .-fz-mega-p { + font-size: 2em; + } + .-fz-giga-p { + font-size: 3em; + } + .-fz-tera-p { + font-size: 4em; + } + .-fz-peta-p { + font-size: 6em; + } +} +@media screen and (min-width: 30em) { + .-fz-micr-sK { + font-size: 0.5em; + } + .-fz-mill-sK { + font-size: 0.75em; + } + .-fz-norm-sK { + font-size: 1em; + } + .-fz-kilo-sK { + font-size: 1.5em; + } + .-fz-mega-sK { + font-size: 2em; + } + .-fz-giga-sK { + font-size: 3em; + } + .-fz-tera-sK { + font-size: 4em; + } + .-fz-peta-sK { + font-size: 6em; + } +} +@media screen and (min-width: 45em) { + .-fz-micr-sM { + font-size: 0.5em; + } + .-fz-mill-sM { + font-size: 0.75em; + } + .-fz-norm-sM { + font-size: 1em; + } + .-fz-kilo-sM { + font-size: 1.5em; + } + .-fz-mega-sM { + font-size: 2em; + } + .-fz-giga-sM { + font-size: 3em; + } + .-fz-tera-sM { + font-size: 4em; + } + .-fz-peta-sM { + font-size: 6em; + } +} +@media screen and (min-width: 60em) { + .-fz-micr-sG { + font-size: 0.5em; + } + .-fz-mill-sG { + font-size: 0.75em; + } + .-fz-norm-sG { + font-size: 1em; + } + .-fz-kilo-sG { + font-size: 1.5em; + } + .-fz-mega-sG { + font-size: 2em; + } + .-fz-giga-sG { + font-size: 3em; + } + .-fz-tera-sG { + font-size: 4em; + } + .-fz-peta-sG { + font-size: 6em; + } +} +@media screen and (min-width: 75em) { + .-fz-micr-sT { + font-size: 0.5em; + } + .-fz-mill-sT { + font-size: 0.75em; + } + .-fz-norm-sT { + font-size: 1em; + } + .-fz-kilo-sT { + font-size: 1.5em; + } + .-fz-mega-sT { + font-size: 2em; + } + .-fz-giga-sT { + font-size: 3em; + } + .-fz-tera-sT { + font-size: 4em; + } + .-fz-peta-sT { + font-size: 6em; + } +} +@media screen and (min-width: 90em) { + .-fz-micr-sP { + font-size: 0.5em; + } + .-fz-mill-sP { + font-size: 0.75em; + } + .-fz-norm-sP { + font-size: 1em; + } + .-fz-kilo-sP { + font-size: 1.5em; + } + .-fz-mega-sP { + font-size: 2em; + } + .-fz-giga-sP { + font-size: 3em; + } + .-fz-tera-sP { + font-size: 4em; + } + .-fz-peta-sP { + font-size: 6em; + } +} +.-fz-el-micr { + font-size: 0.5em; + line-height: 3; +} +.-fz-el-mill { + font-size: 0.75em; + line-height: 2; +} +.-fz-el-norm { + font-size: 1em; + line-height: 1.5; +} +.-fz-el-kilo { + font-size: 1.5em; + line-height: 1; +} +.-fz-el-mega { + font-size: 2em; + line-height: 0.75; +} +.-fz-el-giga { + font-size: 3em; + line-height: 0.5; +} +.-fz-el-tera { + font-size: 4em; + line-height: 0.375; +} +.-fz-el-peta { + font-size: 6em; + line-height: 0.25; +} +@media screen { + .-fz-el-micr-s { + font-size: 0.5em; + line-height: 3; + } + .-fz-el-mill-s { + font-size: 0.75em; + line-height: 2; + } + .-fz-el-norm-s { + font-size: 1em; + line-height: 1.5; + } + .-fz-el-kilo-s { + font-size: 1.5em; + line-height: 1; + } + .-fz-el-mega-s { + font-size: 2em; + line-height: 0.75; + } + .-fz-el-giga-s { + font-size: 3em; + line-height: 0.5; + } + .-fz-el-tera-s { + font-size: 4em; + line-height: 0.375; + } + .-fz-el-peta-s { + font-size: 6em; + line-height: 0.25; + } +} +@media print { + .-fz-el-micr-p { + font-size: 0.5em; + line-height: 3; + } + .-fz-el-mill-p { + font-size: 0.75em; + line-height: 2; + } + .-fz-el-norm-p { + font-size: 1em; + line-height: 1.5; + } + .-fz-el-kilo-p { + font-size: 1.5em; + line-height: 1; + } + .-fz-el-mega-p { + font-size: 2em; + line-height: 0.75; + } + .-fz-el-giga-p { + font-size: 3em; + line-height: 0.5; + } + .-fz-el-tera-p { + font-size: 4em; + line-height: 0.375; + } + .-fz-el-peta-p { + font-size: 6em; + line-height: 0.25; + } +} +@media screen and (min-width: 30em) { + .-fz-el-micr-sK { + font-size: 0.5em; + line-height: 3; + } + .-fz-el-mill-sK { + font-size: 0.75em; + line-height: 2; + } + .-fz-el-norm-sK { + font-size: 1em; + line-height: 1.5; + } + .-fz-el-kilo-sK { + font-size: 1.5em; + line-height: 1; + } + .-fz-el-mega-sK { + font-size: 2em; + line-height: 0.75; + } + .-fz-el-giga-sK { + font-size: 3em; + line-height: 0.5; + } + .-fz-el-tera-sK { + font-size: 4em; + line-height: 0.375; + } + .-fz-el-peta-sK { + font-size: 6em; + line-height: 0.25; + } +} +@media screen and (min-width: 45em) { + .-fz-el-micr-sM { + font-size: 0.5em; + line-height: 3; + } + .-fz-el-mill-sM { + font-size: 0.75em; + line-height: 2; + } + .-fz-el-norm-sM { + font-size: 1em; + line-height: 1.5; + } + .-fz-el-kilo-sM { + font-size: 1.5em; + line-height: 1; + } + .-fz-el-mega-sM { + font-size: 2em; + line-height: 0.75; + } + .-fz-el-giga-sM { + font-size: 3em; + line-height: 0.5; + } + .-fz-el-tera-sM { + font-size: 4em; + line-height: 0.375; + } + .-fz-el-peta-sM { + font-size: 6em; + line-height: 0.25; + } +} +@media screen and (min-width: 60em) { + .-fz-el-micr-sG { + font-size: 0.5em; + line-height: 3; + } + .-fz-el-mill-sG { + font-size: 0.75em; + line-height: 2; + } + .-fz-el-norm-sG { + font-size: 1em; + line-height: 1.5; + } + .-fz-el-kilo-sG { + font-size: 1.5em; + line-height: 1; + } + .-fz-el-mega-sG { + font-size: 2em; + line-height: 0.75; + } + .-fz-el-giga-sG { + font-size: 3em; + line-height: 0.5; + } + .-fz-el-tera-sG { + font-size: 4em; + line-height: 0.375; + } + .-fz-el-peta-sG { + font-size: 6em; + line-height: 0.25; + } +} +@media screen and (min-width: 75em) { + .-fz-el-micr-sT { + font-size: 0.5em; + line-height: 3; + } + .-fz-el-mill-sT { + font-size: 0.75em; + line-height: 2; + } + .-fz-el-norm-sT { + font-size: 1em; + line-height: 1.5; + } + .-fz-el-kilo-sT { + font-size: 1.5em; + line-height: 1; + } + .-fz-el-mega-sT { + font-size: 2em; + line-height: 0.75; + } + .-fz-el-giga-sT { + font-size: 3em; + line-height: 0.5; + } + .-fz-el-tera-sT { + font-size: 4em; + line-height: 0.375; + } + .-fz-el-peta-sT { + font-size: 6em; + line-height: 0.25; + } +} +@media screen and (min-width: 90em) { + .-fz-el-micr-sP { + font-size: 0.5em; + line-height: 3; + } + .-fz-el-mill-sP { + font-size: 0.75em; + line-height: 2; + } + .-fz-el-norm-sP { + font-size: 1em; + line-height: 1.5; + } + .-fz-el-kilo-sP { + font-size: 1.5em; + line-height: 1; + } + .-fz-el-mega-sP { + font-size: 2em; + line-height: 0.75; + } + .-fz-el-giga-sP { + font-size: 3em; + line-height: 0.5; + } + .-fz-el-tera-sP { + font-size: 4em; + line-height: 0.375; + } + .-fz-el-peta-sP { + font-size: 6em; + line-height: 0.25; + } +} + diff --git a/xmeter.min.css b/xmeter.min.css new file mode 100644 index 0000000..60e97ac --- /dev/null +++ b/xmeter.min.css @@ -0,0 +1 @@ +body,mark{color:#000}a,abbr[title],del,ins,s,u{text-decoration:none}progress,sub,sup{vertical-align:baseline}audio:not([controls]),hr{height:0;display:none}[hidden],hr,template{display:none}button,hr,input{overflow:visible}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend,ol,td,th,ul{padding:0}body,pre,table{text-align:left}caption,th{text-align:center}img,legend,table{max-width:100%}pre,textarea{overflow:auto}.o-List,ol,ul{list-style:none}body{background:#fff}blockquote,body,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,ul{margin:0}address,b,cite,code,dfn,em,h1,h2,h3,h4,h5,h6,i,kbd,pre,samp,small,strong,sub,sup,th,var{font:inherit}mark{background:#ff0}ol,ul{padding:0 0 0 4rem}/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#00e}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;cursor:help}h1{margin:.67em 0}sub,sup{line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace}figure{margin:0 0 1em}hr{box-sizing:content-box}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px}legend{color:inherit;display:table;white-space:normal}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}h4,html{line-height:1.5}b,dfn,h1,h2,h3,h4,h5,h6,strong,th{font-weight:700}*,::after,::before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:0 solid;content:' ';content:'';content:none}html{font-size:100%;font-size:16px}blockquote,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,ol,p,pre,table,ul{margin-bottom:1.5rem}h1{padding-top:1.5rem;font-size:3em;line-height:.5;margin-top:0}abbr,b,br,cite,code,data,dfn,em,i,kbd,mark,q,s,samp,small,span,strong,sub,sup,time,u,var{line-height:0}a,del,ins{display:contents}h2{font-size:2em;line-height:.75}h3{font-size:1.5em;line-height:1}h4{font-size:1em}h5,input:not([type=button]):not([type=reset]):not([type=submit]),textarea{font-size:.75em;line-height:2}h6{font-size:.5em;line-height:3}code,kbd,pre,samp,small,sub,sup{font-size:.75em}pre{line-height:2;text-indent:0;white-space:pre}dd>dl,dd>ol,dd>ul,dt>dl,dt>ol,dt>ul,li>dl,li>ol,li>ul{margin-bottom:0}dd>ol,dd>ul,dt>ol,dt>ul,li>ol,li>ul{padding-left:2rem}ol{list-style-type:decimal}ul{list-style-type:disc}table{border-collapse:collapse}tfoot,thead{vertical-align:bottom}tbody{vertical-align:top}cite,em,i,var{font-style:italic}u{text-decoration:underline;color:#080}s{text-decoration:line-through;color:#b00}ins{background:#a6f3a6}del{background:#f8cbcb}dfn{font-style:inherit}q{quotes:'\201c' '\201d';quotes:initial}q::before{content:open-quote}q::after{content:close-quote}code,kbd,samp{white-space:nowrap}code code,code kbd,code samp,kbd code,kbd kbd,kbd samp,samp code,samp kbd,samp samp{font-size:inherit}img{border-style:none;width:auto;height:auto;font-style:italic;vertical-align:middle}button,fieldset,input,select,textarea{border-width:1px;margin-top:-2px;border-style:solid;border-color:silver;border-color:rgba(0,0,0,.25)}fieldset{padding:0 1rem;margin-left:0;margin-right:0}button,input,select,textarea{padding:0 .25rem}textarea{width:30rem;height:9rem;line-height:1.5}.h-Block,.o-Flex,.o-Grid{line-height:inherit}button,input[type=button],input[type=reset],input[type=submit]{background-color:silver;background-color:rgba(0,0,0,.25)}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.o-List{padding-left:0}.o-Flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}@media screen{a:not([href]){opacity:.5}.o-List-s{padding-left:0;list-style:none}.o-Flex-s{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-s{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media print{*,::after,::before{background:0 0!important;box-shadow:none!important;text-shadow:none!important}.o-List-p{padding-left:0;list-style:none}.o-Flex-p{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-p{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media screen and (min-width:30em){.o-List-sK{padding-left:0;list-style:none}.o-Flex-sK{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sK{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media screen and (min-width:45em){.o-List-sM{padding-left:0;list-style:none}.o-Flex-sM{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sM{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media screen and (min-width:60em){.o-List-sG{padding-left:0;list-style:none}.o-Flex-sG{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sG{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media screen and (min-width:75em){.o-List-sT{padding-left:0;list-style:none}.o-Flex-sT{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sT{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media screen and (min-width:90em){.o-List-sP{padding-left:0;list-style:none}.o-Flex-sP{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sP{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}.o-Grid{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}@media screen{.o-Grid-s{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-s{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media print{.o-Grid-p{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-p{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:30em){.o-Grid-sK{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sK{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:45em){.o-Grid-sM{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sM{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:60em){.o-Grid-sG{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sG{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:75em){.o-Grid-sT{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sT{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:90em){.o-Grid-sP{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sP{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}.h-Block-sP{display:block;line-height:inherit}}.h-Block{display:block}@media screen{.h-Block-s{display:block;line-height:inherit}}@media print{.h-Block-p{display:block;line-height:inherit}}@media screen and (min-width:30em){.h-Block-sK{display:block;line-height:inherit}}@media screen and (min-width:45em){.h-Block-sM{display:block;line-height:inherit}}@media screen and (min-width:60em){.h-Block-sG{display:block;line-height:inherit}}@media screen and (min-width:75em){.h-Block-sT{display:block;line-height:inherit}.h-Inline-sT{display:inline;line-height:0}}.h-Inline{display:inline;line-height:0}@media screen{.h-Inline-s{display:inline;line-height:0}}@media print{.h-Inline-p{display:inline;line-height:0}}@media screen and (min-width:30em){.h-Inline-sK{display:inline;line-height:0}}@media screen and (min-width:45em){.h-Inline-sM{display:inline;line-height:0}}@media screen and (min-width:60em){.h-Inline-sG{display:inline;line-height:0}}@media screen and (min-width:90em){.h-Inline-sP{display:inline;line-height:0}.h-Clearfix-sP::after{content:'';display:block;clear:both}}.h-Clearfix::after{content:'';display:block;clear:both}.-mb-1vru{margin-bottom:1.5rem}.-pt-1vru{padding-top:1.5rem}.-fz-micr{font-size:.5em}.-fz-mill{font-size:.75em}.-fz-norm{font-size:1em}.-fz-kilo{font-size:1.5em}.-fz-mega{font-size:2em}.-fz-giga{font-size:3em}.-fz-tera{font-size:4em}.-fz-peta{font-size:6em}@media screen{.h-Clearfix-s::after{content:'';display:block;clear:both}.-mb-1vru-s{margin-bottom:1.5rem}.-pt-1vru-s{padding-top:1.5rem}.-fz-micr-s{font-size:.5em}.-fz-mill-s{font-size:.75em}.-fz-norm-s{font-size:1em}.-fz-kilo-s{font-size:1.5em}.-fz-mega-s{font-size:2em}.-fz-giga-s{font-size:3em}.-fz-tera-s{font-size:4em}.-fz-peta-s{font-size:6em}}@media print{.h-Clearfix-p::after{content:'';display:block;clear:both}.-mb-1vru-p{margin-bottom:1.5rem}.-pt-1vru-p{padding-top:1.5rem}.-fz-micr-p{font-size:.5em}.-fz-mill-p{font-size:.75em}.-fz-norm-p{font-size:1em}.-fz-kilo-p{font-size:1.5em}.-fz-mega-p{font-size:2em}.-fz-giga-p{font-size:3em}.-fz-tera-p{font-size:4em}.-fz-peta-p{font-size:6em}}@media screen and (min-width:30em){.h-Clearfix-sK::after{content:'';display:block;clear:both}.-mb-1vru-sK{margin-bottom:1.5rem}.-pt-1vru-sK{padding-top:1.5rem}.-fz-micr-sK{font-size:.5em}.-fz-mill-sK{font-size:.75em}.-fz-norm-sK{font-size:1em}.-fz-kilo-sK{font-size:1.5em}.-fz-mega-sK{font-size:2em}.-fz-giga-sK{font-size:3em}.-fz-tera-sK{font-size:4em}.-fz-peta-sK{font-size:6em}}@media screen and (min-width:45em){.h-Clearfix-sM::after{content:'';display:block;clear:both}.-mb-1vru-sM{margin-bottom:1.5rem}.-pt-1vru-sM{padding-top:1.5rem}.-fz-micr-sM{font-size:.5em}.-fz-mill-sM{font-size:.75em}.-fz-norm-sM{font-size:1em}.-fz-kilo-sM{font-size:1.5em}.-fz-mega-sM{font-size:2em}.-fz-giga-sM{font-size:3em}.-fz-tera-sM{font-size:4em}.-fz-peta-sM{font-size:6em}}@media screen and (min-width:60em){.h-Clearfix-sG::after{content:'';display:block;clear:both}.-mb-1vru-sG{margin-bottom:1.5rem}.-pt-1vru-sG{padding-top:1.5rem}.-fz-micr-sG{font-size:.5em}.-fz-mill-sG{font-size:.75em}.-fz-norm-sG{font-size:1em}.-fz-kilo-sG{font-size:1.5em}.-fz-mega-sG{font-size:2em}.-fz-giga-sG{font-size:3em}.-fz-tera-sG{font-size:4em}.-fz-peta-sG{font-size:6em}}@media screen and (min-width:75em){.h-Clearfix-sT::after{content:'';display:block;clear:both}.-mb-1vru-sT{margin-bottom:1.5rem}.-pt-1vru-sT{padding-top:1.5rem}.-fz-micr-sT{font-size:.5em}.-fz-mill-sT{font-size:.75em}.-fz-norm-sT{font-size:1em}.-fz-kilo-sT{font-size:1.5em}.-fz-mega-sT{font-size:2em}.-fz-giga-sT{font-size:3em}.-fz-tera-sT{font-size:4em}.-fz-peta-sT{font-size:6em}}@media screen and (min-width:90em){.-mb-1vru-sP{margin-bottom:1.5rem}.-pt-1vru-sP{padding-top:1.5rem}.-fz-micr-sP{font-size:.5em}.-fz-mill-sP{font-size:.75em}.-fz-norm-sP{font-size:1em}.-fz-kilo-sP{font-size:1.5em}.-fz-mega-sP{font-size:2em}.-fz-giga-sP{font-size:3em}.-fz-tera-sP{font-size:4em}.-fz-peta-sP{font-size:6em}}.-fz-el-micr{font-size:.5em;line-height:3}.-fz-el-mill{font-size:.75em;line-height:2}.-fz-el-norm{font-size:1em;line-height:1.5}.-fz-el-kilo{font-size:1.5em;line-height:1}.-fz-el-mega{font-size:2em;line-height:.75}.-fz-el-giga{font-size:3em;line-height:.5}.-fz-el-tera{font-size:4em;line-height:.375}.-fz-el-peta{font-size:6em;line-height:.25}@media screen{.-fz-el-micr-s{font-size:.5em;line-height:3}.-fz-el-mill-s{font-size:.75em;line-height:2}.-fz-el-norm-s{font-size:1em;line-height:1.5}.-fz-el-kilo-s{font-size:1.5em;line-height:1}.-fz-el-mega-s{font-size:2em;line-height:.75}.-fz-el-giga-s{font-size:3em;line-height:.5}.-fz-el-tera-s{font-size:4em;line-height:.375}.-fz-el-peta-s{font-size:6em;line-height:.25}}@media print{.-fz-el-micr-p{font-size:.5em;line-height:3}.-fz-el-mill-p{font-size:.75em;line-height:2}.-fz-el-norm-p{font-size:1em;line-height:1.5}.-fz-el-kilo-p{font-size:1.5em;line-height:1}.-fz-el-mega-p{font-size:2em;line-height:.75}.-fz-el-giga-p{font-size:3em;line-height:.5}.-fz-el-tera-p{font-size:4em;line-height:.375}.-fz-el-peta-p{font-size:6em;line-height:.25}}@media screen and (min-width:30em){.-fz-el-micr-sK{font-size:.5em;line-height:3}.-fz-el-mill-sK{font-size:.75em;line-height:2}.-fz-el-norm-sK{font-size:1em;line-height:1.5}.-fz-el-kilo-sK{font-size:1.5em;line-height:1}.-fz-el-mega-sK{font-size:2em;line-height:.75}.-fz-el-giga-sK{font-size:3em;line-height:.5}.-fz-el-tera-sK{font-size:4em;line-height:.375}.-fz-el-peta-sK{font-size:6em;line-height:.25}}@media screen and (min-width:45em){.-fz-el-micr-sM{font-size:.5em;line-height:3}.-fz-el-mill-sM{font-size:.75em;line-height:2}.-fz-el-norm-sM{font-size:1em;line-height:1.5}.-fz-el-kilo-sM{font-size:1.5em;line-height:1}.-fz-el-mega-sM{font-size:2em;line-height:.75}.-fz-el-giga-sM{font-size:3em;line-height:.5}.-fz-el-tera-sM{font-size:4em;line-height:.375}.-fz-el-peta-sM{font-size:6em;line-height:.25}}@media screen and (min-width:60em){.-fz-el-micr-sG{font-size:.5em;line-height:3}.-fz-el-mill-sG{font-size:.75em;line-height:2}.-fz-el-norm-sG{font-size:1em;line-height:1.5}.-fz-el-kilo-sG{font-size:1.5em;line-height:1}.-fz-el-mega-sG{font-size:2em;line-height:.75}.-fz-el-giga-sG{font-size:3em;line-height:.5}.-fz-el-tera-sG{font-size:4em;line-height:.375}.-fz-el-peta-sG{font-size:6em;line-height:.25}}@media screen and (min-width:75em){.-fz-el-micr-sT{font-size:.5em;line-height:3}.-fz-el-mill-sT{font-size:.75em;line-height:2}.-fz-el-norm-sT{font-size:1em;line-height:1.5}.-fz-el-kilo-sT{font-size:1.5em;line-height:1}.-fz-el-mega-sT{font-size:2em;line-height:.75}.-fz-el-giga-sT{font-size:3em;line-height:.5}.-fz-el-tera-sT{font-size:4em;line-height:.375}.-fz-el-peta-sT{font-size:6em;line-height:.25}}@media screen and (min-width:90em){.-fz-el-micr-sP{font-size:.5em;line-height:3}.-fz-el-mill-sP{font-size:.75em;line-height:2}.-fz-el-norm-sP{font-size:1em;line-height:1.5}.-fz-el-kilo-sP{font-size:1.5em;line-height:1}.-fz-el-mega-sP{font-size:2em;line-height:.75}.-fz-el-giga-sP{font-size:3em;line-height:.5}.-fz-el-tera-sP{font-size:4em;line-height:.375}.-fz-el-peta-sP{font-size:6em;line-height:.25}} \ No newline at end of file From 3cb19e9fe7fa184137d1b6e3325ac8927eacb208 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Tue, 30 Aug 2016 13:43:03 -0400 Subject: [PATCH 38/53] update Page and Styleguide --- docs/_classes/Page.class.js | 76 +++++++++++++++---------------- docs/_classes/Styleguide.class.js | 58 ++++++++++++----------- docs/_classes/Xmeter.class.js | 34 +++++++------- docs/_docs.tpl.jade | 6 +-- docs/atom.jade | 8 ++-- docs/base.jade | 2 +- docs/help.jade | 8 ++-- docs/includes/_data.jade | 4 +- docs/obj.jade | 8 ++-- 9 files changed, 104 insertions(+), 100 deletions(-) diff --git a/docs/_classes/Page.class.js b/docs/_classes/Page.class.js index 36cb500..39a50ab 100644 --- a/docs/_classes/Page.class.js +++ b/docs/_classes/Page.class.js @@ -3,8 +3,8 @@ var Page = (function () { function Page($pageinfo) { var self = this $pageinfo = $pageinfo || {} // NOTE constructor overloading - self.name = $pageinfo.name - self.url = $pageinfo.url + self._name = $pageinfo.name + self._url = $pageinfo.url self.title = '' self.description = '' self.keywords = null @@ -12,7 +12,18 @@ var Page = (function () { self.pages = [] } - // SETTER FUNCTIONS + // ACCESSOR FUNCTIONS + Page.prototype.getName = function getName() { + return this._name + } + + Page.prototype.getURL = function getURL() { + return this._url + } + + Page.prototype.getTitle = function getTitle() { + return this.title + } Page.prototype.setTitle = function setTitle(arg) { var text if (typeof arg === 'function') { @@ -23,6 +34,10 @@ var Page = (function () { this.title = text return this } + + Page.prototype.getDescription = function getDescription() { + return this.description + } Page.prototype.setDescription = function setDescription(arg) { var text if (typeof arg === 'function') { @@ -33,6 +48,10 @@ var Page = (function () { this.description = text return this } + + Page.prototype.getKeywords = function getKeywords() { + return this.keywords.slice() + } Page.prototype.setKeywords = function setKeywords(arg) { var arr if (typeof arg === 'function') { @@ -43,16 +62,22 @@ var Page = (function () { this.keywords = arr return this } + + Page.prototype.isHidden = function isHidden() { + return this.is_hidden + } Page.prototype.hide = function hide(bool) { // NOTE method overloading // param defaults to true this.is_hidden = (bool === undefined) ? true : bool return this } - Page.prototype.addPage = function addPage($page) { + + // METHODS + Page.prototype.add = function add($page) { this.pages.push($page) return this } - Page.prototype.removePage = function removePage(arg) { + Page.prototype.remove = function remove(arg) { var page if (typeof arg === 'function') { page = arg.call(this) @@ -65,45 +90,20 @@ var Page = (function () { if (index >= 0) this.pages.splice(index, 1) return this } - Page.prototype.removeAllPages = function removeAllPages() { + Page.prototype.removeAll = function removeAll() { this.pages = [] return this } - - // GETTER FUNCTIONS - Page.prototype.getName = function getName() { - return this.name - } - Page.prototype.getURL = function getURL() { - return this.url - } - Page.prototype.getTitle = function getTitle() { - return this.title - } - Page.prototype.getDescription = function getDescription() { - return this.description - } - Page.prototype.getKeywords = function getKeywords() { - return this.keywords.slice() - } - Page.prototype.isHidden = function isHidden() { - return this.is_hidden - } - Page.prototype.getPage = function getPage(url) { - return this.pages.find(function (item) { return item.url === url }) || null - } - Page.prototype.getPagesAll = function getPagesAll() { - return this.pages.slice() - } - - // METHODS - Page.prototype.findPage = function findPage(url) { - return this.getPage(url) + Page.prototype.find = function find(url) { + return this.pages.find(function (item) { return item._url === url }) || (function (self) { - var ancestor = self.pages.find(function (item) { return item.findPage(url) }) - return (ancestor) ? ancestor.findPage(url) : null + var ancestor = self.pages.find(function (item) { return item.find(url) }) + return (ancestor) ? ancestor.find(url) : null })(this) } + Page.prototype.findAll = function findAll() { + return this.pages.slice() + } // STATIC MEMBERS diff --git a/docs/_classes/Styleguide.class.js b/docs/_classes/Styleguide.class.js index cb54810..79928dc 100644 --- a/docs/_classes/Styleguide.class.js +++ b/docs/_classes/Styleguide.class.js @@ -3,50 +3,54 @@ // TODO change classname to `StyleGuide` var Styleguide = (function () { // CONSTRUCTOR - function Styleguide(name, url) { + function StyleGuide(name, url) { var self = this Page.call(self, { name: name, url: url }) - self.was_initialized = false + self._was_initialized = false } - Styleguide.prototype = Object.create(Page.prototype) - Styleguide.prototype.constructor = Styleguide + StyleGuide.prototype = Object.create(Page.prototype) + StyleGuide.prototype.constructor = StyleGuide + + // ACCESSOR FUNCTIONS // METHODS - Styleguide.prototype.init = function init() { + StyleGuide.prototype.init = function init() { var self = this - if (!self.was_initialized) { - self.was_initialized = true + if (!self._was_initialized) { + self._was_initialized = true return self - .addPage(new Page({ name: self.name, url: 'index.html' })) - .addPage(new Page({ name: 'Visual Design', url: 'visual.html' }) + .add(new Page({ name: self.getName(), url: 'index.html' }) + .setDescription(self.getDescription()) + ) + .add(new Page({ name: 'Visual Design', url: 'visual.html' }) .setDescription('Color and font schemes, look-and-feel, overall voice and tone.') ) - .addPage(new Page({ name: 'Base Typography', url: 'base.html' }) + .add(new Page({ name: 'Base Typography', url: 'base.html' }) .setDescription('Bare, unstyled HTML elements. No classes.') - .addPage(new Page({ name: 'Table of Contents' , url: 'base.html#table-contents' })) - .addPage(new Page({ name: 'Headings & Paragraphs', url: 'base.html#headings-paragraphs' })) - .addPage(new Page({ name: 'Lists' , url: 'base.html#lists' })) - .addPage(new Page({ name: 'Tables' , url: 'base.html#tables' })) - .addPage(new Page({ name: 'Text-Level Elements' , url: 'base.html#text-level-elements' }) - .addPage(new Page({ name: 'Links' , url: 'base.html#links' })) - .addPage(new Page({ name: 'Stress' , url: 'base.html#stress' })) - .addPage(new Page({ name: 'Documentation', url: 'base.html#documentation' })) - .addPage(new Page({ name: 'Data' , url: 'base.html#data' })) + .add(new Page({ name: 'Table of Contents' , url: 'base.html#table-contents' })) + .add(new Page({ name: 'Headings & Paragraphs', url: 'base.html#headings-paragraphs' })) + .add(new Page({ name: 'Lists' , url: 'base.html#lists' })) + .add(new Page({ name: 'Tables' , url: 'base.html#tables' })) + .add(new Page({ name: 'Text-Level Elements' , url: 'base.html#text-level-elements' }) + .add(new Page({ name: 'Links' , url: 'base.html#links' })) + .add(new Page({ name: 'Stress' , url: 'base.html#stress' })) + .add(new Page({ name: 'Documentation', url: 'base.html#documentation' })) + .add(new Page({ name: 'Data' , url: 'base.html#data' })) ) - .addPage(new Page({ name: 'Embedded Elements' , url: 'base.html#embedded-elements' })) - .addPage(new Page({ name: 'Forms' , url: 'base.html#forms' })) - .addPage(new Page({ name: 'Interactive Elements', url: 'base.html#interactive-elements' })) + .add(new Page({ name: 'Embedded Elements' , url: 'base.html#embedded-elements' })) + .add(new Page({ name: 'Forms' , url: 'base.html#forms' })) + .add(new Page({ name: 'Interactive Elements', url: 'base.html#interactive-elements' })) ) - .addPage(new Page({ name: 'Objects', url: 'obj.html' }) + .add(new Page({ name: 'Objects', url: 'obj.html' }) .setDescription('Patterns of structure that can be reused many times for many different purposes.') ) - .addPage(new Page({ name: 'Components', url: 'comp.html' }) + .add(new Page({ name: 'Components', url: 'comp.html' }) .setDescription('Patterns of look-and-feel that are each only used for one purpose.') ) - .addPage(new Page({ name: 'Helpers', url: 'help.html' }) + .add(new Page({ name: 'Helpers', url: 'help.html' }) .setDescription('Somewhat explicit classes used for enhancing default styles.') ) - .addPage(new Page({ name: 'Atoms', url: 'atom.html' }) + .add(new Page({ name: 'Atoms', url: 'atom.html' }) .setDescription('Very specific classes used for creating anomalies or fixing broken styles.') ) } else return @@ -54,5 +58,5 @@ var Styleguide = (function () { // STATIC MEMBERS - return Styleguide + return StyleGuide })() diff --git a/docs/_classes/Xmeter.class.js b/docs/_classes/Xmeter.class.js index 1f5f3ff..aed8b49 100644 --- a/docs/_classes/Xmeter.class.js +++ b/docs/_classes/Xmeter.class.js @@ -13,25 +13,25 @@ var Xmeter = (function () { .init() ;(function () { // adding pages to Xmeter.DOCS - Xmeter.DOCS.getPage('visual.html') + Xmeter.DOCS.find('visual.html') .hide() - Xmeter.DOCS.getPage('obj.html') - .addPage(new Page({ name: 'Table of Contents', url: 'obj.html#table-contents' })) - .addPage(new Page({ name: 'The List Object' , url: 'obj.html#list-object' })) - .addPage(new Page({ name: 'The Flex Object' , url: 'obj.html#flex-object' })) - .addPage(new Page({ name: 'The Grid Object' , url: 'obj.html#grid-object' })) - Xmeter.DOCS.getPage('comp.html') + Xmeter.DOCS.find('obj.html') + .add(new Page({ name: 'Table of Contents', url: 'obj.html#table-contents' })) + .add(new Page({ name: 'The List Object' , url: 'obj.html#list-object' })) + .add(new Page({ name: 'The Flex Object' , url: 'obj.html#flex-object' })) + .add(new Page({ name: 'The Grid Object' , url: 'obj.html#grid-object' })) + Xmeter.DOCS.find('comp.html') .hide() - Xmeter.DOCS.getPage('help.html') - .addPage(new Page({ name: 'Table of Contents', url: 'help.html#table-contents' })) - .addPage(new Page({ name: 'Block' , url: 'help.html#block' })) - .addPage(new Page({ name: 'Inline' , url: 'help.html#inline' })) - .addPage(new Page({ name: 'Clearfix' , url: 'help.html#cleafix' })) - Xmeter.DOCS.getPage('atom.html') - .addPage(new Page({ name: 'Table of Contents', url: 'atom.html#table-contents' })) - .addPage(new Page({ name: 'margin-bottom' , url: 'atom.html#margin-bottom' })) - .addPage(new Page({ name: 'padding-top' , url: 'atom.html#padding-top' })) - .addPage(new Page({ name: 'font-size' , url: 'atom.html#font-size' })) + Xmeter.DOCS.find('help.html') + .add(new Page({ name: 'Table of Contents', url: 'help.html#table-contents' })) + .add(new Page({ name: 'Block' , url: 'help.html#block' })) + .add(new Page({ name: 'Inline' , url: 'help.html#inline' })) + .add(new Page({ name: 'Clearfix' , url: 'help.html#cleafix' })) + Xmeter.DOCS.find('atom.html') + .add(new Page({ name: 'Table of Contents', url: 'atom.html#table-contents' })) + .add(new Page({ name: 'margin-bottom' , url: 'atom.html#margin-bottom' })) + .add(new Page({ name: 'padding-top' , url: 'atom.html#padding-top' })) + .add(new Page({ name: 'font-size' , url: 'atom.html#font-size' })) })() Xmeter.DOCS_CLASSES = { diff --git a/docs/_docs.tpl.jade b/docs/_docs.tpl.jade index 6d662f0..7c647f8 100644 --- a/docs/_docs.tpl.jade +++ b/docs/_docs.tpl.jade @@ -3,7 +3,7 @@ html(lang="en") include includes/_data.jade block vars head - title= page.getTitle() || (page.name + ' | ' + Xmeter.DOCS.name) + title= page.getTitle() || (page.getName() + ' | ' + Xmeter.DOCS.getName()) meta(charset="utf-8") meta(name="description" content=Xmeter.DOCS.getDescription()) meta(name="viewport" content="width=device-width, initial-scale=1") @@ -23,8 +23,8 @@ html(lang="en") nav#table-contents h2 Table of Contents block toc - +doctoc({pages: page.getPagesAll(), depth: Infinity}) + +doctoc({pages: page.findAll(), depth: Infinity}) block footer footer: nav h1 Sitemap - +doctoc({pages: Xmeter.DOCS.getPagesAll()}) + +doctoc({pages: Xmeter.DOCS.findAll()}) diff --git a/docs/atom.jade b/docs/atom.jade index d39a14d..612b157 100644 --- a/docs/atom.jade +++ b/docs/atom.jade @@ -1,15 +1,15 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.DOCS.getPage('atom.html') + - var page = Xmeter.DOCS.find('atom.html') block append main - +newSection(2, Xmeter.DOCS.findPage('atom.html#margin-bottom')) + +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.findPage('atom.html#padding-top')) + +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.findPage('atom.html#font-size')) + +newSection(2, Xmeter.DOCS.find('atom.html#font-size')) include includes/_atom.font-size.docs.jade +docs_fontSize(Xmeter.DOCS_CLASSES) diff --git a/docs/base.jade b/docs/base.jade index 5de6106..a28978d 100644 --- a/docs/base.jade +++ b/docs/base.jade @@ -1,7 +1,7 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.DOCS.getPage('base.html') + - var page = Xmeter.DOCS.find('base.html') block append main - var classname = Xmeter.DOCS_CLASSES diff --git a/docs/help.jade b/docs/help.jade index 27954cd..8e7aeb5 100644 --- a/docs/help.jade +++ b/docs/help.jade @@ -1,15 +1,15 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.DOCS.getPage('help.html') + - var page = Xmeter.DOCS.find('help.html') block append main - +newSection(2, Xmeter.DOCS.findPage('help.html#block')) + +newSection(2, Xmeter.DOCS.find('help.html#block')) include includes/_h-Block.docs.jade +docs_block(Xmeter.DOCS_CLASSES) - +newSection(2, Xmeter.DOCS.findPage('help.html#inline')) + +newSection(2, Xmeter.DOCS.find('help.html#inline')) include includes/_h-Inline.docs.jade +docs_inline(Xmeter.DOCS_CLASSES) - +newSection(2, Xmeter.DOCS.findPage('help.html#cleafix')) + +newSection(2, Xmeter.DOCS.find('help.html#cleafix')) include includes/_h-Clearfix.docs.jade +docs_clearfix(Xmeter.DOCS_CLASSES) diff --git a/docs/includes/_data.jade b/docs/includes/_data.jade index 4b1c2c8..5fad9c7 100644 --- a/docs/includes/_data.jade +++ b/docs/includes/_data.jade @@ -15,8 +15,8 @@ mixin doctoc(args) a(class=classes.linkclasses href=item.getURL())= item.getName() if item.getDescription() = ': ' + item.getDescription() - if item.getPagesAll().length && depth > 0 - +doctoc({pages: item.getPagesAll(), classes: (classes.sub || {}), depth: depth-1}) + if item.findAll().length && depth > 0 + +doctoc({pages: item.findAll(), classes: (classes.sub || {}), depth: depth-1}) mixin newSection(hn, page) - diff --git a/docs/obj.jade b/docs/obj.jade index b33ccc4..fe5649a 100644 --- a/docs/obj.jade +++ b/docs/obj.jade @@ -1,15 +1,15 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.DOCS.getPage('obj.html') + - var page = Xmeter.DOCS.find('obj.html') block append main - +newSection(2, Xmeter.DOCS.findPage('obj.html#list-object')) + +newSection(2, Xmeter.DOCS.find('obj.html#list-object')) include includes/_o-List.docs.jade +docs_list(Xmeter.DOCS_CLASSES) - +newSection(2, Xmeter.DOCS.findPage('obj.html#flex-object')) + +newSection(2, Xmeter.DOCS.find('obj.html#flex-object')) include includes/_o-Flex.docs.jade +docs_flex(Xmeter.DOCS_CLASSES) - +newSection(2, Xmeter.DOCS.findPage('obj.html#grid-object')) + +newSection(2, Xmeter.DOCS.find('obj.html#grid-object')) include includes/_o-Grid.docs.jade +docs_grid(Xmeter.DOCS_CLASSES) From 29e5a32ab748d93a16463acfd72093e38d13d552 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Tue, 30 Aug 2016 13:46:47 -0400 Subject: [PATCH 39/53] rebuild 2016-08-30T13:46 --- docs/atom.html | 2 +- docs/base.html | 2 +- docs/help.html | 2 +- docs/index.html | 2 +- docs/obj.html | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/atom.html b/docs/atom.html index 74d5fea..76b3a64 100644 --- a/docs/atom.html +++ b/docs/atom.html @@ -31,4 +31,4 @@ <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>
\ No newline at end of file +<li class="-fz-el-micr">quark (0.50/3.000)</li>
\ No newline at end of file diff --git a/docs/base.html b/docs/base.html index 4863559..5c0f910 100644 --- a/docs/base.html +++ b/docs/base.html @@ -69,4 +69,4 @@ , quis: convallis(id () { justo Quisque.elit; }) }; } -}
Aenean consectetur figure suscipit urna, non vehicula lacus blandit et.
Integer at lacus et diam tristique figure figcaption suscipit.
Donec blockquote vel dolor ut felis dapibus ultricies vitae a nibh.
A horizontal rule hr is present below.

Lists

Ordered List ol
  1. List item li
  2. List item li
    1. Nested list item
    2. Nested list item
      1. Another nested list item
      2. Another nested list item
Unrdered List ul
  • List item li
  • List item li
    • Nested list item
    • Nested list item
      • Another nested list item
      • Another nested list item
Dictionary List dl
key dt
value dd
  • 1st key
  • 2nd key
value
key
  • 1st value
  • 2nd value

Tables

table caption
theader trow 1 theading 1theader trow 1 theading 2theader trow 1 theading 3
tfooter trow 1 tdata 1tfooter trow 1 tdata 2tfooter trow 1 tdata 3
tfooter trow 2 tdata 1tfooter trow 2 tdata 2tfooter trow 2 tdata 3
tbody trow 1 tdata 1tbody trow 1 tdata 2tbody trow 1 tdata 3
tbody trow 2 tdata 1tbody trow 2 tdata 2tbody trow 2 tdata 3
tbody trow 3 tdata 1tbody trow 3 tdata 2tbody trow 3 tdata 3

Text-Level Elements

Stress

  • emphasized text em
  • important text strong
  • alternate voice/mood (scare quotes, mentioning words, foreign expressions) i
  • relevant in some context mark
  • unarticulated annotation u
  • side comment small
  • text shown to be no longer relevant s

Documentation

  • content shown to be inserted into a document ins
  • content shown to be deleted from a document del
  • definining instance of a term dfn
  • keyword or technical term b
  • abbreviation or acronym abbr[title]
  • variable var
  • quoted material q
  • reference to a work, some part of a work, or the creator of a work cite
  • superscript sup
  • subscript sub

Data

  • generic machine-readable data data
  • a fragment of code code
  • user input kbd
  • a button or key on a physical device kbd > kbd
  • sample computer output samp

Embedded Elements

Forms

Integer at lacus et diam tristique fieldset legend suscipit.Aenean consectetur fieldset suscipit urna, non vehicula lacus blandit et.
single line text inputs
date/time
without text input
check boxes
radio buttons
drop-down list (select only one)
drop-down list (select multiple)
buttons
textarea

Interactive Elements

Integer at lacus et diam tristique details summary suscipit.Aenean consectetur details suscipit urna, non vehicula lacus blandit et.
\ No newline at end of file +}
Aenean consectetur figure suscipit urna, non vehicula lacus blandit et.
Integer at lacus et diam tristique figure figcaption suscipit.
Donec blockquote vel dolor ut felis dapibus ultricies vitae a nibh.
A horizontal rule hr is present below.

Lists

Ordered List ol
  1. List item li
  2. List item li
    1. Nested list item
    2. Nested list item
      1. Another nested list item
      2. Another nested list item
Unrdered List ul
  • List item li
  • List item li
    • Nested list item
    • Nested list item
      • Another nested list item
      • Another nested list item
Dictionary List dl
key dt
value dd
  • 1st key
  • 2nd key
value
key
  • 1st value
  • 2nd value

Tables

table caption
theader trow 1 theading 1theader trow 1 theading 2theader trow 1 theading 3
tfooter trow 1 tdata 1tfooter trow 1 tdata 2tfooter trow 1 tdata 3
tfooter trow 2 tdata 1tfooter trow 2 tdata 2tfooter trow 2 tdata 3
tbody trow 1 tdata 1tbody trow 1 tdata 2tbody trow 1 tdata 3
tbody trow 2 tdata 1tbody trow 2 tdata 2tbody trow 2 tdata 3
tbody trow 3 tdata 1tbody trow 3 tdata 2tbody trow 3 tdata 3

Text-Level Elements

Stress

  • emphasized text em
  • important text strong
  • alternate voice/mood (scare quotes, mentioning words, foreign expressions) i
  • relevant in some context mark
  • unarticulated annotation u
  • side comment small
  • text shown to be no longer relevant s

Documentation

  • content shown to be inserted into a document ins
  • content shown to be deleted from a document del
  • definining instance of a term dfn
  • keyword or technical term b
  • abbreviation or acronym abbr[title]
  • variable var
  • quoted material q
  • reference to a work, some part of a work, or the creator of a work cite
  • superscript sup
  • subscript sub

Data

  • generic machine-readable data data
  • a fragment of code code
  • user input kbd
  • a button or key on a physical device kbd > kbd
  • sample computer output samp

Embedded Elements

Forms

Integer at lacus et diam tristique fieldset legend suscipit.Aenean consectetur fieldset suscipit urna, non vehicula lacus blandit et.
single line text inputs
date/time
without text input
check boxes
radio buttons
drop-down list (select only one)
drop-down list (select multiple)
buttons
textarea

Interactive Elements

Integer at lacus et diam tristique details summary suscipit.Aenean consectetur details suscipit urna, non vehicula lacus blandit et.
\ No newline at end of file diff --git a/docs/help.html b/docs/help.html index 6a6fbda..8989815 100644 --- a/docs/help.html +++ b/docs/help.html @@ -20,4 +20,4 @@ <li class="o-Inline h-Clearfix">black hole </li> <li class="o-Inline">singularity </li> <li class="o-Inline">neutron star </li> -</ul>
The Clearfix Helper creates a line break after the 2nd inline item.
\ No newline at end of file +</ul>
The Clearfix Helper creates a line break after the 2nd inline item.
\ No newline at end of file diff --git a/docs/index.html b/docs/index.html index d05b5dd..3c748dd 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1 +1 @@ -Xmeter Style Guide

Xmeter Style Guide

A demo of Xmeter styles.

\ No newline at end of file +Xmeter Style Guide

Xmeter Style Guide

A demo of Xmeter styles.

\ No newline at end of file diff --git a/docs/obj.html b/docs/obj.html index 0a3955f..0211842 100644 --- a/docs/obj.html +++ b/docs/obj.html @@ -34,4 +34,4 @@ <li class="o-List__Item o-Grid__Item">Burns & McDonnell Engineering</li> <li class="o-List__Item o-Grid__Item">DIS-TRAN Steel, LLC</li> ... -</ul>
A Grid Object with not enough space.
\ No newline at end of file +</ul>
A Grid Object with not enough space.
\ No newline at end of file From c962f5e7db26f5d28147485e35d8e1fc3c1fd147 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Sat, 13 Aug 2016 01:33:23 -0400 Subject: [PATCH 40/53] use node modules for server-side js --- docs/_classes/Page.class.js | 2 +- docs/_classes/Styleguide.class.js | 4 ++-- docs/_classes/Xmeter.class.js | 5 +++-- docs/includes/_data.jade | 6 +++--- 4 files changed, 9 insertions(+), 8 deletions(-) diff --git a/docs/_classes/Page.class.js b/docs/_classes/Page.class.js index 39a50ab..59ceddf 100644 --- a/docs/_classes/Page.class.js +++ b/docs/_classes/Page.class.js @@ -1,4 +1,4 @@ -var Page = (function () { +module.exports = (function () { // CONSTRUCTOR function Page($pageinfo) { var self = this diff --git a/docs/_classes/Styleguide.class.js b/docs/_classes/Styleguide.class.js index 79928dc..d4d67e4 100644 --- a/docs/_classes/Styleguide.class.js +++ b/docs/_classes/Styleguide.class.js @@ -1,7 +1,7 @@ -// var Page = require('./Page.class.js') +var Page = require('./Page.class.js') // TODO change classname to `StyleGuide` -var Styleguide = (function () { +module.exports = (function () { // CONSTRUCTOR function StyleGuide(name, url) { var self = this diff --git a/docs/_classes/Xmeter.class.js b/docs/_classes/Xmeter.class.js index aed8b49..cc32756 100644 --- a/docs/_classes/Xmeter.class.js +++ b/docs/_classes/Xmeter.class.js @@ -1,6 +1,7 @@ -// var Styleguide = require('../_classes/Styleguide.class.js') +var Page = require('./Page.class.js') +var Styleguide = require('./Styleguide.class.js') -var Xmeter = (function () { +module.exports = (function () { // CONSTRUCTOR function Xmeter() {} diff --git a/docs/includes/_data.jade b/docs/includes/_data.jade index 5fad9c7..4a3003a 100644 --- a/docs/includes/_data.jade +++ b/docs/includes/_data.jade @@ -1,6 +1,6 @@ -include ../_classes/Page.class.jade -include ../_classes/Styleguide.class.jade -include ../_classes/Xmeter.class.jade +//- include ../_classes/Page.class.jade +//- include ../_classes/Styleguide.class.jade +//- include ../_classes/Xmeter.class.jade mixin doctoc(args) //- NOTE parameter validation From 629dd3aba55a42ddb19f97af2ceef427586c3301 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Mon, 5 Sep 2016 11:46:22 -0400 Subject: [PATCH 41/53] replace js2pug with pug-cli --- .gitignore | 1 - options.js | 3 +++ package.json | 10 +++------- 3 files changed, 6 insertions(+), 8 deletions(-) create mode 100644 options.js diff --git a/.gitignore b/.gitignore index aabe995..d7f694f 100644 --- a/.gitignore +++ b/.gitignore @@ -31,4 +31,3 @@ node_modules # Compiled source files build/ -docs/_classes/*.jade diff --git a/options.js b/options.js new file mode 100644 index 0000000..022ee73 --- /dev/null +++ b/options.js @@ -0,0 +1,3 @@ +module.exports = { + Xmeter: require('./docs/_classes/Xmeter.class.js') +} diff --git a/package.json b/package.json index 47cb5e2..11c824d 100644 --- a/package.json +++ b/package.json @@ -7,20 +7,16 @@ "devDependencies": { "clean-css": "^3.4.17", "jade": "^1.11.0", - "js2pug": "^1.0.0", "less": "^2.7.1", "lessc-each": "^1.1.0", "normalize.css": "~4.1.1", + "pug-cli": "^1.0.0-alpha6", "resetcss": "^1.0.3" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "js2pug:page": "js2pug docs/_classes/Page.class.js && mv docs/_classes/Page.class.js.pug docs/_classes/Page.class.jade", - "js2pug:sg": "js2pug docs/_classes/Styleguide.class.js && mv docs/_classes/Styleguide.class.js.pug docs/_classes/Styleguide.class.jade", - "js2pug:xm": "js2pug docs/_classes/Xmeter.class.js && mv docs/_classes/Xmeter.class.js.pug docs/_classes/Xmeter.class.jade", - "js2pug:all": "npm run js2pug:page && npm run js2pug:sg && npm run js2pug:xm", - "jade:docs": "jade docs/{index,base,obj,help,atom}.jade", - "jade:all": "npm run js2pug:all && npm run jade:docs", + "jade:docs": "pug -O options.js docs/{index,base,obj,help,atom}.jade", + "jade:all": "npm run jade:docs", "lessc:docs": "lessc docs/styles/docs.less docs/styles/docs.css", "lessc:xmeter": "lessc-each src/ build/ && lessc xmeter.less xmeter.css", "lessc:all": "npm run lessc:docs && npm run lessc:xmeter", From 8d34144ec827eb8bfca199e6acd3f3bb824074dd Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Mon, 5 Sep 2016 11:48:32 -0400 Subject: [PATCH 42/53] add index file --- index.jade | 11 +++++++++++ package.json | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 index.jade diff --git a/index.jade b/index.jade new file mode 100644 index 0000000..1dd6cf8 --- /dev/null +++ b/index.jade @@ -0,0 +1,11 @@ +doctype html +html(lang="en") + head + title Xmeter index page + meta(charset="utf-8") + meta(name="viewport" content="width=device-width, initial-scale=1") + body + main + h1 Xmeter + p: a(href="/docs/") Go to Docs + script(src="app.js") diff --git a/package.json b/package.json index 11c824d..3368525 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "jade:docs": "pug -O options.js docs/{index,base,obj,help,atom}.jade", - "jade:all": "npm run jade:docs", + "jade:all": "jade index.jade && npm run jade:docs", "lessc:docs": "lessc docs/styles/docs.less docs/styles/docs.css", "lessc:xmeter": "lessc-each src/ build/ && lessc xmeter.less xmeter.css", "lessc:all": "npm run lessc:docs && npm run lessc:xmeter", From bf269f2ea7d74d617249c1d1cd62e2863c4fc67d Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Mon, 5 Sep 2016 15:41:46 -0400 Subject: [PATCH 43/53] move options file --- docs/models/options.js | 4 ++++ options.js | 3 --- package.json | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) create mode 100644 docs/models/options.js delete mode 100644 options.js diff --git a/docs/models/options.js b/docs/models/options.js new file mode 100644 index 0000000..a27781e --- /dev/null +++ b/docs/models/options.js @@ -0,0 +1,4 @@ +// Options and locals for compiling Pug pages. +module.exports = { + Xmeter: require('../_classes/Xmeter.class.js') +} diff --git a/options.js b/options.js deleted file mode 100644 index 022ee73..0000000 --- a/options.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - Xmeter: require('./docs/_classes/Xmeter.class.js') -} diff --git a/package.json b/package.json index 3368525..52e6854 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "jade:docs": "pug -O options.js docs/{index,base,obj,help,atom}.jade", + "jade:docs": "pug -O docs/models/options.js docs/{index,base,obj,help,atom}.jade", "jade:all": "jade index.jade && npm run jade:docs", "lessc:docs": "lessc docs/styles/docs.less docs/styles/docs.css", "lessc:xmeter": "lessc-each src/ build/ && lessc xmeter.less xmeter.css", From cb701508994262be703b423d674ae7c9df0be35a Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Mon, 5 Sep 2016 15:56:36 -0400 Subject: [PATCH 44/53] move Xmeter class file --- docs/models/classes/Xmeter.class.js | 46 +++++++++++++++++++++++++++++ docs/models/options.js | 2 +- 2 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 docs/models/classes/Xmeter.class.js diff --git a/docs/models/classes/Xmeter.class.js b/docs/models/classes/Xmeter.class.js new file mode 100644 index 0000000..e4be46c --- /dev/null +++ b/docs/models/classes/Xmeter.class.js @@ -0,0 +1,46 @@ +var Page = require('sitepage').Page +var StyleGuide = require('sitepage').StyleGuide + +module.exports = (function () { + // CONSTRUCTOR + function Xmeter() {} + + // METHODS + + // STATIC MEMBERS + Xmeter.DOCS = new StyleGuide('Xmeter', '/docs/') + .setTitle('Xmeter Style Guide') + .setDescription('A demo of Xmeter styles.') + .init() + ;(function () { + // adding pages to Xmeter.DOCS + Xmeter.DOCS.find('visual.html') + .hide() + Xmeter.DOCS.find('obj.html') + .add(new Page({ name: 'Table of Contents', url: 'obj.html#table-contents' })) + .add(new Page({ name: 'The List Object' , url: 'obj.html#list-object' })) + .add(new Page({ name: 'The Flex Object' , url: 'obj.html#flex-object' })) + .add(new Page({ name: 'The Grid Object' , url: 'obj.html#grid-object' })) + Xmeter.DOCS.find('comp.html') + .hide() + Xmeter.DOCS.find('help.html') + .add(new Page({ name: 'Table of Contents', url: 'help.html#table-contents' })) + .add(new Page({ name: 'Block' , url: 'help.html#block' })) + .add(new Page({ name: 'Inline' , url: 'help.html#inline' })) + .add(new Page({ name: 'Clearfix' , url: 'help.html#cleafix' })) + Xmeter.DOCS.find('atom.html') + .add(new Page({ name: 'Table of Contents', url: 'atom.html#table-contents' })) + .add(new Page({ name: 'margin-bottom' , url: 'atom.html#margin-bottom' })) + .add(new Page({ name: 'padding-top' , url: 'atom.html#padding-top' })) + .add(new Page({ name: 'font-size' , url: 'atom.html#font-size' })) + })() + + Xmeter.DOCS_CLASSES = { + figure : 'docs-figure' + , pre : 'docs-pre' + , code : 'docs-code' + , form : 'docs-form' + } + + return Xmeter +})() diff --git a/docs/models/options.js b/docs/models/options.js index a27781e..6e0bcc8 100644 --- a/docs/models/options.js +++ b/docs/models/options.js @@ -1,4 +1,4 @@ // Options and locals for compiling Pug pages. module.exports = { - Xmeter: require('../_classes/Xmeter.class.js') + Xmeter: require('./classes/Xmeter.class.js') } From 936547886aa3777d06e4b3a0c5f192fea518d7f4 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Mon, 5 Sep 2016 15:58:08 -0400 Subject: [PATCH 45/53] remove imported class files --- docs/_classes/Page.class.js | 111 ------------------------------ docs/_classes/Styleguide.class.js | 62 ----------------- docs/_classes/Xmeter.class.js | 46 ------------- docs/includes/_data.jade | 4 -- 4 files changed, 223 deletions(-) delete mode 100644 docs/_classes/Page.class.js delete mode 100644 docs/_classes/Styleguide.class.js delete mode 100644 docs/_classes/Xmeter.class.js diff --git a/docs/_classes/Page.class.js b/docs/_classes/Page.class.js deleted file mode 100644 index 59ceddf..0000000 --- a/docs/_classes/Page.class.js +++ /dev/null @@ -1,111 +0,0 @@ -module.exports = (function () { - // CONSTRUCTOR - function Page($pageinfo) { - var self = this - $pageinfo = $pageinfo || {} // NOTE constructor overloading - self._name = $pageinfo.name - self._url = $pageinfo.url - self.title = '' - self.description = '' - self.keywords = null - self.is_hidden = false - self.pages = [] - } - - // ACCESSOR FUNCTIONS - Page.prototype.getName = function getName() { - return this._name - } - - Page.prototype.getURL = function getURL() { - return this._url - } - - Page.prototype.getTitle = function getTitle() { - return this.title - } - Page.prototype.setTitle = function setTitle(arg) { - var text - if (typeof arg === 'function') { - text = arg.call(this) - } else { - text = arg - } - this.title = text - return this - } - - Page.prototype.getDescription = function getDescription() { - return this.description - } - Page.prototype.setDescription = function setDescription(arg) { - var text - if (typeof arg === 'function') { - text = arg.call(this) - } else { - text = arg - } - this.description = text - return this - } - - Page.prototype.getKeywords = function getKeywords() { - return this.keywords.slice() - } - Page.prototype.setKeywords = function setKeywords(arg) { - var arr - if (typeof arg === 'function') { - arr = arg.call(this) - } else { - arr = arg - } - this.keywords = arr - return this - } - - Page.prototype.isHidden = function isHidden() { - return this.is_hidden - } - Page.prototype.hide = function hide(bool) { - // NOTE method overloading // param defaults to true - this.is_hidden = (bool === undefined) ? true : bool - return this - } - - // METHODS - Page.prototype.add = function add($page) { - this.pages.push($page) - return this - } - Page.prototype.remove = function remove(arg) { - var page - if (typeof arg === 'function') { - page = arg.call(this) - } else if (typeof arg === 'string') { - page = this.getPage(arg) - } else { - page = arg - } - var index = this.pages.indexOf(page) - if (index >= 0) this.pages.splice(index, 1) - return this - } - Page.prototype.removeAll = function removeAll() { - this.pages = [] - return this - } - Page.prototype.find = function find(url) { - return this.pages.find(function (item) { return item._url === url }) - || (function (self) { - var ancestor = self.pages.find(function (item) { return item.find(url) }) - return (ancestor) ? ancestor.find(url) : null - })(this) - } - Page.prototype.findAll = function findAll() { - return this.pages.slice() - } - - // STATIC MEMBERS - - return Page -})() diff --git a/docs/_classes/Styleguide.class.js b/docs/_classes/Styleguide.class.js deleted file mode 100644 index d4d67e4..0000000 --- a/docs/_classes/Styleguide.class.js +++ /dev/null @@ -1,62 +0,0 @@ -var Page = require('./Page.class.js') - -// TODO change classname to `StyleGuide` -module.exports = (function () { - // CONSTRUCTOR - function StyleGuide(name, url) { - var self = this - Page.call(self, { name: name, url: url }) - self._was_initialized = false - } - StyleGuide.prototype = Object.create(Page.prototype) - StyleGuide.prototype.constructor = StyleGuide - - // ACCESSOR FUNCTIONS - - // METHODS - StyleGuide.prototype.init = function init() { - var self = this - if (!self._was_initialized) { - self._was_initialized = true - return self - .add(new Page({ name: self.getName(), url: 'index.html' }) - .setDescription(self.getDescription()) - ) - .add(new Page({ name: 'Visual Design', url: 'visual.html' }) - .setDescription('Color and font schemes, look-and-feel, overall voice and tone.') - ) - .add(new Page({ name: 'Base Typography', url: 'base.html' }) - .setDescription('Bare, unstyled HTML elements. No classes.') - .add(new Page({ name: 'Table of Contents' , url: 'base.html#table-contents' })) - .add(new Page({ name: 'Headings & Paragraphs', url: 'base.html#headings-paragraphs' })) - .add(new Page({ name: 'Lists' , url: 'base.html#lists' })) - .add(new Page({ name: 'Tables' , url: 'base.html#tables' })) - .add(new Page({ name: 'Text-Level Elements' , url: 'base.html#text-level-elements' }) - .add(new Page({ name: 'Links' , url: 'base.html#links' })) - .add(new Page({ name: 'Stress' , url: 'base.html#stress' })) - .add(new Page({ name: 'Documentation', url: 'base.html#documentation' })) - .add(new Page({ name: 'Data' , url: 'base.html#data' })) - ) - .add(new Page({ name: 'Embedded Elements' , url: 'base.html#embedded-elements' })) - .add(new Page({ name: 'Forms' , url: 'base.html#forms' })) - .add(new Page({ name: 'Interactive Elements', url: 'base.html#interactive-elements' })) - ) - .add(new Page({ name: 'Objects', url: 'obj.html' }) - .setDescription('Patterns of structure that can be reused many times for many different purposes.') - ) - .add(new Page({ name: 'Components', url: 'comp.html' }) - .setDescription('Patterns of look-and-feel that are each only used for one purpose.') - ) - .add(new Page({ name: 'Helpers', url: 'help.html' }) - .setDescription('Somewhat explicit classes used for enhancing default styles.') - ) - .add(new Page({ name: 'Atoms', url: 'atom.html' }) - .setDescription('Very specific classes used for creating anomalies or fixing broken styles.') - ) - } else return - } - - // STATIC MEMBERS - - return StyleGuide -})() diff --git a/docs/_classes/Xmeter.class.js b/docs/_classes/Xmeter.class.js deleted file mode 100644 index cc32756..0000000 --- a/docs/_classes/Xmeter.class.js +++ /dev/null @@ -1,46 +0,0 @@ -var Page = require('./Page.class.js') -var Styleguide = require('./Styleguide.class.js') - -module.exports = (function () { - // CONSTRUCTOR - function Xmeter() {} - - // METHODS - - // STATIC MEMBERS - Xmeter.DOCS = new Styleguide('Xmeter', '/docs/') - .setTitle('Xmeter Style Guide') - .setDescription('A demo of Xmeter styles.') - .init() - ;(function () { - // adding pages to Xmeter.DOCS - Xmeter.DOCS.find('visual.html') - .hide() - Xmeter.DOCS.find('obj.html') - .add(new Page({ name: 'Table of Contents', url: 'obj.html#table-contents' })) - .add(new Page({ name: 'The List Object' , url: 'obj.html#list-object' })) - .add(new Page({ name: 'The Flex Object' , url: 'obj.html#flex-object' })) - .add(new Page({ name: 'The Grid Object' , url: 'obj.html#grid-object' })) - Xmeter.DOCS.find('comp.html') - .hide() - Xmeter.DOCS.find('help.html') - .add(new Page({ name: 'Table of Contents', url: 'help.html#table-contents' })) - .add(new Page({ name: 'Block' , url: 'help.html#block' })) - .add(new Page({ name: 'Inline' , url: 'help.html#inline' })) - .add(new Page({ name: 'Clearfix' , url: 'help.html#cleafix' })) - Xmeter.DOCS.find('atom.html') - .add(new Page({ name: 'Table of Contents', url: 'atom.html#table-contents' })) - .add(new Page({ name: 'margin-bottom' , url: 'atom.html#margin-bottom' })) - .add(new Page({ name: 'padding-top' , url: 'atom.html#padding-top' })) - .add(new Page({ name: 'font-size' , url: 'atom.html#font-size' })) - })() - - Xmeter.DOCS_CLASSES = { - figure : 'docs-figure' - , pre : 'docs-pre' - , code : 'docs-code' - , form : 'docs-form' - } - - return Xmeter -})() diff --git a/docs/includes/_data.jade b/docs/includes/_data.jade index 4a3003a..df03d48 100644 --- a/docs/includes/_data.jade +++ b/docs/includes/_data.jade @@ -1,7 +1,3 @@ -//- include ../_classes/Page.class.jade -//- include ../_classes/Styleguide.class.jade -//- include ../_classes/Xmeter.class.jade - mixin doctoc(args) //- NOTE parameter validation - From e1fffebed5e2df5e311e26fa53461d9a01ed60ed Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Tue, 6 Sep 2016 00:56:00 -0400 Subject: [PATCH 46/53] update Page accessor calls --- docs/_docs.tpl.jade | 14 +++++++------- docs/includes/_data.jade | 10 +++++----- docs/models/classes/Xmeter.class.js | 4 ++-- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/_docs.tpl.jade b/docs/_docs.tpl.jade index 7c647f8..4be1473 100644 --- a/docs/_docs.tpl.jade +++ b/docs/_docs.tpl.jade @@ -3,9 +3,9 @@ html(lang="en") include includes/_data.jade block vars head - title= page.getTitle() || (page.getName() + ' | ' + Xmeter.DOCS.getName()) + title= page.title() || (page.name() + ' | ' + Xmeter.DOCS.name()) meta(charset="utf-8") - meta(name="description" content=Xmeter.DOCS.getDescription()) + meta(name="description" content=Xmeter.DOCS.description()) meta(name="viewport" content="width=device-width, initial-scale=1") link(rel="stylesheet" href="../xmeter.css") link(rel="stylesheet" href="styles/docs.css") @@ -13,13 +13,13 @@ html(lang="en") main.docs-main block main header - //- h1= page.getTitle() || (Xmeter.DOCS.getName() + ' — ' + page.getName()) - if page.getTitle() - h1= page.getTitle() + //- h1= page.title() || (Xmeter.DOCS.name() + ' — ' + page.name()) + if page.title() + h1= page.title() else - h1 #[a(href=Xmeter.DOCS.getURL())= Xmeter.DOCS.getName()] — #{page.getName()} + h1 #[a(href=Xmeter.DOCS.url())= Xmeter.DOCS.name()] — #{page.name()} block mainIntro - p= page.getDescription() + p= page.description() nav#table-contents h2 Table of Contents block toc diff --git a/docs/includes/_data.jade b/docs/includes/_data.jade index df03d48..407b0ad 100644 --- a/docs/includes/_data.jade +++ b/docs/includes/_data.jade @@ -8,16 +8,16 @@ mixin doctoc(args) each item in pages unless item.isHidden() li(class=classes.itemclasses) - a(class=classes.linkclasses href=item.getURL())= item.getName() - if item.getDescription() - = ': ' + item.getDescription() + a(class=classes.linkclasses href=item.url())= item.name() + if item.description() + = ': ' + item.description() if item.findAll().length && depth > 0 +doctoc({pages: item.findAll(), classes: (classes.sub || {}), depth: depth-1}) mixin newSection(hn, page) - - var text = page.getName() - , id = page.getURL().split('#')[1] + var text = page.name() + , id = page.url().split('#')[1] section(id=id) if hn === 1 h1 #{text} #[a.docs-_fragid(href='#' + id)] diff --git a/docs/models/classes/Xmeter.class.js b/docs/models/classes/Xmeter.class.js index e4be46c..96184af 100644 --- a/docs/models/classes/Xmeter.class.js +++ b/docs/models/classes/Xmeter.class.js @@ -9,8 +9,8 @@ module.exports = (function () { // STATIC MEMBERS Xmeter.DOCS = new StyleGuide('Xmeter', '/docs/') - .setTitle('Xmeter Style Guide') - .setDescription('A demo of Xmeter styles.') + .title('Xmeter Style Guide') + .description('A demo of Xmeter styles.') .init() ;(function () { // adding pages to Xmeter.DOCS From a2f5bfd0a7e72e5c0c90a6ab595a86b605a4ae6c Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Fri, 9 Sep 2016 21:26:33 -0400 Subject: [PATCH 47/53] add jsdoc --- docs/models/classes/Xmeter.class.js | 31 +++++++++++++++++++---------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/docs/models/classes/Xmeter.class.js b/docs/models/classes/Xmeter.class.js index 96184af..5534e7f 100644 --- a/docs/models/classes/Xmeter.class.js +++ b/docs/models/classes/Xmeter.class.js @@ -8,33 +8,42 @@ module.exports = (function () { // METHODS // STATIC MEMBERS - Xmeter.DOCS = new StyleGuide('Xmeter', '/docs/') - .title('Xmeter Style Guide') - .description('A demo of Xmeter styles.') - .init() - ;(function () { - // adding pages to Xmeter.DOCS - Xmeter.DOCS.find('visual.html') + /** + * The style guide site for this project. + * @type {StyleGuide} + */ + Xmeter.DOCS = (function () { + var docs = new StyleGuide('Xmeter', '/docs/') + .title('Xmeter Style Guide') + .description('A demo of Xmeter styles.') + .init() + docs.find('visual.html') .hide() - Xmeter.DOCS.find('obj.html') + docs.find('obj.html') .add(new Page({ name: 'Table of Contents', url: 'obj.html#table-contents' })) .add(new Page({ name: 'The List Object' , url: 'obj.html#list-object' })) .add(new Page({ name: 'The Flex Object' , url: 'obj.html#flex-object' })) .add(new Page({ name: 'The Grid Object' , url: 'obj.html#grid-object' })) - Xmeter.DOCS.find('comp.html') + docs.find('comp.html') .hide() - Xmeter.DOCS.find('help.html') + docs.find('help.html') .add(new Page({ name: 'Table of Contents', url: 'help.html#table-contents' })) .add(new Page({ name: 'Block' , url: 'help.html#block' })) .add(new Page({ name: 'Inline' , url: 'help.html#inline' })) .add(new Page({ name: 'Clearfix' , url: 'help.html#cleafix' })) - Xmeter.DOCS.find('atom.html') + docs.find('atom.html') .add(new Page({ name: 'Table of Contents', url: 'atom.html#table-contents' })) .add(new Page({ name: 'margin-bottom' , url: 'atom.html#margin-bottom' })) .add(new Page({ name: 'padding-top' , url: 'atom.html#padding-top' })) .add(new Page({ name: 'font-size' , url: 'atom.html#font-size' })) + return docs })() + /** + * Static classes for Xmeter style guide elements. + * REVIEW : may not need this + * @type {Object} + */ Xmeter.DOCS_CLASSES = { figure : 'docs-figure' , pre : 'docs-pre' From 2385ba642c9511afdc0cfd8ec3e3fa7b56cadc77 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Mon, 26 Sep 2016 08:06:57 -0400 Subject: [PATCH 48/53] npm install --save-dev sitepage --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 52e6854..2615fee 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ "lessc-each": "^1.1.0", "normalize.css": "~4.1.1", "pug-cli": "^1.0.0-alpha6", - "resetcss": "^1.0.3" + "resetcss": "^1.0.3", + "sitepage": "^1.0.0" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", From 9241ccbcf2019797dd39361a9454cc503868e1de Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Mon, 26 Sep 2016 08:09:49 -0400 Subject: [PATCH 49/53] rebuild stage 2016-09-26T08:09 --- docs/atom.html | 8 ++++---- docs/base.html | 4 ++-- docs/help.html | 10 +++++----- docs/obj.html | 6 +++--- index.html | 1 + 5 files changed, 15 insertions(+), 14 deletions(-) create mode 100644 index.html diff --git a/docs/atom.html b/docs/atom.html index 76b3a64..53adbef 100644 --- a/docs/atom.html +++ b/docs/atom.html @@ -1,9 +1,9 @@ -Atoms | Xmeter

Xmeter — Atoms

Very specific classes used for creating anomalies or fixing broken styles.

margin-bottom

This atom sets the bottom margin to one vertical rhythm unit (1vru), +Atoms | Xmeter

Xmeter — Atoms

Very specific classes used for creating anomalies or fixing broken styles.

margin-bottom

This atom sets the bottom margin to one vertical rhythm unit (1vru), which is equal to the html element’s line-height multiplied by 1rem.

@g-vru: @g-line_height * 1rem;
-.-mb-1vru { margin-bottom: @g-vru; }
Most typographical block elements like paragraphs and lists are automatically given this style.
<div class="-mb-1vru">Most ...</div>

padding-top

This atom sets the top padding to 1vru.

@g-vru: @g-line_height * 1rem;
-.-pt-1vru { padding-top: @g-vru; }
Usually only Heading 1 is given this style, but it is also useful for moving an element down the page.
<div class="-pt-1vru">Usually only ...</div>

font-size

These are two groups of atoms. The first group simply sets the font size of an element. +.-mb-1vru { margin-bottom: @g-vru; }

Most typographical block elements like paragraphs and lists are automatically given this style.
<div class="-mb-1vru">Most ...</div>

padding-top

This atom sets the top padding to 1vru.

@g-vru: @g-line_height * 1rem;
+.-pt-1vru { padding-top: @g-vru; }
Usually only Heading 1 is given this style, but it is also useful for moving an element down the page.
<div class="-pt-1vru">Usually only ...</div>

font-size

These are two groups of atoms. The first group simply sets the font size of an element. The second group uses the .font-size-el() mixin, for maintaining vertical rhythm.

See all the font sizes in the source file /src/__settings.less, and all atoms in /src/_atom.less

@g-font_size_peta: 96/16;
@@ -24,7 +24,7 @@
 <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>
Use .-fz-el-* on block elements. -Numbers shown are font-sizes(ems)/line-heights.
  • universe (6.00/0.250)
  • galaxy (4.00/0.375)
  • star (3.00/0.500)
  • planet (2.00/0.750)
  • asteroid (1.50/1.000)
  • molecule (1.00/1.500)
  • atom (0.75/2.000)
  • quark (0.50/3.000)
<li class="-fz-el-peta">universe (6.00/0.250)</li>
+Numbers shown are font-sizes(ems)/line-heights.
  • universe (6.00/0.250)
  • galaxy   (4.00/0.375)
  • star     (3.00/0.500)
  • planet   (2.00/0.750)
  • asteroid (1.50/1.000)
  • molecule (1.00/1.500)
  • atom     (0.75/2.000)
  • quark    (0.50/3.000)
<li class="-fz-el-peta">universe (6.00/0.250)</li>
 <li class="-fz-el-tera">galaxy   (4.00/0.375)</li>
 <li class="-fz-el-giga">star     (3.00/0.500)</li>
 <li class="-fz-el-mega">planet   (2.00/0.750)</li>
diff --git a/docs/base.html b/docs/base.html
index 5c0f910..8cd9505 100644
--- a/docs/base.html
+++ b/docs/base.html
@@ -1,4 +1,4 @@
-Base Typography | Xmeter
Xmeter — Base Typography
Bare, unstyled HTML elements. No classes.
Headings & Paragraphs 
Heading 1 h1
Paragraph p
+Base Typography | Xmeter
Xmeter — Base Typography
Bare, unstyled HTML elements. No classes.
Headings & Paragraphs 
Heading 1 h1
Paragraph p
 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.
@@ -69,4 +69,4 @@
     , quis: convallis(id () { justo Quisque.elit; })
     };
   }
-}
Aenean consectetur figure suscipit urna, non vehicula lacus blandit et.
Integer at lacus et diam tristique figure figcaption suscipit.
Donec blockquote vel dolor ut felis dapibus ultricies vitae a nibh.
A horizontal rule hr is present below.

Lists

Ordered List ol
  1. List item li
  2. List item li
    1. Nested list item
    2. Nested list item
      1. Another nested list item
      2. Another nested list item
Unrdered List ul
  • List item li
  • List item li
    • Nested list item
    • Nested list item
      • Another nested list item
      • Another nested list item
Dictionary List dl
key dt
value dd
  • 1st key
  • 2nd key
value
key
  • 1st value
  • 2nd value

Tables

table caption
theader trow 1 theading 1theader trow 1 theading 2theader trow 1 theading 3
tfooter trow 1 tdata 1tfooter trow 1 tdata 2tfooter trow 1 tdata 3
tfooter trow 2 tdata 1tfooter trow 2 tdata 2tfooter trow 2 tdata 3
tbody trow 1 tdata 1tbody trow 1 tdata 2tbody trow 1 tdata 3
tbody trow 2 tdata 1tbody trow 2 tdata 2tbody trow 2 tdata 3
tbody trow 3 tdata 1tbody trow 3 tdata 2tbody trow 3 tdata 3

Text-Level Elements

Stress

  • emphasized text em
  • important text strong
  • alternate voice/mood (scare quotes, mentioning words, foreign expressions) i
  • relevant in some context mark
  • unarticulated annotation u
  • side comment small
  • text shown to be no longer relevant s

Documentation

  • content shown to be inserted into a document ins
  • content shown to be deleted from a document del
  • definining instance of a term dfn
  • keyword or technical term b
  • abbreviation or acronym abbr[title]
  • variable var
  • quoted material q
  • reference to a work, some part of a work, or the creator of a work cite
  • superscript sup
  • subscript sub

Data

  • generic machine-readable data data
  • a fragment of code code
  • user input kbd
  • a button or key on a physical device kbd > kbd
  • sample computer output samp

Embedded Elements

Forms

Integer at lacus et diam tristique fieldset legend suscipit.Aenean consectetur fieldset suscipit urna, non vehicula lacus blandit et.
single line text inputs
date/time
without text input
check boxes
radio buttons
drop-down list (select only one)
drop-down list (select multiple)
buttons
textarea

Interactive Elements

Integer at lacus et diam tristique details summary suscipit.Aenean consectetur details suscipit urna, non vehicula lacus blandit et.
\ No newline at end of file +}
Aenean consectetur figure suscipit urna, non vehicula lacus blandit et.
Integer at lacus et diam tristique figure figcaption suscipit.
Donec blockquote vel dolor ut felis dapibus ultricies vitae a nibh.
A horizontal rule hr is present below.

Lists

Ordered List ol
  1. List item li
  2. List item li
    1. Nested list item
    2. Nested list item
      1. Another nested list item
      2. Another nested list item
Unrdered List ul
  • List item li
  • List item li
    • Nested list item
    • Nested list item
      • Another nested list item
      • Another nested list item
Dictionary List dl
key dt
value dd
  • 1st key
  • 2nd key
value
key
  • 1st value
  • 2nd value

Tables

table caption
theader trow 1 theading 1theader trow 1 theading 2theader trow 1 theading 3
tfooter trow 1 tdata 1tfooter trow 1 tdata 2tfooter trow 1 tdata 3
tfooter trow 2 tdata 1tfooter trow 2 tdata 2tfooter trow 2 tdata 3
tbody trow 1 tdata 1tbody trow 1 tdata 2tbody trow 1 tdata 3
tbody trow 2 tdata 1tbody trow 2 tdata 2tbody trow 2 tdata 3
tbody trow 3 tdata 1tbody trow 3 tdata 2tbody trow 3 tdata 3

Text-Level Elements

Stress

  • emphasized text em
  • important text strong
  • alternate voice/mood (scare quotes, mentioning words, foreign expressions) i
  • relevant in some context mark
  • unarticulated annotation u
  • side comment small
  • text shown to be no longer relevant s

Documentation

  • content shown to be inserted into a document ins
  • content shown to be deleted from a document del
  • definining instance of a term dfn
  • keyword or technical term b
  • abbreviation or acronym abbr[title]
  • variable var
  • quoted material q
  • reference to a work, some part of a work, or the creator of a work cite
  • superscript sup
  • subscript sub

Data

  • generic machine-readable data data
  • a fragment of code code
  • user input kbd
  • a button or key on a physical device kbd > kbd
  • sample computer output samp

Embedded Elements

Forms

Integer at lacus et diam tristique fieldset legend suscipit.Aenean consectetur fieldset suscipit urna, non vehicula lacus blandit et.
single line text inputs
date/time
without text input
check boxes
radio buttons
drop-down list (select only one)
drop-down list (select multiple)
buttons
textarea

Interactive Elements

Integer at lacus et diam tristique details summary suscipit.Aenean consectetur details suscipit urna, non vehicula lacus blandit et.
\ No newline at end of file diff --git a/docs/help.html b/docs/help.html index 8989815..72e2e3d 100644 --- a/docs/help.html +++ b/docs/help.html @@ -1,17 +1,17 @@ -Helpers | Xmeter

Xmeter — Helpers

Somewhat explicit classes used for enhancing default styles.

Block

The Block Helper creates a blocky look, +Helpers | Xmeter

Xmeter — Helpers

Somewhat explicit classes used for enhancing default styles.

Block

The Block Helper creates a blocky look, with an inherited line-height to maintain vertical rhythm.

Albert Einstein was made famous by his equation -E = mc2 +E = mc2 which explains the relationship between energy and mass.

<p>... his famous equation
   <b class="h-Block" style="text-align:center;">E = mc<sup>2</sup></b>
-  which explains ...</p>

Inline

Creates an inline look, + which explains ...</p>

Inline

Creates an inline look, with zero line-height to maintain vertical rhythm.

This class is useful for creating inline lists, that is, lists whose items are each displayed in line, one right after another.

  • spacetime
  • black hole
  • singularity
  • gravity
  • supernova
  • neutron star 
<ul>
   <li class="h-Inline">spacetime </li>
   <li class="h-Inline">black hole </li>
   ...
-</ul>

Clearfix

The Clearfix Helper creates a line break after an element. +</ul>

Clearfix

The Clearfix Helper creates a line break after an element. This could be a container of floats, or it could simply be an inline list item. -Use this as an alternative to the br element.

gravity
supernova
spacetime black hole singularity
<div class="h-Clearfix">
+Use this as an alternative to the br element.
gravity
supernova
spacetime black hole singularity
<div class="h-Clearfix">
   <div style="float:  left;">gravity</div>
   <div style="float: right;">supernova</div>
 </div>
diff --git a/docs/obj.html b/docs/obj.html
index 0211842..3ce5f48 100644
--- a/docs/obj.html
+++ b/docs/obj.html
@@ -1,10 +1,10 @@
-Objects | Xmeter
Xmeter — Objects
Patterns of structure that can be reused many times for many different purposes.
The List Object 
Use the List Object to remove the usual padding and list item markers accompanied by
+Objects | Xmeter
Xmeter — Objects
Patterns of structure that can be reused many times for many different purposes.
The List Object 
Use the List Object to remove the usual padding and list item markers accompanied by
 (un)ordered lists. The result is a list of items, each on its own line.
 Combine this class with other classes to create a variety of styles.
  • Burns & McDonnell Engineering
  • DIS-TRAN Steel, LLC
  • EDM International
  • Electrical Consultants, Inc.
  • Fabrimet Inc.
  • Falcon Steel Company
<ul class="o-List">
   <li class="o-List__Item">Burns & McDonnell Engineering</li>
   <li class="o-List__Item">DIS-TRAN Steel, LLC</li>
   ...
-</ul>
The Flex Object 
A Flex Object is simply a container of flexible items arranged in one dimension.
+</ul>

The Flex Object

A Flex Object is simply a container of flexible items arranged in one dimension. Each flex item has a main size of auto, depending on its contents. The flex items will grow or shrink together to fit into the allotted space. @@ -16,7 +16,7 @@ <li class="o-List__Item o-Flex__Item">Burns & McDonnell Engineering</li> <li class="o-List__Item o-Flex__Item">DIS-TRAN Steel, LLC</li> ... -</ul>

A Flex Object with not enough space.

The Grid Object

The Grid Object is similar to the Flex Object except that it can be extended +</ul>

A Flex Object with not enough space.

The Grid Object

The Grid Object is similar to the Flex Object except that it can be extended to two dimensions. It has the structure of a list in that all items share the same container (unlike tables where cells might not share the same row), while at the same time diff --git a/index.html b/index.html new file mode 100644 index 0000000..6398e69 --- /dev/null +++ b/index.html @@ -0,0 +1 @@ +Xmeter index page

Xmeter

Go to Docs

\ No newline at end of file From a3cfde942455e14311fe07d543e50ddce2e620c7 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Mon, 26 Sep 2016 10:48:23 -0400 Subject: [PATCH 50/53] fix clearfix docs example --- docs/includes/_h-Clearfix.docs.jade | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/includes/_h-Clearfix.docs.jade b/docs/includes/_h-Clearfix.docs.jade index 4b2c4f7..3ec0fb3 100644 --- a/docs/includes/_h-Clearfix.docs.jade +++ b/docs/includes/_h-Clearfix.docs.jade @@ -18,16 +18,16 @@ mixin docs_clearfix(classname) figcaption The Clearfix Helper is used in the classical sense. figure(class=classname.figure) ul - span.o-Inline spacetime#{' '} - span.o-Inline.h-Clearfix black hole#{' '} - span.o-Inline singularity#{' '} - span.o-Inline neutron star#{' '} + li.h-Inline spacetime#{' '} + li.h-Inline.h-Clearfix black hole#{' '} + li.h-Inline singularity#{' '} + li.h-Inline neutron star#{' '} pre(class=classname.pre). <ul> - <li class="o-Inline">spacetime </li> - <li class="o-Inline #[u h-Clearfix]">black hole </li> - <li class="o-Inline">singularity </li> - <li class="o-Inline">neutron star </li> + <li class="h-Inline">spacetime </li> + <li class="h-Inline #[u h-Clearfix]">black hole </li> + <li class="h-Inline">singularity </li> + <li class="h-Inline">neutron star </li> </ul> figcaption. The Clearfix Helper creates a line break after the 2nd inline item. From 842e5716fab9e8e2e59d6185fdbd17d37cf55b83 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Thu, 29 Sep 2016 09:08:37 -0400 Subject: [PATCH 51/53] update h1 & h2 line-height --- src/__settings.less | 16 ++++++++-------- src/_base.sections.less | 4 ++-- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/__settings.less b/src/__settings.less index 2595de5..433306f 100644 --- a/src/__settings.less +++ b/src/__settings.less @@ -21,14 +21,14 @@ // new global font sizes as of 2016-08-17 -@g-font_size_peta: 96/16; // 6.00 // lines: 4 -@g-font_size_tera: 64/16; // 4.00 // lines: 3 -@g-font_size_giga: 48/16; // 3.00 // lines: 2 -@g-font_size_mega: 32/16; // 2.00 // lines: 2 -@g-font_size_kilo: 24/16; // 1.50 // lines: 1 -@g-font_size_norm: 16/16; // 1.00 // lines: 1 -@g-font_size_mill: 12/16; // 0.75 // lines: 1 -@g-font_size_micr: 8/16; // 0.50 // lines: 1 +@g-font_size_peta: 96/16; // 6.00 // lines: ceil(6.00/@g-line_height) == 4 +@g-font_size_tera: 64/16; // 4.00 // lines: ceil(4.00/@g-line_height) == 3 +@g-font_size_giga: 48/16; // 3.00 // lines: ceil(3.00/@g-line_height) == 2 +@g-font_size_mega: 32/16; // 2.00 // lines: ceil(2.00/@g-line_height) == 2 +@g-font_size_kilo: 24/16; // 1.50 // lines: ceil(1.50/@g-line_height) == 1 +@g-font_size_norm: 16/16; // 1.00 // lines: ceil(1.00/@g-line_height) == 1 +@g-font_size_mill: 12/16; // 0.75 // lines: ceil(0.75/@g-line_height) == 1 +@g-font_size_micr: 8/16; // 0.50 // lines: ceil(0.50/@g-line_height) == 1 // new heading sizes @g-font_size_h1: @g-font_size_giga; diff --git a/src/_base.sections.less b/src/_base.sections.less index fec3d12..6f15eff 100644 --- a/src/_base.sections.less +++ b/src/_base.sections.less @@ -28,8 +28,8 @@ footer { h1, h2, h3, h4, h5, h6 { font-weight: 700; } -h1 { .font-size-el(@g-font_size_h1); } -h2 { .font-size-el(@g-font_size_h2); } +h1 { .font-size-el(@g-font_size_h1, 2); } +h2 { .font-size-el(@g-font_size_h2, 2); } h3 { .font-size-el(@g-font_size_h3); } h4 { .font-size-el(@g-font_size_h4); } h5 { .font-size-el(@g-font_size_h5); } From 8681e3d3fc6b7796a2f3441250ef36977e7f9006 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Sat, 1 Oct 2016 18:29:34 -0400 Subject: [PATCH 52/53] fix line-heights of fz atoms --- docs/includes/_atom.font-size.docs.jade | 16 ++++++++-------- src/_atom.less | 8 ++++---- src/_base.sections.less | 4 ++-- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/includes/_atom.font-size.docs.jade b/docs/includes/_atom.font-size.docs.jade index 86ef669..eacfd98 100644 --- a/docs/includes/_atom.font-size.docs.jade +++ b/docs/includes/_atom.font-size.docs.jade @@ -45,19 +45,19 @@ mixin docs_fontSize(classname) Use #[code(class=classname.code) .-fz-el-*] on block elements. Numbers shown are font-sizes(ems)/line-heights. ul(style="overflow:auto;white-space:nowrap;") - li.-fz-el-peta universe (6.00/0.250) - li.-fz-el-tera galaxy (4.00/0.375) - li.-fz-el-giga star (3.00/0.500) - li.-fz-el-mega planet (2.00/0.750) + li.-fz-el-peta universe (6.00/1.000) + li.-fz-el-tera galaxy (4.00/1.125) + li.-fz-el-giga star (3.00/1.000) + li.-fz-el-mega planet (2.00/1.500) li.-fz-el-kilo asteroid (1.50/1.000) li.-fz-el-norm molecule (1.00/1.500) li.-fz-el-mill atom (0.75/2.000) li.-fz-el-micr quark (0.50/3.000) pre(class=classname.pre). - <li class="#[u -fz-el-peta]">universe (6.00/0.250)</li> - <li class="#[u -fz-el-tera]">galaxy (4.00/0.375)</li> - <li class="#[u -fz-el-giga]">star (3.00/0.500)</li> - <li class="#[u -fz-el-mega]">planet (2.00/0.750)</li> + <li class="#[u -fz-el-peta]">universe (6.00/1.000)</li> + <li class="#[u -fz-el-tera]">galaxy (4.00/1.125)</li> + <li class="#[u -fz-el-giga]">star (3.00/1.000)</li> + <li class="#[u -fz-el-mega]">planet (2.00/1.500)</li> <li class="#[u -fz-el-kilo]">asteroid (1.50/1.000)</li> <li class="#[u -fz-el-norm]">molecule (1.00/1.500)</li> <li class="#[u -fz-el-mill]">atom (0.75/2.000)</li> diff --git a/src/_atom.less b/src/_atom.less index 55330da..555e9b5 100644 --- a/src/_atom.less +++ b/src/_atom.less @@ -135,10 +135,10 @@ .-fz-el-mill { .font-size-el(@g-font_size_mill); } .-fz-el-norm { .font-size-el(@g-font_size_norm); } .-fz-el-kilo { .font-size-el(@g-font_size_kilo); } -.-fz-el-mega { .font-size-el(@g-font_size_mega); } -.-fz-el-giga { .font-size-el(@g-font_size_giga); } -.-fz-el-tera { .font-size-el(@g-font_size_tera); } -.-fz-el-peta { .font-size-el(@g-font_size_peta); } +.-fz-el-mega { .font-size-el(@g-font_size_mega; 2); } +.-fz-el-giga { .font-size-el(@g-font_size_giga; 2); } +.-fz-el-tera { .font-size-el(@g-font_size_tera; 3); } +.-fz-el-peta { .font-size-el(@g-font_size_peta; 4); } @media screen { .-fz-el-micr-s { .-fz-el-micr; } .-fz-el-mill-s { .-fz-el-mill; } diff --git a/src/_base.sections.less b/src/_base.sections.less index 6f15eff..58c713d 100644 --- a/src/_base.sections.less +++ b/src/_base.sections.less @@ -28,8 +28,8 @@ footer { h1, h2, h3, h4, h5, h6 { font-weight: 700; } -h1 { .font-size-el(@g-font_size_h1, 2); } -h2 { .font-size-el(@g-font_size_h2, 2); } +h1 { .font-size-el(@g-font_size_h1; 2); } +h2 { .font-size-el(@g-font_size_h2; 2); } h3 { .font-size-el(@g-font_size_h3); } h4 { .font-size-el(@g-font_size_h4); } h5 { .font-size-el(@g-font_size_h5); } From c22f59dc5bf45a4ea171df0a639d289ebab58a87 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Mon, 3 Oct 2016 14:52:02 -0400 Subject: [PATCH 53/53] rebuild stage 2016-10-03T14:52 --- docs/atom.html | 8 +++--- docs/help.html | 10 ++++---- xmeter.css | 68 +++++++++++++++++++++++++------------------------- xmeter.min.css | 2 +- 4 files changed, 44 insertions(+), 44 deletions(-) diff --git a/docs/atom.html b/docs/atom.html index 53adbef..db4954d 100644 --- a/docs/atom.html +++ b/docs/atom.html @@ -24,10 +24,10 @@ <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>
Use .-fz-el-* on block elements. -Numbers shown are font-sizes(ems)/line-heights.
  • universe (6.00/0.250)
  • galaxy (4.00/0.375)
  • star (3.00/0.500)
  • planet (2.00/0.750)
  • asteroid (1.50/1.000)
  • molecule (1.00/1.500)
  • atom (0.75/2.000)
  • quark (0.50/3.000)
<li class="-fz-el-peta">universe (6.00/0.250)</li>
-<li class="-fz-el-tera">galaxy   (4.00/0.375)</li>
-<li class="-fz-el-giga">star     (3.00/0.500)</li>
-<li class="-fz-el-mega">planet   (2.00/0.750)</li>
+Numbers shown are font-sizes(ems)/line-heights.
  • universe (6.00/1.000)
  • galaxy   (4.00/1.125)
  • star     (3.00/1.000)
  • planet   (2.00/1.500)
  • asteroid (1.50/1.000)
  • molecule (1.00/1.500)
  • atom     (0.75/2.000)
  • quark    (0.50/3.000)
<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>
diff --git a/docs/help.html b/docs/help.html
index 72e2e3d..22ff0ab 100644
--- a/docs/help.html
+++ b/docs/help.html
@@ -15,9 +15,9 @@
   <div style="float:  left;">gravity</div>
   <div style="float: right;">supernova</div>
 </div>
-<div>spacetime black hole singularity</div>
The Clearfix Helper is used in the classical sense.
    spacetime black hole singularity neutron star 
<ul>
-  <li class="o-Inline">spacetime </li>
-  <li class="o-Inline  h-Clearfix">black hole </li>
-  <li class="o-Inline">singularity </li>
-  <li class="o-Inline">neutron star </li>
+<div>spacetime black hole singularity</div>
The Clearfix Helper is used in the classical sense.
  • spacetime
  • black hole
  • singularity
  • neutron star 
<ul>
+  <li class="h-Inline">spacetime </li>
+  <li class="h-Inline  h-Clearfix">black hole </li>
+  <li class="h-Inline">singularity </li>
+  <li class="h-Inline">neutron star </li>
 </ul>
The Clearfix Helper creates a line break after the 2nd inline item.
\ No newline at end of file diff --git a/xmeter.css b/xmeter.css index 31051d6..9709851 100644 --- a/xmeter.css +++ b/xmeter.css @@ -654,11 +654,11 @@ h6 { } h1 { font-size: 3em; - line-height: 0.5; + line-height: 1; } h2 { font-size: 2em; - line-height: 0.75; + line-height: 1.5; } h3 { font-size: 1.5em; @@ -1792,19 +1792,19 @@ input[type="search"] { } .-fz-el-mega { font-size: 2em; - line-height: 0.75; + line-height: 1.5; } .-fz-el-giga { font-size: 3em; - line-height: 0.5; + line-height: 1; } .-fz-el-tera { font-size: 4em; - line-height: 0.375; + line-height: 1.125; } .-fz-el-peta { font-size: 6em; - line-height: 0.25; + line-height: 1; } @media screen { .-fz-el-micr-s { @@ -1825,19 +1825,19 @@ input[type="search"] { } .-fz-el-mega-s { font-size: 2em; - line-height: 0.75; + line-height: 1.5; } .-fz-el-giga-s { font-size: 3em; - line-height: 0.5; + line-height: 1; } .-fz-el-tera-s { font-size: 4em; - line-height: 0.375; + line-height: 1.125; } .-fz-el-peta-s { font-size: 6em; - line-height: 0.25; + line-height: 1; } } @media print { @@ -1859,19 +1859,19 @@ input[type="search"] { } .-fz-el-mega-p { font-size: 2em; - line-height: 0.75; + line-height: 1.5; } .-fz-el-giga-p { font-size: 3em; - line-height: 0.5; + line-height: 1; } .-fz-el-tera-p { font-size: 4em; - line-height: 0.375; + line-height: 1.125; } .-fz-el-peta-p { font-size: 6em; - line-height: 0.25; + line-height: 1; } } @media screen and (min-width: 30em) { @@ -1893,19 +1893,19 @@ input[type="search"] { } .-fz-el-mega-sK { font-size: 2em; - line-height: 0.75; + line-height: 1.5; } .-fz-el-giga-sK { font-size: 3em; - line-height: 0.5; + line-height: 1; } .-fz-el-tera-sK { font-size: 4em; - line-height: 0.375; + line-height: 1.125; } .-fz-el-peta-sK { font-size: 6em; - line-height: 0.25; + line-height: 1; } } @media screen and (min-width: 45em) { @@ -1927,19 +1927,19 @@ input[type="search"] { } .-fz-el-mega-sM { font-size: 2em; - line-height: 0.75; + line-height: 1.5; } .-fz-el-giga-sM { font-size: 3em; - line-height: 0.5; + line-height: 1; } .-fz-el-tera-sM { font-size: 4em; - line-height: 0.375; + line-height: 1.125; } .-fz-el-peta-sM { font-size: 6em; - line-height: 0.25; + line-height: 1; } } @media screen and (min-width: 60em) { @@ -1961,19 +1961,19 @@ input[type="search"] { } .-fz-el-mega-sG { font-size: 2em; - line-height: 0.75; + line-height: 1.5; } .-fz-el-giga-sG { font-size: 3em; - line-height: 0.5; + line-height: 1; } .-fz-el-tera-sG { font-size: 4em; - line-height: 0.375; + line-height: 1.125; } .-fz-el-peta-sG { font-size: 6em; - line-height: 0.25; + line-height: 1; } } @media screen and (min-width: 75em) { @@ -1995,19 +1995,19 @@ input[type="search"] { } .-fz-el-mega-sT { font-size: 2em; - line-height: 0.75; + line-height: 1.5; } .-fz-el-giga-sT { font-size: 3em; - line-height: 0.5; + line-height: 1; } .-fz-el-tera-sT { font-size: 4em; - line-height: 0.375; + line-height: 1.125; } .-fz-el-peta-sT { font-size: 6em; - line-height: 0.25; + line-height: 1; } } @media screen and (min-width: 90em) { @@ -2029,19 +2029,19 @@ input[type="search"] { } .-fz-el-mega-sP { font-size: 2em; - line-height: 0.75; + line-height: 1.5; } .-fz-el-giga-sP { font-size: 3em; - line-height: 0.5; + line-height: 1; } .-fz-el-tera-sP { font-size: 4em; - line-height: 0.375; + line-height: 1.125; } .-fz-el-peta-sP { font-size: 6em; - line-height: 0.25; + line-height: 1; } } diff --git a/xmeter.min.css b/xmeter.min.css index 60e97ac..9099d76 100644 --- a/xmeter.min.css +++ b/xmeter.min.css @@ -1 +1 @@ -body,mark{color:#000}a,abbr[title],del,ins,s,u{text-decoration:none}progress,sub,sup{vertical-align:baseline}audio:not([controls]),hr{height:0;display:none}[hidden],hr,template{display:none}button,hr,input{overflow:visible}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend,ol,td,th,ul{padding:0}body,pre,table{text-align:left}caption,th{text-align:center}img,legend,table{max-width:100%}pre,textarea{overflow:auto}.o-List,ol,ul{list-style:none}body{background:#fff}blockquote,body,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,ul{margin:0}address,b,cite,code,dfn,em,h1,h2,h3,h4,h5,h6,i,kbd,pre,samp,small,strong,sub,sup,th,var{font:inherit}mark{background:#ff0}ol,ul{padding:0 0 0 4rem}/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#00e}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;cursor:help}h1{margin:.67em 0}sub,sup{line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace}figure{margin:0 0 1em}hr{box-sizing:content-box}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px}legend{color:inherit;display:table;white-space:normal}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}h4,html{line-height:1.5}b,dfn,h1,h2,h3,h4,h5,h6,strong,th{font-weight:700}*,::after,::before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:0 solid;content:' ';content:'';content:none}html{font-size:100%;font-size:16px}blockquote,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,ol,p,pre,table,ul{margin-bottom:1.5rem}h1{padding-top:1.5rem;font-size:3em;line-height:.5;margin-top:0}abbr,b,br,cite,code,data,dfn,em,i,kbd,mark,q,s,samp,small,span,strong,sub,sup,time,u,var{line-height:0}a,del,ins{display:contents}h2{font-size:2em;line-height:.75}h3{font-size:1.5em;line-height:1}h4{font-size:1em}h5,input:not([type=button]):not([type=reset]):not([type=submit]),textarea{font-size:.75em;line-height:2}h6{font-size:.5em;line-height:3}code,kbd,pre,samp,small,sub,sup{font-size:.75em}pre{line-height:2;text-indent:0;white-space:pre}dd>dl,dd>ol,dd>ul,dt>dl,dt>ol,dt>ul,li>dl,li>ol,li>ul{margin-bottom:0}dd>ol,dd>ul,dt>ol,dt>ul,li>ol,li>ul{padding-left:2rem}ol{list-style-type:decimal}ul{list-style-type:disc}table{border-collapse:collapse}tfoot,thead{vertical-align:bottom}tbody{vertical-align:top}cite,em,i,var{font-style:italic}u{text-decoration:underline;color:#080}s{text-decoration:line-through;color:#b00}ins{background:#a6f3a6}del{background:#f8cbcb}dfn{font-style:inherit}q{quotes:'\201c' '\201d';quotes:initial}q::before{content:open-quote}q::after{content:close-quote}code,kbd,samp{white-space:nowrap}code code,code kbd,code samp,kbd code,kbd kbd,kbd samp,samp code,samp kbd,samp samp{font-size:inherit}img{border-style:none;width:auto;height:auto;font-style:italic;vertical-align:middle}button,fieldset,input,select,textarea{border-width:1px;margin-top:-2px;border-style:solid;border-color:silver;border-color:rgba(0,0,0,.25)}fieldset{padding:0 1rem;margin-left:0;margin-right:0}button,input,select,textarea{padding:0 .25rem}textarea{width:30rem;height:9rem;line-height:1.5}.h-Block,.o-Flex,.o-Grid{line-height:inherit}button,input[type=button],input[type=reset],input[type=submit]{background-color:silver;background-color:rgba(0,0,0,.25)}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.o-List{padding-left:0}.o-Flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}@media screen{a:not([href]){opacity:.5}.o-List-s{padding-left:0;list-style:none}.o-Flex-s{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-s{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media print{*,::after,::before{background:0 0!important;box-shadow:none!important;text-shadow:none!important}.o-List-p{padding-left:0;list-style:none}.o-Flex-p{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-p{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media screen and (min-width:30em){.o-List-sK{padding-left:0;list-style:none}.o-Flex-sK{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sK{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media screen and (min-width:45em){.o-List-sM{padding-left:0;list-style:none}.o-Flex-sM{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sM{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media screen and (min-width:60em){.o-List-sG{padding-left:0;list-style:none}.o-Flex-sG{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sG{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media screen and (min-width:75em){.o-List-sT{padding-left:0;list-style:none}.o-Flex-sT{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sT{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media screen and (min-width:90em){.o-List-sP{padding-left:0;list-style:none}.o-Flex-sP{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sP{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}.o-Grid{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}@media screen{.o-Grid-s{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-s{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media print{.o-Grid-p{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-p{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:30em){.o-Grid-sK{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sK{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:45em){.o-Grid-sM{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sM{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:60em){.o-Grid-sG{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sG{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:75em){.o-Grid-sT{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sT{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:90em){.o-Grid-sP{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sP{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}.h-Block-sP{display:block;line-height:inherit}}.h-Block{display:block}@media screen{.h-Block-s{display:block;line-height:inherit}}@media print{.h-Block-p{display:block;line-height:inherit}}@media screen and (min-width:30em){.h-Block-sK{display:block;line-height:inherit}}@media screen and (min-width:45em){.h-Block-sM{display:block;line-height:inherit}}@media screen and (min-width:60em){.h-Block-sG{display:block;line-height:inherit}}@media screen and (min-width:75em){.h-Block-sT{display:block;line-height:inherit}.h-Inline-sT{display:inline;line-height:0}}.h-Inline{display:inline;line-height:0}@media screen{.h-Inline-s{display:inline;line-height:0}}@media print{.h-Inline-p{display:inline;line-height:0}}@media screen and (min-width:30em){.h-Inline-sK{display:inline;line-height:0}}@media screen and (min-width:45em){.h-Inline-sM{display:inline;line-height:0}}@media screen and (min-width:60em){.h-Inline-sG{display:inline;line-height:0}}@media screen and (min-width:90em){.h-Inline-sP{display:inline;line-height:0}.h-Clearfix-sP::after{content:'';display:block;clear:both}}.h-Clearfix::after{content:'';display:block;clear:both}.-mb-1vru{margin-bottom:1.5rem}.-pt-1vru{padding-top:1.5rem}.-fz-micr{font-size:.5em}.-fz-mill{font-size:.75em}.-fz-norm{font-size:1em}.-fz-kilo{font-size:1.5em}.-fz-mega{font-size:2em}.-fz-giga{font-size:3em}.-fz-tera{font-size:4em}.-fz-peta{font-size:6em}@media screen{.h-Clearfix-s::after{content:'';display:block;clear:both}.-mb-1vru-s{margin-bottom:1.5rem}.-pt-1vru-s{padding-top:1.5rem}.-fz-micr-s{font-size:.5em}.-fz-mill-s{font-size:.75em}.-fz-norm-s{font-size:1em}.-fz-kilo-s{font-size:1.5em}.-fz-mega-s{font-size:2em}.-fz-giga-s{font-size:3em}.-fz-tera-s{font-size:4em}.-fz-peta-s{font-size:6em}}@media print{.h-Clearfix-p::after{content:'';display:block;clear:both}.-mb-1vru-p{margin-bottom:1.5rem}.-pt-1vru-p{padding-top:1.5rem}.-fz-micr-p{font-size:.5em}.-fz-mill-p{font-size:.75em}.-fz-norm-p{font-size:1em}.-fz-kilo-p{font-size:1.5em}.-fz-mega-p{font-size:2em}.-fz-giga-p{font-size:3em}.-fz-tera-p{font-size:4em}.-fz-peta-p{font-size:6em}}@media screen and (min-width:30em){.h-Clearfix-sK::after{content:'';display:block;clear:both}.-mb-1vru-sK{margin-bottom:1.5rem}.-pt-1vru-sK{padding-top:1.5rem}.-fz-micr-sK{font-size:.5em}.-fz-mill-sK{font-size:.75em}.-fz-norm-sK{font-size:1em}.-fz-kilo-sK{font-size:1.5em}.-fz-mega-sK{font-size:2em}.-fz-giga-sK{font-size:3em}.-fz-tera-sK{font-size:4em}.-fz-peta-sK{font-size:6em}}@media screen and (min-width:45em){.h-Clearfix-sM::after{content:'';display:block;clear:both}.-mb-1vru-sM{margin-bottom:1.5rem}.-pt-1vru-sM{padding-top:1.5rem}.-fz-micr-sM{font-size:.5em}.-fz-mill-sM{font-size:.75em}.-fz-norm-sM{font-size:1em}.-fz-kilo-sM{font-size:1.5em}.-fz-mega-sM{font-size:2em}.-fz-giga-sM{font-size:3em}.-fz-tera-sM{font-size:4em}.-fz-peta-sM{font-size:6em}}@media screen and (min-width:60em){.h-Clearfix-sG::after{content:'';display:block;clear:both}.-mb-1vru-sG{margin-bottom:1.5rem}.-pt-1vru-sG{padding-top:1.5rem}.-fz-micr-sG{font-size:.5em}.-fz-mill-sG{font-size:.75em}.-fz-norm-sG{font-size:1em}.-fz-kilo-sG{font-size:1.5em}.-fz-mega-sG{font-size:2em}.-fz-giga-sG{font-size:3em}.-fz-tera-sG{font-size:4em}.-fz-peta-sG{font-size:6em}}@media screen and (min-width:75em){.h-Clearfix-sT::after{content:'';display:block;clear:both}.-mb-1vru-sT{margin-bottom:1.5rem}.-pt-1vru-sT{padding-top:1.5rem}.-fz-micr-sT{font-size:.5em}.-fz-mill-sT{font-size:.75em}.-fz-norm-sT{font-size:1em}.-fz-kilo-sT{font-size:1.5em}.-fz-mega-sT{font-size:2em}.-fz-giga-sT{font-size:3em}.-fz-tera-sT{font-size:4em}.-fz-peta-sT{font-size:6em}}@media screen and (min-width:90em){.-mb-1vru-sP{margin-bottom:1.5rem}.-pt-1vru-sP{padding-top:1.5rem}.-fz-micr-sP{font-size:.5em}.-fz-mill-sP{font-size:.75em}.-fz-norm-sP{font-size:1em}.-fz-kilo-sP{font-size:1.5em}.-fz-mega-sP{font-size:2em}.-fz-giga-sP{font-size:3em}.-fz-tera-sP{font-size:4em}.-fz-peta-sP{font-size:6em}}.-fz-el-micr{font-size:.5em;line-height:3}.-fz-el-mill{font-size:.75em;line-height:2}.-fz-el-norm{font-size:1em;line-height:1.5}.-fz-el-kilo{font-size:1.5em;line-height:1}.-fz-el-mega{font-size:2em;line-height:.75}.-fz-el-giga{font-size:3em;line-height:.5}.-fz-el-tera{font-size:4em;line-height:.375}.-fz-el-peta{font-size:6em;line-height:.25}@media screen{.-fz-el-micr-s{font-size:.5em;line-height:3}.-fz-el-mill-s{font-size:.75em;line-height:2}.-fz-el-norm-s{font-size:1em;line-height:1.5}.-fz-el-kilo-s{font-size:1.5em;line-height:1}.-fz-el-mega-s{font-size:2em;line-height:.75}.-fz-el-giga-s{font-size:3em;line-height:.5}.-fz-el-tera-s{font-size:4em;line-height:.375}.-fz-el-peta-s{font-size:6em;line-height:.25}}@media print{.-fz-el-micr-p{font-size:.5em;line-height:3}.-fz-el-mill-p{font-size:.75em;line-height:2}.-fz-el-norm-p{font-size:1em;line-height:1.5}.-fz-el-kilo-p{font-size:1.5em;line-height:1}.-fz-el-mega-p{font-size:2em;line-height:.75}.-fz-el-giga-p{font-size:3em;line-height:.5}.-fz-el-tera-p{font-size:4em;line-height:.375}.-fz-el-peta-p{font-size:6em;line-height:.25}}@media screen and (min-width:30em){.-fz-el-micr-sK{font-size:.5em;line-height:3}.-fz-el-mill-sK{font-size:.75em;line-height:2}.-fz-el-norm-sK{font-size:1em;line-height:1.5}.-fz-el-kilo-sK{font-size:1.5em;line-height:1}.-fz-el-mega-sK{font-size:2em;line-height:.75}.-fz-el-giga-sK{font-size:3em;line-height:.5}.-fz-el-tera-sK{font-size:4em;line-height:.375}.-fz-el-peta-sK{font-size:6em;line-height:.25}}@media screen and (min-width:45em){.-fz-el-micr-sM{font-size:.5em;line-height:3}.-fz-el-mill-sM{font-size:.75em;line-height:2}.-fz-el-norm-sM{font-size:1em;line-height:1.5}.-fz-el-kilo-sM{font-size:1.5em;line-height:1}.-fz-el-mega-sM{font-size:2em;line-height:.75}.-fz-el-giga-sM{font-size:3em;line-height:.5}.-fz-el-tera-sM{font-size:4em;line-height:.375}.-fz-el-peta-sM{font-size:6em;line-height:.25}}@media screen and (min-width:60em){.-fz-el-micr-sG{font-size:.5em;line-height:3}.-fz-el-mill-sG{font-size:.75em;line-height:2}.-fz-el-norm-sG{font-size:1em;line-height:1.5}.-fz-el-kilo-sG{font-size:1.5em;line-height:1}.-fz-el-mega-sG{font-size:2em;line-height:.75}.-fz-el-giga-sG{font-size:3em;line-height:.5}.-fz-el-tera-sG{font-size:4em;line-height:.375}.-fz-el-peta-sG{font-size:6em;line-height:.25}}@media screen and (min-width:75em){.-fz-el-micr-sT{font-size:.5em;line-height:3}.-fz-el-mill-sT{font-size:.75em;line-height:2}.-fz-el-norm-sT{font-size:1em;line-height:1.5}.-fz-el-kilo-sT{font-size:1.5em;line-height:1}.-fz-el-mega-sT{font-size:2em;line-height:.75}.-fz-el-giga-sT{font-size:3em;line-height:.5}.-fz-el-tera-sT{font-size:4em;line-height:.375}.-fz-el-peta-sT{font-size:6em;line-height:.25}}@media screen and (min-width:90em){.-fz-el-micr-sP{font-size:.5em;line-height:3}.-fz-el-mill-sP{font-size:.75em;line-height:2}.-fz-el-norm-sP{font-size:1em;line-height:1.5}.-fz-el-kilo-sP{font-size:1.5em;line-height:1}.-fz-el-mega-sP{font-size:2em;line-height:.75}.-fz-el-giga-sP{font-size:3em;line-height:.5}.-fz-el-tera-sP{font-size:4em;line-height:.375}.-fz-el-peta-sP{font-size:6em;line-height:.25}} \ No newline at end of file +body,mark{color:#000}a,abbr[title],del,ins,s,u{text-decoration:none}progress,sub,sup{vertical-align:baseline}audio:not([controls]),hr{height:0;display:none}[hidden],hr,template{display:none}button,hr,input{overflow:visible}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend,ol,td,th,ul{padding:0}body,pre,table{text-align:left}caption,th{text-align:center}img,legend,table{max-width:100%}pre,textarea{overflow:auto}.o-List,ol,ul{list-style:none}body{background:#fff}blockquote,body,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,ul{margin:0}address,b,cite,code,dfn,em,h1,h2,h3,h4,h5,h6,i,kbd,pre,samp,small,strong,sub,sup,th,var{font:inherit}mark{background:#ff0}ol,ul{padding:0 0 0 4rem}/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#00e}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;cursor:help}h1{margin:.67em 0}sub,sup{line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace}figure{margin:0 0 1em}hr{box-sizing:content-box}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px}legend{color:inherit;display:table;white-space:normal}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}h1,h3{line-height:1}h2,h4,html{line-height:1.5}b,dfn,h1,h2,h3,h4,h5,h6,strong,th{font-weight:700}*,::after,::before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:0 solid;content:' ';content:'';content:none}html{font-size:100%;font-size:16px}blockquote,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,ol,p,pre,table,ul{margin-bottom:1.5rem}h1{padding-top:1.5rem;font-size:3em;margin-top:0}abbr,b,br,cite,code,data,dfn,em,i,kbd,mark,q,s,samp,small,span,strong,sub,sup,time,u,var{line-height:0}a,del,ins{display:contents}h2{font-size:2em}h3{font-size:1.5em}h4{font-size:1em}h5,input:not([type=button]):not([type=reset]):not([type=submit]),textarea{font-size:.75em;line-height:2}h6{font-size:.5em;line-height:3}code,kbd,pre,samp,small,sub,sup{font-size:.75em}pre{line-height:2;text-indent:0;white-space:pre}dd>dl,dd>ol,dd>ul,dt>dl,dt>ol,dt>ul,li>dl,li>ol,li>ul{margin-bottom:0}dd>ol,dd>ul,dt>ol,dt>ul,li>ol,li>ul{padding-left:2rem}ol{list-style-type:decimal}ul{list-style-type:disc}table{border-collapse:collapse}tfoot,thead{vertical-align:bottom}tbody{vertical-align:top}cite,em,i,var{font-style:italic}u{text-decoration:underline;color:#080}s{text-decoration:line-through;color:#b00}ins{background:#a6f3a6}del{background:#f8cbcb}dfn{font-style:inherit}q{quotes:'\201c' '\201d';quotes:initial}q::before{content:open-quote}q::after{content:close-quote}code,kbd,samp{white-space:nowrap}code code,code kbd,code samp,kbd code,kbd kbd,kbd samp,samp code,samp kbd,samp samp{font-size:inherit}img{border-style:none;width:auto;height:auto;font-style:italic;vertical-align:middle}button,fieldset,input,select,textarea{border-width:1px;margin-top:-2px;border-style:solid;border-color:silver;border-color:rgba(0,0,0,.25)}fieldset{padding:0 1rem;margin-left:0;margin-right:0}button,input,select,textarea{padding:0 .25rem}textarea{width:30rem;height:9rem;line-height:1.5}.h-Block,.o-Flex,.o-Grid{line-height:inherit}button,input[type=button],input[type=reset],input[type=submit]{background-color:silver;background-color:rgba(0,0,0,.25)}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.o-List{padding-left:0}.o-Flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}@media screen{a:not([href]){opacity:.5}.o-List-s{padding-left:0;list-style:none}.o-Flex-s{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-s{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media print{*,::after,::before{background:0 0!important;box-shadow:none!important;text-shadow:none!important}.o-List-p{padding-left:0;list-style:none}.o-Flex-p{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-p{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media screen and (min-width:30em){.o-List-sK{padding-left:0;list-style:none}.o-Flex-sK{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sK{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media screen and (min-width:45em){.o-List-sM{padding-left:0;list-style:none}.o-Flex-sM{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sM{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media screen and (min-width:60em){.o-List-sG{padding-left:0;list-style:none}.o-Flex-sG{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sG{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media screen and (min-width:75em){.o-List-sT{padding-left:0;list-style:none}.o-Flex-sT{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sT{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media screen and (min-width:90em){.o-List-sP{padding-left:0;list-style:none}.o-Flex-sP{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sP{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}.o-Grid{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}@media screen{.o-Grid-s{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-s{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media print{.o-Grid-p{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-p{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:30em){.o-Grid-sK{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sK{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:45em){.o-Grid-sM{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sM{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:60em){.o-Grid-sG{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sG{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:75em){.o-Grid-sT{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sT{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:90em){.o-Grid-sP{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sP{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}.h-Block-sP{display:block;line-height:inherit}}.h-Block{display:block}@media screen{.h-Block-s{display:block;line-height:inherit}}@media print{.h-Block-p{display:block;line-height:inherit}}@media screen and (min-width:30em){.h-Block-sK{display:block;line-height:inherit}}@media screen and (min-width:45em){.h-Block-sM{display:block;line-height:inherit}}@media screen and (min-width:60em){.h-Block-sG{display:block;line-height:inherit}}@media screen and (min-width:75em){.h-Block-sT{display:block;line-height:inherit}.h-Inline-sT{display:inline;line-height:0}}.h-Inline{display:inline;line-height:0}@media screen{.h-Inline-s{display:inline;line-height:0}}@media print{.h-Inline-p{display:inline;line-height:0}}@media screen and (min-width:30em){.h-Inline-sK{display:inline;line-height:0}}@media screen and (min-width:45em){.h-Inline-sM{display:inline;line-height:0}}@media screen and (min-width:60em){.h-Inline-sG{display:inline;line-height:0}}@media screen and (min-width:90em){.h-Inline-sP{display:inline;line-height:0}.h-Clearfix-sP::after{content:'';display:block;clear:both}}.h-Clearfix::after{content:'';display:block;clear:both}.-mb-1vru{margin-bottom:1.5rem}.-pt-1vru{padding-top:1.5rem}.-fz-micr{font-size:.5em}.-fz-mill{font-size:.75em}.-fz-norm{font-size:1em}.-fz-kilo{font-size:1.5em}.-fz-mega{font-size:2em}.-fz-giga{font-size:3em}.-fz-tera{font-size:4em}.-fz-peta{font-size:6em}@media screen{.h-Clearfix-s::after{content:'';display:block;clear:both}.-mb-1vru-s{margin-bottom:1.5rem}.-pt-1vru-s{padding-top:1.5rem}.-fz-micr-s{font-size:.5em}.-fz-mill-s{font-size:.75em}.-fz-norm-s{font-size:1em}.-fz-kilo-s{font-size:1.5em}.-fz-mega-s{font-size:2em}.-fz-giga-s{font-size:3em}.-fz-tera-s{font-size:4em}.-fz-peta-s{font-size:6em}}@media print{.h-Clearfix-p::after{content:'';display:block;clear:both}.-mb-1vru-p{margin-bottom:1.5rem}.-pt-1vru-p{padding-top:1.5rem}.-fz-micr-p{font-size:.5em}.-fz-mill-p{font-size:.75em}.-fz-norm-p{font-size:1em}.-fz-kilo-p{font-size:1.5em}.-fz-mega-p{font-size:2em}.-fz-giga-p{font-size:3em}.-fz-tera-p{font-size:4em}.-fz-peta-p{font-size:6em}}@media screen and (min-width:30em){.h-Clearfix-sK::after{content:'';display:block;clear:both}.-mb-1vru-sK{margin-bottom:1.5rem}.-pt-1vru-sK{padding-top:1.5rem}.-fz-micr-sK{font-size:.5em}.-fz-mill-sK{font-size:.75em}.-fz-norm-sK{font-size:1em}.-fz-kilo-sK{font-size:1.5em}.-fz-mega-sK{font-size:2em}.-fz-giga-sK{font-size:3em}.-fz-tera-sK{font-size:4em}.-fz-peta-sK{font-size:6em}}@media screen and (min-width:45em){.h-Clearfix-sM::after{content:'';display:block;clear:both}.-mb-1vru-sM{margin-bottom:1.5rem}.-pt-1vru-sM{padding-top:1.5rem}.-fz-micr-sM{font-size:.5em}.-fz-mill-sM{font-size:.75em}.-fz-norm-sM{font-size:1em}.-fz-kilo-sM{font-size:1.5em}.-fz-mega-sM{font-size:2em}.-fz-giga-sM{font-size:3em}.-fz-tera-sM{font-size:4em}.-fz-peta-sM{font-size:6em}}@media screen and (min-width:60em){.h-Clearfix-sG::after{content:'';display:block;clear:both}.-mb-1vru-sG{margin-bottom:1.5rem}.-pt-1vru-sG{padding-top:1.5rem}.-fz-micr-sG{font-size:.5em}.-fz-mill-sG{font-size:.75em}.-fz-norm-sG{font-size:1em}.-fz-kilo-sG{font-size:1.5em}.-fz-mega-sG{font-size:2em}.-fz-giga-sG{font-size:3em}.-fz-tera-sG{font-size:4em}.-fz-peta-sG{font-size:6em}}@media screen and (min-width:75em){.h-Clearfix-sT::after{content:'';display:block;clear:both}.-mb-1vru-sT{margin-bottom:1.5rem}.-pt-1vru-sT{padding-top:1.5rem}.-fz-micr-sT{font-size:.5em}.-fz-mill-sT{font-size:.75em}.-fz-norm-sT{font-size:1em}.-fz-kilo-sT{font-size:1.5em}.-fz-mega-sT{font-size:2em}.-fz-giga-sT{font-size:3em}.-fz-tera-sT{font-size:4em}.-fz-peta-sT{font-size:6em}}@media screen and (min-width:90em){.-mb-1vru-sP{margin-bottom:1.5rem}.-pt-1vru-sP{padding-top:1.5rem}.-fz-micr-sP{font-size:.5em}.-fz-mill-sP{font-size:.75em}.-fz-norm-sP{font-size:1em}.-fz-kilo-sP{font-size:1.5em}.-fz-mega-sP{font-size:2em}.-fz-giga-sP{font-size:3em}.-fz-tera-sP{font-size:4em}.-fz-peta-sP{font-size:6em}}.-fz-el-micr{font-size:.5em;line-height:3}.-fz-el-mill{font-size:.75em;line-height:2}.-fz-el-norm{font-size:1em;line-height:1.5}.-fz-el-kilo{font-size:1.5em;line-height:1}.-fz-el-mega{font-size:2em;line-height:1.5}.-fz-el-giga{font-size:3em;line-height:1}.-fz-el-tera{font-size:4em;line-height:1.125}.-fz-el-peta{font-size:6em;line-height:1}@media screen{.-fz-el-micr-s{font-size:.5em;line-height:3}.-fz-el-mill-s{font-size:.75em;line-height:2}.-fz-el-norm-s{font-size:1em;line-height:1.5}.-fz-el-kilo-s{font-size:1.5em;line-height:1}.-fz-el-mega-s{font-size:2em;line-height:1.5}.-fz-el-giga-s{font-size:3em;line-height:1}.-fz-el-tera-s{font-size:4em;line-height:1.125}.-fz-el-peta-s{font-size:6em;line-height:1}}@media print{.-fz-el-micr-p{font-size:.5em;line-height:3}.-fz-el-mill-p{font-size:.75em;line-height:2}.-fz-el-norm-p{font-size:1em;line-height:1.5}.-fz-el-kilo-p{font-size:1.5em;line-height:1}.-fz-el-mega-p{font-size:2em;line-height:1.5}.-fz-el-giga-p{font-size:3em;line-height:1}.-fz-el-tera-p{font-size:4em;line-height:1.125}.-fz-el-peta-p{font-size:6em;line-height:1}}@media screen and (min-width:30em){.-fz-el-micr-sK{font-size:.5em;line-height:3}.-fz-el-mill-sK{font-size:.75em;line-height:2}.-fz-el-norm-sK{font-size:1em;line-height:1.5}.-fz-el-kilo-sK{font-size:1.5em;line-height:1}.-fz-el-mega-sK{font-size:2em;line-height:1.5}.-fz-el-giga-sK{font-size:3em;line-height:1}.-fz-el-tera-sK{font-size:4em;line-height:1.125}.-fz-el-peta-sK{font-size:6em;line-height:1}}@media screen and (min-width:45em){.-fz-el-micr-sM{font-size:.5em;line-height:3}.-fz-el-mill-sM{font-size:.75em;line-height:2}.-fz-el-norm-sM{font-size:1em;line-height:1.5}.-fz-el-kilo-sM{font-size:1.5em;line-height:1}.-fz-el-mega-sM{font-size:2em;line-height:1.5}.-fz-el-giga-sM{font-size:3em;line-height:1}.-fz-el-tera-sM{font-size:4em;line-height:1.125}.-fz-el-peta-sM{font-size:6em;line-height:1}}@media screen and (min-width:60em){.-fz-el-micr-sG{font-size:.5em;line-height:3}.-fz-el-mill-sG{font-size:.75em;line-height:2}.-fz-el-norm-sG{font-size:1em;line-height:1.5}.-fz-el-kilo-sG{font-size:1.5em;line-height:1}.-fz-el-mega-sG{font-size:2em;line-height:1.5}.-fz-el-giga-sG{font-size:3em;line-height:1}.-fz-el-tera-sG{font-size:4em;line-height:1.125}.-fz-el-peta-sG{font-size:6em;line-height:1}}@media screen and (min-width:75em){.-fz-el-micr-sT{font-size:.5em;line-height:3}.-fz-el-mill-sT{font-size:.75em;line-height:2}.-fz-el-norm-sT{font-size:1em;line-height:1.5}.-fz-el-kilo-sT{font-size:1.5em;line-height:1}.-fz-el-mega-sT{font-size:2em;line-height:1.5}.-fz-el-giga-sT{font-size:3em;line-height:1}.-fz-el-tera-sT{font-size:4em;line-height:1.125}.-fz-el-peta-sT{font-size:6em;line-height:1}}@media screen and (min-width:90em){.-fz-el-micr-sP{font-size:.5em;line-height:3}.-fz-el-mill-sP{font-size:.75em;line-height:2}.-fz-el-norm-sP{font-size:1em;line-height:1.5}.-fz-el-kilo-sP{font-size:1.5em;line-height:1}.-fz-el-mega-sP{font-size:2em;line-height:1.5}.-fz-el-giga-sP{font-size:3em;line-height:1}.-fz-el-tera-sP{font-size:4em;line-height:1.125}.-fz-el-peta-sP{font-size:6em;line-height:1}} \ No newline at end of file