From 5249811591ee09a0a1847ff860f14c01e7fa307d Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Sat, 16 Jan 2016 23:26:35 -0500 Subject: [PATCH 01/31] remove vars: fractions, sol/lun colors; rename hn size vars --- README.md | 13 +------ src/__settings.less | 87 --------------------------------------------- 2 files changed, 1 insertion(+), 99 deletions(-) diff --git a/README.md b/README.md index 57c199c..5ed568f 100644 --- a/README.md +++ b/README.md @@ -55,7 +55,7 @@ at the top of your stylesheet. Then when you want to “call” the mixin, do } ``` -To use the xmeter variables and constants, +To use the xmeter variables, ```less @import (reference) url('/node_modules/xmeter/src/__settings.less'); @@ -64,19 +64,8 @@ To use the xmeter variables and constants, #XMETER .VARS(); // invokes the set of variables line-height: 2 * @xmeter_line_height; } -.my-other-selector { - #XMETER .CONSTS(); // invokes the set of constants - width: @1o2; -} ``` -The difference between **variables** and **constants** is that values are reflected in -the names of constants but not variables. For example, `@xmeter_line_height` so happens to be 1.5. -This value may change in the future (though it probably won’t), but the variable name need not change. -This merely indicates the line height has been changed. -On the other hand, `@1o2` is a constant whose value is 50%. It would be silly to change this value -for obvious reasons. - #### Using the Base Also in the `src/` folder are a set of files starting with `_base`. These files, diff --git a/src/__settings.less b/src/__settings.less index a076923..a672999 100644 --- a/src/__settings.less +++ b/src/__settings.less @@ -24,92 +24,5 @@ @xmeter_font_size_h4: 16/16; // 1.000 @xmeter_font_size_h5: 14/16; // 0.875 @xmeter_font_size_h6: 12/16; // 0.750 - - // TODO: remove these on next major release - @h1_font_size: @xmeter_font_size_h1; - @h2_font_size: @xmeter_font_size_h2; - @h3_font_size: @xmeter_font_size_h3; - @h4_font_size: @xmeter_font_size_h4; - @h5_font_size: @xmeter_font_size_h5; - @h6_font_size: @xmeter_font_size_h6; - } - .CONSTS() { - // fractional percentages used for anything, usually widths - // TODO remove all of these variables on next major release, - // unless there is any reason to keep them. - @1o1: (100% * (1/1)); @1o9: (100% * (1/9)); - @2o9: (100% * (2/9)); - @1o2: (100% * (1/2)); @3o9: (100% * (3/9)); - @2o2: (100% * (2/2)); @4o9: (100% * (4/9)); - @5o9: (100% * (5/9)); - @1o3: (100% * (1/3)); @6o9: (100% * (6/9)); - @2o3: (100% * (2/3)); @7o9: (100% * (7/9)); - @3o3: (100% * (3/3)); @8o9: (100% * (8/9)); - @9o9: (100% * (9/9)); - @1o4: (100% * (1/4)); - @2o4: (100% * (2/4)); @1o10: (100% * ( 1/10)); - @3o4: (100% * (3/4)); @2o10: (100% * ( 2/10)); - @4o4: (100% * (4/4)); @3o10: (100% * ( 3/10)); - @4o10: (100% * ( 4/10)); - @1o5: (100% * (1/5)); @5o10: (100% * ( 5/10)); - @2o5: (100% * (2/5)); @6o10: (100% * ( 6/10)); - @3o5: (100% * (3/5)); @7o10: (100% * ( 7/10)); - @4o5: (100% * (4/5)); @8o10: (100% * ( 8/10)); - @5o5: (100% * (5/5)); @9o10: (100% * ( 9/10)); - @10o10: (100% * (10/10)); - @1o6: (100% * (1/6)); - @2o6: (100% * (2/6)); @1o12: (100% * ( 1/12)); - @3o6: (100% * (3/6)); @2o12: (100% * ( 2/12)); - @4o6: (100% * (4/6)); @3o12: (100% * ( 3/12)); - @5o6: (100% * (5/6)); @4o12: (100% * ( 4/12)); - @6o6: (100% * (6/6)); @5o12: (100% * ( 5/12)); - @6o12: (100% * ( 6/12)); - @1o8: (100% * (1/8)); @7o12: (100% * ( 7/12)); - @2o8: (100% * (2/8)); @8o12: (100% * ( 8/12)); - @3o8: (100% * (3/8)); @9o12: (100% * ( 9/12)); - @4o8: (100% * (4/8)); @10o12: (100% * (10/12)); - @5o8: (100% * (5/8)); @11o12: (100% * (11/12)); - @6o8: (100% * (6/8)); @12o12: (100% * (12/12)); - @7o8: (100% * (7/8)); - @8o8: (100% * (8/8)); - - // ---- Solarized Colors ---- - // Solarized Bases - @solar_base03: #002b36; - @solar_base02: #073642; - @solar_base01: #586e75; - @solar_base00: #657b83; - @solar_base0: #839496; - @solar_base1: #93a1a1; - @solar_base2: #eee8d5; - @solar_base3: #fdf6e3; - // Solarized Accents - @solar_red: #dc322f; - @solar_orange: #cb4b16; - @solar_yellow: #b58900; - @solar_green: #859900; - @solar_cyan: #2aa198; - @solar_blue: #268bd2; - @solar_violet: #6c71c4; - @solar_magenta: #d33682; - // ---- Lunarized Colors ---- - // Lunarized Bases -- Inverses of Solarized Bases - @lunar_base03: spin(@solar_base03, 180); // #360b00 - @lunar_base02: spin(@solar_base02, 180); // #421307 - @lunar_base01: spin(@solar_base01, 180); // #755f58 - @lunar_base00: spin(@solar_base00, 180); // #836d65 - @lunar_base0: spin(@solar_base0, 180); // #968583 - @lunar_base1: spin(@solar_base1, 180); // #a19393 - @lunar_base2: spin(@solar_base2, 180); // #d5dbee - @lunar_base3: spin(@solar_base3, 180); // #e3eafd - // Lunarized Accents -- Complements of Solarized Accents - @lunar_cyan: rgb(255-red(@solar_red ), 255-green(@solar_red ), 255-blue(@solar_red )); // #23cdd0 - @lunar_blue: rgb(255-red(@solar_orange ), 255-green(@solar_orange ), 255-blue(@solar_orange )); // #34b4e9 - @lunar_indigo: rgb(255-red(@solar_yellow ), 255-green(@solar_yellow ), 255-blue(@solar_yellow )); // #4a76ff - @lunar_violet: rgb(255-red(@solar_green ), 255-green(@solar_green ), 255-blue(@solar_green )); // #7a66ff - @lunar_red: rgb(255-red(@solar_cyan ), 255-green(@solar_cyan ), 255-blue(@solar_cyan )); // #d55e67 - @lunar_orange: rgb(255-red(@solar_blue ), 255-green(@solar_blue ), 255-blue(@solar_blue )); // #d9742d - @lunar_yellow: rgb(255-red(@solar_violet ), 255-green(@solar_violet ), 255-blue(@solar_violet )); // #938e3b - @lunar_green: rgb(255-red(@solar_magenta), 255-green(@solar_magenta), 255-blue(@solar_magenta)); // #2cc97d } } From 7c0580eefeed3a9dceace86e47100ef98b692040 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Tue, 16 Feb 2016 15:41:18 -0500 Subject: [PATCH 02/31] rewrite test.jade --- src/_base.text.less | 3 +- test.jade | 511 ++++++++++++++++++++++---------------------- 2 files changed, 254 insertions(+), 260 deletions(-) diff --git a/src/_base.text.less b/src/_base.text.less index 6387cea..07d2f65 100644 --- a/src/_base.text.less +++ b/src/_base.text.less @@ -6,7 +6,6 @@ // RECOMMENDATION: // Do not use `br` to indicate line breaks, use CSS instead. -// One exception: MAY use `address > br` to indicate line breaks (by convention), but -// PREFERRED method is to use `address > ol` and use CSS to remove item markers +// One exception: MAY use `address > br` to indicate line breaks (by convention) br { } diff --git a/test.jade b/test.jade index 91e6911..a1587ba 100644 --- a/test.jade +++ b/test.jade @@ -1,9 +1,9 @@ doctype html -html(lang="en", xmlns="http://www.w3.org/1999/xhtml") +html(lang="en") head - meta(charset="UTF-8") - meta(name="description", content="A test of bare, unclassed elements.") - title xmeter.css Test + title Base Styles | Xmeter + meta(charset="utf-8") + meta(name="description" content="A test of bare, unclassed elements.") link(rel="stylesheet", href="xmeter.css") //- link(rel="stylesheet", href="xmeter.min.css") style. @@ -13,257 +13,252 @@ html(lang="en", xmlns="http://www.w3.org/1999/xhtml") background-repeat: repeat; background-position: left bottom; } - p[lang="la"] { - font-style:italic; - font-family:serif; - } - body This is the body element. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines. - section. - This is a section element. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - article. - This is an article element. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - aside. - This is an aside element. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - nav. - This is a nav element. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - main. - This is the main element. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - header. - This is a header element. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - footer. - This is a footer element. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - h1 Heading 1 - p(lang="la"). - 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. - h2 Heading 2 - p(lang="la"). - 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. - h3 Heading 3 - p(lang="la"). - 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. - h4 Heading 4 - p(lang="la"). - 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. - h5 Heading 5 - p(lang="la"). - 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. - h6 Heading 6 - p(lang="la"). - 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. - hgroup - h4 This is an hgroup element. It contains only headings: - h1 Heading 1 - h2 Heading 2 - h3 Heading 3 - h4 Heading 4 - h5 Heading 5 - h6 Heading 6 - address. - This is an address element.
- Line breaks are conventionally indicated by br elements,
- but ol elements are preferred:
- (remove styling if need be) -
    -
  1. 12345 United Ave
    2. -
  2. Washington, DC 00000
    3. -
- The following is an hr element: - hr - div. - This is a div. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - p. - This is a p element. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - figure This is a figure. - figcaption This is a figcaption within the same figure. - blockquote This is a blockquote. - pre This is a pre element. It contains a lot of text. It contains a lot of text. It contains a lot of text. It contains a lot of text. It contains a lot of text. It contains a lot of text. It contains a lot of text. It contains a lot of text. - ol - li li within an ol - li li within the same ol - li li within the same ol - ul - li li within a ul - li li within the same ul - li li within the same ul - dl - dt dt within a dl - dd dd within the same dl - dt another dt within the same dl - dd another dd within the same dl - table - caption table caption - // note: thead and tfoot should be marked up before tbody - thead - tr - th thead th | - th | thead th - tr - td thead td | - td | thead td - tfoot - tr - th tfoot th | - th | tfoot th - tr - td tfoot td | - td | tfoot td - tbody - tr - th tbody th | - th | tbody th - tr - td tbody td | - td | tbody td - div a br is below: - br - a a - a(href="www") a[href] - em em - strong strong - i i - mark mark - u u - small small - s s - ins ins - del del - dfn dfn - b b - var var - q q - cite cite - sup sup - sub sub - abbr abbr - abbr(title="www") abbr[title] - data data - time time - code code - kbd kbd - kbd: kbd kbd > kbd - samp samp + body + main + header + h1 Xmeter — Base Typography + nav#table-contents + h2 Table of Contents + ol + li: a(href="#table-contents") Table of Contents + li: a(href="#headings-paragraphs") Headings & Paragraphs + li: a(href="#lists") Lists + li: a(href="#tables") Tables + li + a(href="#text-level-elements") Text-Level Elements + ol + li: a(href="#links") Links + li: a(href="#stress") Stress + li: a(href="#documentation") Documentation + li: a(href="#data") Data + li: a(href="#embedded-elements") Embedded Elements + li: a(href="#interactive-elements") Interactive Elements + section#headings-paragraphs + h2 Headings & Paragraphs + figure.sg-fig + h1 Heading 1 #[code.sg-code h1] + p. + Paragraph #[code.sg-code 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. + h2 Heading 2 #[code.sg-code h2] + p. + Paragraph #[code.sg-code 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. + h3 Heading 3 #[code.sg-code h3] + p. + Paragraph #[code.sg-code 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. + h4 Heading 4 #[code.sg-code h4] + p. + Paragraph #[code.sg-code 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. + h5 Heading 5 #[code.sg-code h5] + p. + Paragraph #[code.sg-code 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. + h6 Heading 6 #[code.sg-code h6] + p. + Paragraph #[code.sg-code 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. + figure.sg-fig + h1 Lorem Ipsum #[code.sg-code h1] + h2 Lorem Ipsum #[code.sg-code h2] + h3 Lorem Ipsum #[code.sg-code h3] + h4 Lorem Ipsum #[code.sg-code h4] + h5 Lorem Ipsum #[code.sg-code h5] + h6 Lorem Ipsum #[code.sg-code h6] + figure.sg-fig + address. + 12345 #[code address] Ave #[code br]#[br] + Washington, DC 00000 #[code br]#[br] + United States of America + figure.sg-fig + figure Aenean consectetur #[code.sg-code figure] suscipit urna, non vehicula lacus blandit et. + figcaption Integer at lacus et diam tristique #[code.sg-code figure] #[code.sg-code figcaption] suscipit. + figure.sg-fig + blockquote Donec #[code.sg-code blockquote] vel dolor ut felis dapibus ultricies vitae a nibh. + figure.sg-fig + pre. + Pellentesque #[code.sg-code 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; }) + }; + } + } + //- figure.sg-fig + figcaption. + A horizontal rule #[code.sg-code hr] is shown below. I’m honestly not sure when + you would ever use this instead of a CSS border. + hr + section#lists + h2 Lists + figure.sg-fig + figcaption Ordered List #[code.sg-code ol] + ol + li List item #[code.sg-code li] + li List item #[code.sg-code li] + ol + li Nested list item + li Nested list item + ol + li Another nested list item + li Another nested list item + figure.sg-fig + figcaption Unrdered List #[code.sg-code ul] + ul + li List item #[code.sg-code li] + li List item #[code.sg-code li] + ul + li Nested list item + li Nested list item + ul + li Another nested list item + li Another nested list item + figure.sg-fig + figcaption Dictionary List #[code.sg-code dl] + dl + dt key #[code.sg-code dt] + dd value #[code.sg-code dd] + dt + ul + li 1st key + li 2nd key + dd value + dt key + dd + ul + li 1st value + li 2nd value + section#tables + h2 Tables + figure.sg-fig + table + caption #[code table] #[code caption] + thead + tr + th(scope="col") #[code thead]er #[code tr]ow 1 #[code th]eading 1 + th(scope="col") #[code thead]er #[code tr]ow 1 #[code th]eading 2 + th(scope="col") #[code thead]er #[code tr]ow 1 #[code th]eading 3 + tfoot + tr + td #[code tfoot]er #[code tr]ow 1 #[code td]ata 1 + td #[code tfoot]er #[code tr]ow 1 #[code td]ata 2 + td #[code tfoot]er #[code tr]ow 1 #[code td]ata 3 + tr + td #[code tfoot]er #[code tr]ow 2 #[code td]ata 1 + td #[code tfoot]er #[code tr]ow 2 #[code td]ata 2 + td #[code tfoot]er #[code tr]ow 2 #[code td]ata 3 + tbody + tr + td #[code tbody] #[code tr]ow 1 #[code td]ata 1 + td #[code tbody] #[code tr]ow 1 #[code td]ata 2 + td #[code tbody] #[code tr]ow 1 #[code td]ata 3 + tr + td #[code tbody] #[code tr]ow 2 #[code td]ata 1 + td #[code tbody] #[code tr]ow 2 #[code td]ata 2 + td #[code tbody] #[code tr]ow 2 #[code td]ata 3 + tr + td #[code tbody] #[code tr]ow 3 #[code td]ata 1 + td #[code tbody] #[code tr]ow 3 #[code td]ata 2 + td #[code tbody] #[code tr]ow 3 #[code td]ata 3 + section#text-level-elements + h2 Text-Level Elements + section#links + h3 Links + figure.sg-fig: ul + li: a a + li: a(href) a[href] + section#stress + h3 Stress + figure.sg-fig: ul + li: em emphasized text #[code.sg-code em] + li: strong important text #[code.sg-code strong] + li: i alternate voice/mood (scare quotes, mentioning words, foreign expressions) #[code.sg-code i] + li: mark relevant in some context #[code.sg-code mark] + li: u unarticulated annotation #[code.sg-code u] + li: small side comment #[code.sg-code small] + li: s text shown to be no longer relevant #[code.sg-code s] + section#documentation + h3 Documentation + figure.sg-fig: ul + li: ins content shown to be inserted into a document #[code.sg-code ins] + li: del content shown to be deleted from a document #[code.sg-code del] + li: dfn definining instance of a term #[code.sg-code dfn] + li: b keyword or technical term #[code.sg-code b] + li: var variable #[code.sg-code var] + li: q quoted material #[code.sg-code q] + li: cite reference to a work, some part of a work, or the creator of a work #[code.sg-code cite] + li: sup superscript #[code.sg-code sup] + li: sub subscript #[code.sg-code sub] + section#data + h3 Data + figure.sg-fig: ul + li: abbr(title) abbreviation or acronym #[code.sg-code abbr[title]] + li: time a specific date or time #[code.sg-code time] + li: data generic machine-readable data #[code.sg-code data] + li: code a fragment of code #[code.sg-code code] + li: kbd user input #[code kbd] + li: kbd: kbd a button or key on a physical device #[code kbd > kbd] + li: samp sample computer output #[code samp] + section#embedded-elements + h2 Embedded Elements + section#interactive-elements + h2 Interactive Elements From 7d26f86b9074e53702ae028c6d9b555436d80f52 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Thu, 18 Feb 2016 13:44:16 -0500 Subject: [PATCH 03/31] use template for test page --- base-tpl.jade | 268 +++++++++++++++++++++++++++++++++++++++++++++ test.jade | 294 ++++++-------------------------------------------- 2 files changed, 298 insertions(+), 264 deletions(-) create mode 100644 base-tpl.jade diff --git a/base-tpl.jade b/base-tpl.jade new file mode 100644 index 0000000..6fb5867 --- /dev/null +++ b/base-tpl.jade @@ -0,0 +1,268 @@ +doctype html +html(lang="en") + block vars + - var project = '' + - var classnames = {}; + head + title Base Styles | #{project} + meta(charset="utf-8") + meta(name="description" content="A test of bare, unclassed elements.") + link(rel="stylesheet" href="xmeter.min.css") + block style + body + main + header + h1 #{project} — Base Typography + nav#table-contents + h2 Table of Contents + ol + li: a(href="#table-contents") Table of Contents + li: a(href="#headings-paragraphs") Headings & Paragraphs + li: a(href="#lists") Lists + li: a(href="#tables") Tables + li + a(href="#text-level-elements") Text-Level Elements + ol + li: a(href="#links") Links + li: a(href="#stress") Stress + li: a(href="#documentation") Documentation + li: a(href="#data") Data + li: a(href="#embedded-elements") Embedded Elements + li: a(href="#interactive-elements") Interactive Elements + section#headings-paragraphs + h2 Headings & Paragraphs + block headings-paragraphs + figure(class=classnames.figure) + h1 Heading 1 #[code(class=classnames.code) h1] + p. + Paragraph #[code(class=classnames.code) 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. + h2 Heading 2 #[code(class=classnames.code) h2] + p. + Paragraph #[code(class=classnames.code) 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. + h3 Heading 3 #[code(class=classnames.code) h3] + p. + Paragraph #[code(class=classnames.code) 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. + h4 Heading 4 #[code(class=classnames.code) h4] + p. + Paragraph #[code(class=classnames.code) 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. + h5 Heading 5 #[code(class=classnames.code) h5] + p. + Paragraph #[code(class=classnames.code) 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. + h6 Heading 6 #[code(class=classnames.code) h6] + p. + Paragraph #[code(class=classnames.code) 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. + figure(class=classnames.figure) + h1 Lorem Ipsum #[code(class=classnames.code) h1] + h2 Lorem Ipsum #[code(class=classnames.code) h2] + h3 Lorem Ipsum #[code(class=classnames.code) h3] + h4 Lorem Ipsum #[code(class=classnames.code) h4] + h5 Lorem Ipsum #[code(class=classnames.code) h5] + h6 Lorem Ipsum #[code(class=classnames.code) h6] + figure(class=classnames.figure) + address. + 12345 #[code(class=classnames.code) address] Ave #[code(class=classnames.code) br]#[br] + Washington, DC 00000 #[code(class=classnames.code) br]#[br] + United States of America + figure(class=classnames.figure) + figure Aenean consectetur #[code(class=classnames.code) figure] suscipit urna, non vehicula lacus blandit et. + figcaption Integer at lacus et diam tristique #[code(class=classnames.code) figure] #[code(class=classnames.code) figcaption] suscipit. + figure(class=classnames.figure) + blockquote Donec #[code(class=classnames.code) blockquote] vel dolor ut felis dapibus ultricies vitae a nibh. + figure(class=classnames.figure) + pre. + Pellentesque #[code(class=classnames.code) 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; }) + }; + } + } + //- figure(class=classnames.figure) + figcaption. + A horizontal rule #[code(class=classnames.code) hr] is shown below. I’m honestly not sure when + you would ever use this instead of a CSS border. + hr + section#lists + h2 Lists + block lists + figure(class=classnames.figure) + figcaption Ordered List #[code(class=classnames.code) ol] + ol + li List item #[code(class=classnames.code) li] + li List item #[code(class=classnames.code) li] + ol + li Nested list item + li Nested list item + ol + li Another nested list item + li Another nested list item + figure(class=classnames.figure) + figcaption Unrdered List #[code(class=classnames.code) ul] + ul + li List item #[code(class=classnames.code) li] + li List item #[code(class=classnames.code) li] + ul + li Nested list item + li Nested list item + ul + li Another nested list item + li Another nested list item + figure(class=classnames.figure) + figcaption Dictionary List #[code(class=classnames.code) dl] + dl + dt key #[code(class=classnames.code) dt] + dd value #[code(class=classnames.code) dd] + dt + ul + li 1st key + li 2nd key + dd value + dt key + dd + ul + li 1st value + li 2nd value + section#tables + h2 Tables + block tables + figure(class=classnames.figure) + table + caption #[code(class=classnames.code) table] #[code(class=classnames.code) caption] + thead + mixin tableheaderrows(rows, cols) + - for (var i = 0; i < rows; i++) + tr + - for (var j = 0; j < cols; j++) + th(scope="col") #[code(class=classnames.code) thead]er #[code(class=classnames.code) tr]ow #{i+1} #[code(class=classnames.code) th]eading #{j+1} + +tableheaderrows(1,3) + tfoot + mixin tablefooterrows(rows, cols) + - for (var i = 0; i < rows; i++) + tr + - for (var j = 0; j < cols; j++) + td #[code(class=classnames.code) tfoot]er #[code(class=classnames.code) tr]ow #{i+1} #[code(class=classnames.code) td]ata #{j+1} + +tablefooterrows(2,3) + tbody + mixin tablebodyrows(rows, cols) + - for (var i = 0; i < rows; i++) + tr + - for (var j = 0; j < cols; j++) + td #[code(class=classnames.code) tbody] #[code(class=classnames.code) tr]ow #{i+1} #[code(class=classnames.code) td]ata #{j+1} + +tablebodyrows(3,3) + section#text-level-elements + h2 Text-Level Elements + block text-level-elements + section#links + h3 Links + block links + figure(class=classnames.figure): ul + block links__list + li: a a + li: a(href) a[href] + section#stress + h3 Stress + block stress + figure(class=classnames.figure): ul + block stress__list + li: em emphasized text #[code(class=classnames.code) em] + li: strong important text #[code(class=classnames.code) strong] + li: i alternate voice/mood (scare quotes, mentioning words, foreign expressions) #[code(class=classnames.code) i] + li: mark relevant in some context #[code(class=classnames.code) mark] + li: u unarticulated annotation #[code(class=classnames.code) u] + li: small side comment #[code(class=classnames.code) small] + li: s text shown to be no longer relevant #[code(class=classnames.code) s] + section#documentation + h3 Documentation + block documentation + figure(class=classnames.figure): ul + block documentation__list + li: ins content shown to be inserted into a document #[code(class=classnames.code) ins] + li: del content shown to be deleted from a document #[code(class=classnames.code) del] + li: dfn definining instance of a term #[code(class=classnames.code) dfn] + li: b keyword or technical term #[code(class=classnames.code) b] + li: var variable #[code(class=classnames.code) var] + li: q quoted material #[code(class=classnames.code) q] + li: cite reference to a work, some part of a work, or the creator of a work #[code(class=classnames.code) cite] + li: sup superscript #[code(class=classnames.code) sup] + li: sub subscript #[code(class=classnames.code) sub] + section#data + h3 Data + block data + figure(class=classnames.figure): ul + block data__list + li: abbr(title) abbreviation or acronym #[code(class=classnames.code) abbr[title]] + li: time a specific date or time #[code(class=classnames.code) time] + li: data generic machine-readable data #[code(class=classnames.code) data] + li: code a fragment of code(class=classnames.code) #[code(class=classnames.code) code] + li: kbd user input #[code(class=classnames.code) kbd] + li: kbd: kbd a button or key on a physical device #[code(class=classnames.code) kbd > kbd] + li: samp sample computer output #[code(class=classnames.code) samp] + section#embedded-elements + h2 Embedded Elements + block embedded-elements + section#interactive-elements + h2 Interactive Elements + block interactive-elements diff --git a/test.jade b/test.jade index a1587ba..b898595 100644 --- a/test.jade +++ b/test.jade @@ -1,264 +1,30 @@ -doctype html -html(lang="en") - head - title Base Styles | Xmeter - meta(charset="utf-8") - meta(name="description" content="A test of bare, unclassed elements.") - link(rel="stylesheet", href="xmeter.css") - //- link(rel="stylesheet", href="xmeter.min.css") - style. - body { - background-image: url('https://chharvey.github.io/core/images/crossgrid-lined.svg'); - background-size: 1px 24px; - background-repeat: repeat; - background-position: left bottom; - } - body - main - header - h1 Xmeter — Base Typography - nav#table-contents - h2 Table of Contents - ol - li: a(href="#table-contents") Table of Contents - li: a(href="#headings-paragraphs") Headings & Paragraphs - li: a(href="#lists") Lists - li: a(href="#tables") Tables - li - a(href="#text-level-elements") Text-Level Elements - ol - li: a(href="#links") Links - li: a(href="#stress") Stress - li: a(href="#documentation") Documentation - li: a(href="#data") Data - li: a(href="#embedded-elements") Embedded Elements - li: a(href="#interactive-elements") Interactive Elements - section#headings-paragraphs - h2 Headings & Paragraphs - figure.sg-fig - h1 Heading 1 #[code.sg-code h1] - p. - Paragraph #[code.sg-code 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. - h2 Heading 2 #[code.sg-code h2] - p. - Paragraph #[code.sg-code 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. - h3 Heading 3 #[code.sg-code h3] - p. - Paragraph #[code.sg-code 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. - h4 Heading 4 #[code.sg-code h4] - p. - Paragraph #[code.sg-code 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. - h5 Heading 5 #[code.sg-code h5] - p. - Paragraph #[code.sg-code 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. - h6 Heading 6 #[code.sg-code h6] - p. - Paragraph #[code.sg-code 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. - figure.sg-fig - h1 Lorem Ipsum #[code.sg-code h1] - h2 Lorem Ipsum #[code.sg-code h2] - h3 Lorem Ipsum #[code.sg-code h3] - h4 Lorem Ipsum #[code.sg-code h4] - h5 Lorem Ipsum #[code.sg-code h5] - h6 Lorem Ipsum #[code.sg-code h6] - figure.sg-fig - address. - 12345 #[code address] Ave #[code br]#[br] - Washington, DC 00000 #[code br]#[br] - United States of America - figure.sg-fig - figure Aenean consectetur #[code.sg-code figure] suscipit urna, non vehicula lacus blandit et. - figcaption Integer at lacus et diam tristique #[code.sg-code figure] #[code.sg-code figcaption] suscipit. - figure.sg-fig - blockquote Donec #[code.sg-code blockquote] vel dolor ut felis dapibus ultricies vitae a nibh. - figure.sg-fig - pre. - Pellentesque #[code.sg-code 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; }) - }; - } - } - //- figure.sg-fig - figcaption. - A horizontal rule #[code.sg-code hr] is shown below. I’m honestly not sure when - you would ever use this instead of a CSS border. - hr - section#lists - h2 Lists - figure.sg-fig - figcaption Ordered List #[code.sg-code ol] - ol - li List item #[code.sg-code li] - li List item #[code.sg-code li] - ol - li Nested list item - li Nested list item - ol - li Another nested list item - li Another nested list item - figure.sg-fig - figcaption Unrdered List #[code.sg-code ul] - ul - li List item #[code.sg-code li] - li List item #[code.sg-code li] - ul - li Nested list item - li Nested list item - ul - li Another nested list item - li Another nested list item - figure.sg-fig - figcaption Dictionary List #[code.sg-code dl] - dl - dt key #[code.sg-code dt] - dd value #[code.sg-code dd] - dt - ul - li 1st key - li 2nd key - dd value - dt key - dd - ul - li 1st value - li 2nd value - section#tables - h2 Tables - figure.sg-fig - table - caption #[code table] #[code caption] - thead - tr - th(scope="col") #[code thead]er #[code tr]ow 1 #[code th]eading 1 - th(scope="col") #[code thead]er #[code tr]ow 1 #[code th]eading 2 - th(scope="col") #[code thead]er #[code tr]ow 1 #[code th]eading 3 - tfoot - tr - td #[code tfoot]er #[code tr]ow 1 #[code td]ata 1 - td #[code tfoot]er #[code tr]ow 1 #[code td]ata 2 - td #[code tfoot]er #[code tr]ow 1 #[code td]ata 3 - tr - td #[code tfoot]er #[code tr]ow 2 #[code td]ata 1 - td #[code tfoot]er #[code tr]ow 2 #[code td]ata 2 - td #[code tfoot]er #[code tr]ow 2 #[code td]ata 3 - tbody - tr - td #[code tbody] #[code tr]ow 1 #[code td]ata 1 - td #[code tbody] #[code tr]ow 1 #[code td]ata 2 - td #[code tbody] #[code tr]ow 1 #[code td]ata 3 - tr - td #[code tbody] #[code tr]ow 2 #[code td]ata 1 - td #[code tbody] #[code tr]ow 2 #[code td]ata 2 - td #[code tbody] #[code tr]ow 2 #[code td]ata 3 - tr - td #[code tbody] #[code tr]ow 3 #[code td]ata 1 - td #[code tbody] #[code tr]ow 3 #[code td]ata 2 - td #[code tbody] #[code tr]ow 3 #[code td]ata 3 - section#text-level-elements - h2 Text-Level Elements - section#links - h3 Links - figure.sg-fig: ul - li: a a - li: a(href) a[href] - section#stress - h3 Stress - figure.sg-fig: ul - li: em emphasized text #[code.sg-code em] - li: strong important text #[code.sg-code strong] - li: i alternate voice/mood (scare quotes, mentioning words, foreign expressions) #[code.sg-code i] - li: mark relevant in some context #[code.sg-code mark] - li: u unarticulated annotation #[code.sg-code u] - li: small side comment #[code.sg-code small] - li: s text shown to be no longer relevant #[code.sg-code s] - section#documentation - h3 Documentation - figure.sg-fig: ul - li: ins content shown to be inserted into a document #[code.sg-code ins] - li: del content shown to be deleted from a document #[code.sg-code del] - li: dfn definining instance of a term #[code.sg-code dfn] - li: b keyword or technical term #[code.sg-code b] - li: var variable #[code.sg-code var] - li: q quoted material #[code.sg-code q] - li: cite reference to a work, some part of a work, or the creator of a work #[code.sg-code cite] - li: sup superscript #[code.sg-code sup] - li: sub subscript #[code.sg-code sub] - section#data - h3 Data - figure.sg-fig: ul - li: abbr(title) abbreviation or acronym #[code.sg-code abbr[title]] - li: time a specific date or time #[code.sg-code time] - li: data generic machine-readable data #[code.sg-code data] - li: code a fragment of code #[code.sg-code code] - li: kbd user input #[code kbd] - li: kbd: kbd a button or key on a physical device #[code kbd > kbd] - li: samp sample computer output #[code samp] - section#embedded-elements - h2 Embedded Elements - section#interactive-elements - h2 Interactive Elements +extends base-tpl.jade + +block append vars + - project = 'Xmeter' + - classnames.code = 'x-c-Code' + - classnames.figure = 'x-c-Fig' + +block style + style. + body { + background-image: url('https://chharvey.github.io/core/images/crossgrid-lined.svg'); + background-size: 1px 24px; + background-repeat: repeat; + background-position: left bottom; + } + .x-c-Code { + padding: 1px 2px; + border-radius: 3px; + background-color: #f4f8f0; + color: #008080; + } + .x-c-Fig { + margin-left: 1rem; + margin-right: 1rem; + padding: 0.5rem; + border: 1px solid #e5eaef; + border-radius: 8px; + position: relative; + background: rgba(245, 250, 255, 0.5); + } From d3e70dd423d56d133fc8716720dbc497e9dee056 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Thu, 18 Feb 2016 14:59:22 -0500 Subject: [PATCH 04/31] bump vers no --- package.json | 2 +- xmeter.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index ebf0980..bfc21f7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "xmeter", - "version": "3.6.0", + "version": "3.6.1", "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 a4ca67b..43b700a 100644 --- a/xmeter.less +++ b/xmeter.less @@ -1,7 +1,7 @@ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\ xmeter - Version: 3.6.0 + Version: 3.6.1 Licence: MIT Repo : https://github.com/chharvey/xmeter.git Home : https://chharvey.github.io/xmeter/ From 571274c597d80484d319b8c33d1b4ca05cf66bd8 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Thu, 18 Feb 2016 14:59:46 -0500 Subject: [PATCH 05/31] adjust s color --- src/_base.text.stress.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_base.text.stress.less b/src/_base.text.stress.less index 81492c1..64cc721 100644 --- a/src/_base.text.stress.less +++ b/src/_base.text.stress.less @@ -75,5 +75,5 @@ small { // : 2015-02-10 s { text-decoration: line-through; - color: #e00; + color: #b00; } From bb05d2d6db4938e6564fcc8bdac211518c5753f2 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Thu, 18 Feb 2016 14:56:58 -0500 Subject: [PATCH 06/31] update template page --- base-tpl.jade | 520 +++++++++++++++++++++++++------------------------- test.jade | 4 +- 2 files changed, 265 insertions(+), 259 deletions(-) diff --git a/base-tpl.jade b/base-tpl.jade index 6fb5867..c61b011 100644 --- a/base-tpl.jade +++ b/base-tpl.jade @@ -1,268 +1,274 @@ doctype html html(lang="en") block vars - - var project = '' + - var project_names = [] - var classnames = {}; head - title Base Styles | #{project} + - var title = 'Base Typography' + - for (var i = 0; i < project_names.length; i++) title += ' | ' + project_names[project_names.length-i-1] + title= title meta(charset="utf-8") meta(name="description" content="A test of bare, unclassed elements.") - link(rel="stylesheet" href="xmeter.min.css") + meta(name="viewport" content="width=device-width, initial-scale=1") block style + link(rel="stylesheet" href="xmeter.min.css") body - main - header - h1 #{project} — Base Typography - nav#table-contents - h2 Table of Contents - ol - li: a(href="#table-contents") Table of Contents - li: a(href="#headings-paragraphs") Headings & Paragraphs - li: a(href="#lists") Lists - li: a(href="#tables") Tables - li - a(href="#text-level-elements") Text-Level Elements - ol - li: a(href="#links") Links - li: a(href="#stress") Stress - li: a(href="#documentation") Documentation - li: a(href="#data") Data - li: a(href="#embedded-elements") Embedded Elements - li: a(href="#interactive-elements") Interactive Elements - section#headings-paragraphs - h2 Headings & Paragraphs - block headings-paragraphs - figure(class=classnames.figure) - h1 Heading 1 #[code(class=classnames.code) h1] - p. - Paragraph #[code(class=classnames.code) 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. - h2 Heading 2 #[code(class=classnames.code) h2] - p. - Paragraph #[code(class=classnames.code) 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. - h3 Heading 3 #[code(class=classnames.code) h3] - p. - Paragraph #[code(class=classnames.code) 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. - h4 Heading 4 #[code(class=classnames.code) h4] - p. - Paragraph #[code(class=classnames.code) 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. - h5 Heading 5 #[code(class=classnames.code) h5] - p. - Paragraph #[code(class=classnames.code) 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. - h6 Heading 6 #[code(class=classnames.code) h6] - p. - Paragraph #[code(class=classnames.code) 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. - figure(class=classnames.figure) - h1 Lorem Ipsum #[code(class=classnames.code) h1] - h2 Lorem Ipsum #[code(class=classnames.code) h2] - h3 Lorem Ipsum #[code(class=classnames.code) h3] - h4 Lorem Ipsum #[code(class=classnames.code) h4] - h5 Lorem Ipsum #[code(class=classnames.code) h5] - h6 Lorem Ipsum #[code(class=classnames.code) h6] - figure(class=classnames.figure) - address. - 12345 #[code(class=classnames.code) address] Ave #[code(class=classnames.code) br]#[br] - Washington, DC 00000 #[code(class=classnames.code) br]#[br] - United States of America - figure(class=classnames.figure) - figure Aenean consectetur #[code(class=classnames.code) figure] suscipit urna, non vehicula lacus blandit et. - figcaption Integer at lacus et diam tristique #[code(class=classnames.code) figure] #[code(class=classnames.code) figcaption] suscipit. - figure(class=classnames.figure) - blockquote Donec #[code(class=classnames.code) blockquote] vel dolor ut felis dapibus ultricies vitae a nibh. - figure(class=classnames.figure) - pre. - Pellentesque #[code(class=classnames.code) 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; }) - }; - } - } - //- figure(class=classnames.figure) - figcaption. - A horizontal rule #[code(class=classnames.code) hr] is shown below. I’m honestly not sure when - you would ever use this instead of a CSS border. - hr - section#lists - h2 Lists - block lists - figure(class=classnames.figure) - figcaption Ordered List #[code(class=classnames.code) ol] + block body + main + header + - var title = 'Base Typography' + - for (var i = 0; i < project_names.length; i++) title = project_names[project_names.length-i-1] + ' — ' + title + h1!= title + nav#table-contents + h2 Table of Contents ol - li List item #[code(class=classnames.code) li] - li List item #[code(class=classnames.code) li] + li: a(href="#table-contents") Table of Contents + li: a(href="#headings-paragraphs") Headings & Paragraphs + li: a(href="#lists") Lists + li: a(href="#tables") Tables + li + a(href="#text-level-elements") Text-Level Elements ol - li Nested list item - li Nested list item - ol - li Another nested list item - li Another nested list item - figure(class=classnames.figure) - figcaption Unrdered List #[code(class=classnames.code) ul] - ul - li List item #[code(class=classnames.code) li] - li List item #[code(class=classnames.code) li] - ul - li Nested list item - li Nested list item - ul - li Another nested list item - li Another nested list item - figure(class=classnames.figure) - figcaption Dictionary List #[code(class=classnames.code) dl] - dl - dt key #[code(class=classnames.code) dt] - dd value #[code(class=classnames.code) dd] - dt - ul - li 1st key - li 2nd key - dd value - dt key - dd - ul - li 1st value - li 2nd value - section#tables - h2 Tables - block tables - figure(class=classnames.figure) - table - caption #[code(class=classnames.code) table] #[code(class=classnames.code) caption] - thead - mixin tableheaderrows(rows, cols) - - for (var i = 0; i < rows; i++) - tr - - for (var j = 0; j < cols; j++) - th(scope="col") #[code(class=classnames.code) thead]er #[code(class=classnames.code) tr]ow #{i+1} #[code(class=classnames.code) th]eading #{j+1} - +tableheaderrows(1,3) - tfoot - mixin tablefooterrows(rows, cols) - - for (var i = 0; i < rows; i++) - tr - - for (var j = 0; j < cols; j++) - td #[code(class=classnames.code) tfoot]er #[code(class=classnames.code) tr]ow #{i+1} #[code(class=classnames.code) td]ata #{j+1} - +tablefooterrows(2,3) - tbody - mixin tablebodyrows(rows, cols) - - for (var i = 0; i < rows; i++) - tr - - for (var j = 0; j < cols; j++) - td #[code(class=classnames.code) tbody] #[code(class=classnames.code) tr]ow #{i+1} #[code(class=classnames.code) td]ata #{j+1} - +tablebodyrows(3,3) - section#text-level-elements - h2 Text-Level Elements - block text-level-elements - section#links - h3 Links - block links - figure(class=classnames.figure): ul - block links__list - li: a a - li: a(href) a[href] - section#stress - h3 Stress - block stress - figure(class=classnames.figure): ul - block stress__list - li: em emphasized text #[code(class=classnames.code) em] - li: strong important text #[code(class=classnames.code) strong] - li: i alternate voice/mood (scare quotes, mentioning words, foreign expressions) #[code(class=classnames.code) i] - li: mark relevant in some context #[code(class=classnames.code) mark] - li: u unarticulated annotation #[code(class=classnames.code) u] - li: small side comment #[code(class=classnames.code) small] - li: s text shown to be no longer relevant #[code(class=classnames.code) s] - section#documentation - h3 Documentation - block documentation - figure(class=classnames.figure): ul - block documentation__list - li: ins content shown to be inserted into a document #[code(class=classnames.code) ins] - li: del content shown to be deleted from a document #[code(class=classnames.code) del] - li: dfn definining instance of a term #[code(class=classnames.code) dfn] - li: b keyword or technical term #[code(class=classnames.code) b] - li: var variable #[code(class=classnames.code) var] - li: q quoted material #[code(class=classnames.code) q] - li: cite reference to a work, some part of a work, or the creator of a work #[code(class=classnames.code) cite] - li: sup superscript #[code(class=classnames.code) sup] - li: sub subscript #[code(class=classnames.code) sub] - section#data - h3 Data - block data - figure(class=classnames.figure): ul - block data__list - li: abbr(title) abbreviation or acronym #[code(class=classnames.code) abbr[title]] - li: time a specific date or time #[code(class=classnames.code) time] - li: data generic machine-readable data #[code(class=classnames.code) data] - li: code a fragment of code(class=classnames.code) #[code(class=classnames.code) code] - li: kbd user input #[code(class=classnames.code) kbd] - li: kbd: kbd a button or key on a physical device #[code(class=classnames.code) kbd > kbd] - li: samp sample computer output #[code(class=classnames.code) samp] - section#embedded-elements - h2 Embedded Elements - block embedded-elements - section#interactive-elements - h2 Interactive Elements - block interactive-elements + li: a(href="#links") Links + li: a(href="#stress") Stress + li: a(href="#documentation") Documentation + li: a(href="#data") Data + li: a(href="#embedded-elements") Embedded Elements + li: a(href="#interactive-elements") Interactive Elements + section#headings-paragraphs + h2 Headings & Paragraphs + block headings-paragraphs + figure(class=classnames.figure) + h1 Heading 1 #[code(class=classnames.code) h1] + p. + Paragraph #[code(class=classnames.code) 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. + h2 Heading 2 #[code(class=classnames.code) h2] + p. + Paragraph #[code(class=classnames.code) 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. + h3 Heading 3 #[code(class=classnames.code) h3] + p. + Paragraph #[code(class=classnames.code) 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. + h4 Heading 4 #[code(class=classnames.code) h4] + p. + Paragraph #[code(class=classnames.code) 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. + h5 Heading 5 #[code(class=classnames.code) h5] + p. + Paragraph #[code(class=classnames.code) 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. + h6 Heading 6 #[code(class=classnames.code) h6] + p. + Paragraph #[code(class=classnames.code) 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. + figure(class=classnames.figure) + h1 Lorem Ipsum #[code(class=classnames.code) h1] + h2 Lorem Ipsum #[code(class=classnames.code) h2] + h3 Lorem Ipsum #[code(class=classnames.code) h3] + h4 Lorem Ipsum #[code(class=classnames.code) h4] + h5 Lorem Ipsum #[code(class=classnames.code) h5] + h6 Lorem Ipsum #[code(class=classnames.code) h6] + figure(class=classnames.figure) + address. + 12345 #[code(class=classnames.code) address] Ave #[code(class=classnames.code) br]#[br] + Washington, DC 00000 #[code(class=classnames.code) br]#[br] + United States of America + figure(class=classnames.figure) + figure Aenean consectetur #[code(class=classnames.code) figure] suscipit urna, non vehicula lacus blandit et. + figcaption Integer at lacus et diam tristique #[code(class=classnames.code) figure] #[code(class=classnames.code) figcaption] suscipit. + figure(class=classnames.figure) + blockquote Donec #[code(class=classnames.code) blockquote] vel dolor ut felis dapibus ultricies vitae a nibh. + figure(class=classnames.figure) + pre. + Pellentesque #[code(class=classnames.code) 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; }) + }; + } + } + // figure(class=classnames.figure) + figcaption. + A horizontal rule #[code(class=classnames.code) hr] is shown below. I’m honestly not sure when + you would ever use this instead of a CSS border. + hr + section#lists + h2 Lists + block lists + figure(class=classnames.figure) + figcaption Ordered List #[code(class=classnames.code) ol] + ol + li List item #[code(class=classnames.code) li] + li List item #[code(class=classnames.code) li] + ol + li Nested list item + li Nested list item + ol + li Another nested list item + li Another nested list item + figure(class=classnames.figure) + figcaption Unrdered List #[code(class=classnames.code) ul] + ul + li List item #[code(class=classnames.code) li] + li List item #[code(class=classnames.code) li] + ul + li Nested list item + li Nested list item + ul + li Another nested list item + li Another nested list item + figure(class=classnames.figure) + figcaption Dictionary List #[code(class=classnames.code) dl] + dl + dt key #[code(class=classnames.code) dt] + dd value #[code(class=classnames.code) dd] + dt + ul + li 1st key + li 2nd key + dd value + dt key + dd + ul + li 1st value + li 2nd value + section#tables + h2 Tables + block tables + figure(class=classnames.figure) + table + caption #[code(class=classnames.code) table] #[code(class=classnames.code) caption] + thead + mixin tableheaderrows(rows, cols) + - for (var i = 0; i < rows; i++) + tr + - for (var j = 0; j < cols; j++) + th(scope="col") #[code(class=classnames.code) thead]er #[code(class=classnames.code) tr]ow #{i+1} #[code(class=classnames.code) th]eading #{j+1} + +tableheaderrows(1,3) + tfoot + mixin tablefooterrows(rows, cols) + - for (var i = 0; i < rows; i++) + tr + - for (var j = 0; j < cols; j++) + td #[code(class=classnames.code) tfoot]er #[code(class=classnames.code) tr]ow #{i+1} #[code(class=classnames.code) td]ata #{j+1} + +tablefooterrows(2,3) + tbody + mixin tablebodyrows(rows, cols) + - for (var i = 0; i < rows; i++) + tr + - for (var j = 0; j < cols; j++) + td #[code(class=classnames.code) tbody] #[code(class=classnames.code) tr]ow #{i+1} #[code(class=classnames.code) td]ata #{j+1} + +tablebodyrows(3,3) + section#text-level-elements + h2 Text-Level Elements + block text-level-elements + section#links + h3 Links + block links + figure(class=classnames.figure): ul + block links__list + li: a a + li: a(href) a[href] + section#stress + h3 Stress + block stress + figure(class=classnames.figure): ul + block stress__list + li: em emphasized text #[code(class=classnames.code) em] + li: strong important text #[code(class=classnames.code) strong] + li: i alternate voice/mood (scare quotes, mentioning words, foreign expressions) #[code(class=classnames.code) i] + li: mark relevant in some context #[code(class=classnames.code) mark] + li: u unarticulated annotation #[code(class=classnames.code) u] + li: small side comment #[code(class=classnames.code) small] + li: s text shown to be no longer relevant #[code(class=classnames.code) s] + section#documentation + h3 Documentation + block documentation + figure(class=classnames.figure): ul + block documentation__list + li: ins content shown to be inserted into a document #[code(class=classnames.code) ins] + li: del content shown to be deleted from a document #[code(class=classnames.code) del] + li: dfn definining instance of a term #[code(class=classnames.code) dfn] + li: b keyword or technical term #[code(class=classnames.code) b] + li: var variable #[code(class=classnames.code) var] + li: q quoted material #[code(class=classnames.code) q] + li: cite reference to a work, some part of a work, or the creator of a work #[code(class=classnames.code) cite] + li: sup superscript #[code(class=classnames.code) sup] + li: sub subscript #[code(class=classnames.code) sub] + section#data + h3 Data + block data + figure(class=classnames.figure): ul + block data__list + li: abbr(title) abbreviation or acronym #[code(class=classnames.code) abbr[title]] + li: time a specific date or time #[code(class=classnames.code) time] + li: data generic machine-readable data #[code(class=classnames.code) data] + li: code a fragment of code(class=classnames.code) #[code(class=classnames.code) code] + li: kbd user input #[code(class=classnames.code) kbd] + li: kbd: kbd a button or key on a physical device #[code(class=classnames.code) kbd > kbd] + li: samp sample computer output #[code(class=classnames.code) samp] + section#embedded-elements + h2 Embedded Elements + block embedded-elements + section#interactive-elements + h2 Interactive Elements + block interactive-elements diff --git a/test.jade b/test.jade index b898595..09bfefc 100644 --- a/test.jade +++ b/test.jade @@ -1,11 +1,11 @@ extends base-tpl.jade block append vars - - project = 'Xmeter' + - project_names = ['Xmeter'] - classnames.code = 'x-c-Code' - classnames.figure = 'x-c-Fig' -block style +block append style style. body { background-image: url('https://chharvey.github.io/core/images/crossgrid-lined.svg'); From c48f7fbd3d0fd56dae5267f01078703510ef201d Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Fri, 19 Feb 2016 09:16:19 -0500 Subject: [PATCH 07/31] move jade files --- README.md | 2 +- base-tpl.jade => doc/base-tpl.jade | 2 +- test-forms.jade => doc/test-forms.jade | 0 test.jade => doc/test.jade | 0 package.json | 6 +- test-forms.html | 120 ----------- test.html | 286 ------------------------- 7 files changed, 5 insertions(+), 411 deletions(-) rename base-tpl.jade => doc/base-tpl.jade (99%) rename test-forms.jade => doc/test-forms.jade (100%) rename test.jade => doc/test.jade (100%) delete mode 100644 test-forms.html delete mode 100644 test.html diff --git a/README.md b/README.md index ab17632..3beebad 100644 --- a/README.md +++ b/README.md @@ -138,7 +138,7 @@ vertical rhythm system. (For more information on vertical rhythm, see these arti [24ways](http://24ways.org/2006/compose-to-a-vertical-rhythm/) and [Smashing Magazine](http://www.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/#tt-rhythm).) -Features of this stylesheet include the following. See the test page (`./test.html`) +Features of this stylesheet include the following. See the test page (`doc/test.html`) for a demo. - Vertical rhythm — every line on the page is exactly the same height diff --git a/base-tpl.jade b/doc/base-tpl.jade similarity index 99% rename from base-tpl.jade rename to doc/base-tpl.jade index c61b011..79f0b7e 100644 --- a/base-tpl.jade +++ b/doc/base-tpl.jade @@ -11,7 +11,7 @@ html(lang="en") meta(name="description" content="A test of bare, unclassed elements.") meta(name="viewport" content="width=device-width, initial-scale=1") block style - link(rel="stylesheet" href="xmeter.min.css") + link(rel="stylesheet" href="../xmeter.min.css") body block body main diff --git a/test-forms.jade b/doc/test-forms.jade similarity index 100% rename from test-forms.jade rename to doc/test-forms.jade diff --git a/test.jade b/doc/test.jade similarity index 100% rename from test.jade rename to doc/test.jade diff --git a/package.json b/package.json index ebf0980..288c4cf 100644 --- a/package.json +++ b/package.json @@ -15,10 +15,10 @@ }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "lessc": "lessc-each src/ build/ ; lessc xmeter.less xmeter.css", + "jade:all": "jade doc/", + "lessc:all": "lessc-each src/ build/ ; lessc xmeter.less xmeter.css", "minify": "cleancss xmeter.css -o xmeter.min.css", - "jade:all": "jade -P {test,test-forms}.jade", - "build": "npm run lessc ; npm run minify ; npm run jade:all" + "build": "npm run jade:all ; npm run lessc:all ; npm run minify" }, "repository": { "type": "git", diff --git a/test-forms.html b/test-forms.html deleted file mode 100644 index 148bb9c..0000000 --- a/test-forms.html +++ /dev/null @@ -1,120 +0,0 @@ - - - - - - xmeter.css Test — Forms - - - -
-
- -
- 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 - -
- -
-
- - \ No newline at end of file diff --git a/test.html b/test.html deleted file mode 100644 index 81356b6..0000000 --- a/test.html +++ /dev/null @@ -1,286 +0,0 @@ - - - - - - xmeter.css Test - - - - This is the body element. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines. It runs across multiple lines. -
- This is a section element. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. -
-
- This is an article element. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. -
- - -
- This is the main element. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. -
-
- This is a header element. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. -
-
- This is a footer element. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. -
-

Heading 1

-

- 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

-

- 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

-

- 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

-

- 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
-

- 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
-

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

-
-

This is an hgroup element. It contains only headings:

-

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
Heading 5
-
Heading 6
-
-
- This is an address element.
- Line breaks are conventionally indicated by br elements,
- but ol elements are preferred:
- (remove styling if need be) -
    -
  1. 12345 United Ave
    2. -
  2. Washington, DC 00000
    3. -
- The following is an hr element: -
-
-
- This is a div. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. -
-

- This is a p element. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. - It runs across multiple lines. -

-
This is a figure. -
This is a figcaption within the same figure.
-
-
This is a blockquote.
- 
This is a pre element. It contains a lot of text. It contains a lot of text. It contains a lot of text. It contains a lot of text. It contains a lot of text. It contains a lot of text. It contains a lot of text. It contains a lot of text.
-
    -
  1. li within an ol
    2. -
  2. li within the same ol
    3. -
  3. li within the same ol
    4. -
-
    -
  • li within a ul
    • -
  • li within the same ul
    • -
  • li within the same ul
    • -
-
-
dt within a dl
-
dd within the same dl
-
another dt within the same dl
-
another dd within the same dl
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
table caption
thead th || thead th
thead td || thead td
tfoot th || tfoot th
tfoot td || tfoot td
tbody th || tbody th
tbody td || tbody td
-
a br is below:

a a[href] em strong i - mark - u small - s ins - del - dfn b - var - q - cite sup sub abbr abbr[title] - data - code kbd kbd > kbd samp - - \ No newline at end of file From a79c44315352c3cb31594d8f0f8cb344eeea6548 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Fri, 19 Feb 2016 09:39:17 -0500 Subject: [PATCH 08/31] docs external stylesheet --- doc/base-tpl.jade | 2 +- doc/styles/doc.less | 40 ++++++++++++++++++++++++++++++++++++++++ doc/test.jade | 23 +---------------------- package.json | 4 +++- src/__settings.less | 2 +- 5 files changed, 46 insertions(+), 25 deletions(-) create mode 100644 doc/styles/doc.less diff --git a/doc/base-tpl.jade b/doc/base-tpl.jade index 79f0b7e..9a3f6b2 100644 --- a/doc/base-tpl.jade +++ b/doc/base-tpl.jade @@ -262,7 +262,7 @@ html(lang="en") li: abbr(title) abbreviation or acronym #[code(class=classnames.code) abbr[title]] li: time a specific date or time #[code(class=classnames.code) time] li: data generic machine-readable data #[code(class=classnames.code) data] - li: code a fragment of code(class=classnames.code) #[code(class=classnames.code) code] + li: code a fragment of code #[code(class=classnames.code) code] li: kbd user input #[code(class=classnames.code) kbd] li: kbd: kbd a button or key on a physical device #[code(class=classnames.code) kbd > kbd] li: samp sample computer output #[code(class=classnames.code) samp] diff --git a/doc/styles/doc.less b/doc/styles/doc.less new file mode 100644 index 0000000..274149e --- /dev/null +++ b/doc/styles/doc.less @@ -0,0 +1,40 @@ +@import (reference) url('../../src/__settings.less'); +@import (reference) url('../../src/__tool.module.borders.less'); + +/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\ + xmeter +\*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ + + +/*================================*\ + doc.less +\*================================*/ + + +// Stylesheet for Xmeter documentation files. + + +body { + background-image: url('https://chharvey.github.io/core/images/crossgrid-lined.svg'); + background-size: 1px 24px; + background-repeat: repeat; + background-position: left bottom; +} +.x-c-Code { + padding: 1px 2px; + border-radius: 3px; + background-color: #f4f8f0; + color: #008080; +} +.x-c-Fig { + margin-left: 1rem; + margin-right: 1rem; + #XMETER .VARS(); + padding: (0.5*@xmeter_vru) 0.5rem; + #XMETER .border-vert(all; 1px); + border-style: solid; + border-color: #e5eaef; + border-radius: 8px; + position: relative; + background: rgba(245, 250, 255, 0.5); +} diff --git a/doc/test.jade b/doc/test.jade index 09bfefc..df3b8c1 100644 --- a/doc/test.jade +++ b/doc/test.jade @@ -6,25 +6,4 @@ block append vars - classnames.figure = 'x-c-Fig' block append style - style. - body { - background-image: url('https://chharvey.github.io/core/images/crossgrid-lined.svg'); - background-size: 1px 24px; - background-repeat: repeat; - background-position: left bottom; - } - .x-c-Code { - padding: 1px 2px; - border-radius: 3px; - background-color: #f4f8f0; - color: #008080; - } - .x-c-Fig { - margin-left: 1rem; - margin-right: 1rem; - padding: 0.5rem; - border: 1px solid #e5eaef; - border-radius: 8px; - position: relative; - background: rgba(245, 250, 255, 0.5); - } + link(rel="stylesheet" href="styles/doc.css") diff --git a/package.json b/package.json index 288c4cf..2ace31a 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,9 @@ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "jade:all": "jade doc/", - "lessc:all": "lessc-each src/ build/ ; lessc xmeter.less xmeter.css", + "lessc:doc": "lessc doc/styles/doc.less doc/styles/doc.css", + "lessc:xmeter": "lessc-each src/ build/ ; lessc xmeter.less xmeter.css", + "lessc:all": "npm run lessc:doc ; npm run lessc:xmeter", "minify": "cleancss xmeter.css -o xmeter.min.css", "build": "npm run jade:all ; npm run lessc:all ; npm run minify" }, diff --git a/src/__settings.less b/src/__settings.less index a076923..70c2ea4 100644 --- a/src/__settings.less +++ b/src/__settings.less @@ -13,7 +13,7 @@ // - IE9 and IE10 on the `font` shorthand property and on pseudo-elements/classes @xmeter_font_size: 100%; // defined by user agent - @xmeter_font_size: @1rem; // fixes Chrome inheritance bug + @xmeter_font_size: @1rem; // HACK fixes Chrome inheritance bug @xmeter_line_height: 1.5; @xmeter_vru_px: (@xmeter_line_height * @1rem); // fallback for @xmeter_vru, which is in rems @xmeter_vru: (@xmeter_line_height * 1rem); From 3f6907d9a217459db531ba25fdd54a943ec99520 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Fri, 19 Feb 2016 09:53:31 -0500 Subject: [PATCH 09/31] fix comment headings --- src/__tool.fallback.flexbox.less | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/__tool.fallback.flexbox.less b/src/__tool.fallback.flexbox.less index b4a8c35..1aed83f 100644 --- a/src/__tool.fallback.flexbox.less +++ b/src/__tool.fallback.flexbox.less @@ -16,9 +16,9 @@ // - ITEMS - /*++++++++++++++++++++++++++++++++*\ - #CONTAINERS - \*++++++++++++++++++++++++++++++++*/ + //++++++++++++++++++++++++++++++++// + // # CONTAINERS + //++++++++++++++++++++++++++++++++// // Sets up a flexbox container. // // ^author @@ -134,12 +134,12 @@ -ms-align-items: @align; align-items: @align; } - //++++ #end CONTAINERS ++++// + //++++ end # CONTAINERS ++++// - /*++++++++++++++++++++++++++++++++*\ - #ITEMS - \*++++++++++++++++++++++++++++++++*/ + //++++++++++++++++++++++++++++++++// + // # ITEMS + //++++++++++++++++++++++++++++++++// // Shorthand for `flex-grow`, `flex-shrink`, and `flex-basis` properties (in that order). // // @values - none | [ ‹number:0› ‹number:1›? || ‹length:auto› ] @@ -192,5 +192,5 @@ -ms-align-self: @align; align-self: @align; } - //++++ #end ITEMS ++++// + //++++ end # ITEMS ++++// } From 03051f18fc01afc52801aaf5bfcc7a126d82ba8f Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Fri, 19 Feb 2016 14:15:18 -0500 Subject: [PATCH 10/31] globalized all #XMETER vars and mxs; update README --- README.md | 36 +++++++++++++-------------- doc/styles/doc.less | 5 ++-- src/__settings.less | 33 ++++++++++++------------ src/__tool.fallback.box-sizing.less | 2 -- src/__tool.fallback.column-count.less | 2 -- src/__tool.fallback.column-width.less | 2 -- src/__tool.fallback.flexbox.less | 2 -- src/__tool.fallback.gradient.less | 2 -- src/__tool.fallback.rotate.less | 2 -- src/__tool.fallback.transition.less | 2 -- src/__tool.module.borders.less | 10 +++----- src/__tool.module.clearfix.less | 2 -- src/__tool.module.delims.less | 2 -- src/__tool.module.fontsize.less | 12 +++------ src/__tool.module.spacing.less | 2 -- src/__tool.module.sprite.less | 2 -- src/__tool.module.translucent.less | 2 -- src/_base.forms.less | 24 ++++++++---------- src/_base.generic.less | 15 ++++++----- src/_base.grouping.tables.less | 4 +-- src/_base.sections.less | 15 ++++++----- src/_base.text.doctext.less | 2 +- 22 files changed, 73 insertions(+), 107 deletions(-) diff --git a/README.md b/README.md index fee8b4f..d646815 100644 --- a/README.md +++ b/README.md @@ -34,13 +34,10 @@ To install: #### Using the Tools Take a look in the `src/` folder. In here you will find a set of tools, starting -with `__tool`, from which to pick and choose to use for your package. Note that -the contents of each file are wrapped with the id selector `#XMETER {}` to keep -it encapsulated. Think of `#XMETER` as one huge object whose properties are -the mixins. Or think of it as a namespace. Whatever. +with `__tool`, from which to pick and choose to use for your package. If you want to use a particular tool in your stylesheet, you will have to -`@import (reference)` that tool, and then invoke it with `#XMETER`. For example, +`@import (reference)` the stylesheet for that tool. For example, if you plan to use the `.font-size-block()` mixin in your Less, you must include ```less @@ -51,28 +48,28 @@ at the top of your stylesheet. Then when you want to “call” the mixin, do ```less .my-selector { - #XMETER .font-size-block(2.0; 1.5); + .font-size-block(2.0; 1.5); } ``` -To use the xmeter variables, +To use the xmeter variables, import the `__settings` stylesheet. ```less @import (reference) url('/node_modules/xmeter/src/__settings.less'); .my-selector { - #XMETER .VARS(); // invokes the set of variables - line-height: 2 * @xmeter_line_height; + line-height: 2 * @g-line_height; } ``` #### Using the Base Also in the `src/` folder are a set of files starting with `_base`. These files, -unlike tools, provide actual styles for actual elements. Also unlike tools, **these -stylesheets are *not* meant to be cherrypicked**. They are compiled separately∗ and +unlike tools, provide actual styles for actual elements. Also unlike tools, +**these stylesheets are *not* meant to be cherrypicked**. They are compiled +separately∗ and concatenated together in the main file `xmeter.css`. If you’re developing a -stylesheet that you want built off of xmeter, include +stylesheet that you want built off of Xmeter, include ```less @import url('/node_modules/xmeter/xmeter.css'); @@ -84,15 +81,14 @@ This package also comes installed with a [test page](./test.html) that links to the main stylesheet. ∗The reason the stylesheets are compiled separately is to increase -encapsulation. They still have access to global variables (such as `#XMETER`), -but now local variables and mixins can be defined within the file without +encapsulation: private variables and mixins can be defined within the file without affecting other files. ### Deployment (The Second Option) -This option is for you if you don’t wanna develop with **xmeter**, you just +This option is for you if you don’t wanna develop with **Xmeter**, you just wanna use it on your site. It’s a great starting point that “normalizes” unclassed HTML elements before any specific classes and styles get added on. @@ -131,7 +127,7 @@ Features of this stylesheet include the following. See the test page (`doc/test. for a demo. - Vertical rhythm — every line on the page is exactly the same height - (dubbed a "vertical rhythm unit" or "vru") regardless of font size, and + (dubbed a “vertical rhythm unit” or “vru”) regardless of font size, and typographical elements (headings, paragraphs, figures, blockquotes, lists, tables, etc.) are separated by integer multiples of that height. - Font-size for `html` is set to `100%` to accommodate for user agent settings. @@ -145,9 +141,13 @@ for a demo. (style *does* depend on location). - Line-height for all inline (text-level) elements is 0. This allows the vertical rhythm to remain unaffected. -- Variables include commonly used numeric and color values. -- `.sprite()` mixin makes it easy to work with background image sprites. - Fallback tools for browser discrepancies on CSS3 properties. +- Module tools add styles to blocks (font-size, borders) without disrupting vertical rhythm +- A few other modules to make your life easier: + - `.sprite()` sets background image sprites + - `.clearfix()` does exactly what it sounds like + - `.delimiters()` sets quotes and other things + - `.translucent()` **may be removed in the future** - Minor, albeit prettier, style changes to some text-level elements from the browser default. ## Changelog diff --git a/doc/styles/doc.less b/doc/styles/doc.less index 274149e..2f11679 100644 --- a/doc/styles/doc.less +++ b/doc/styles/doc.less @@ -29,9 +29,8 @@ body { .x-c-Fig { margin-left: 1rem; margin-right: 1rem; - #XMETER .VARS(); - padding: (0.5*@xmeter_vru) 0.5rem; - #XMETER .border-vert(all; 1px); + padding: (0.5*@g-vru) 0.5rem; + .border-vert(all; 1px); border-style: solid; border-color: #e5eaef; border-radius: 8px; diff --git a/src/__settings.less b/src/__settings.less index 10e60ff..ff7e24e 100644 --- a/src/__settings.less +++ b/src/__settings.less @@ -4,25 +4,26 @@ \*################################*/ -#XMETER { - .VARS() { + // NOTE: the prefix `g-` on each variable stands for "global" because these variables + // are globally (project-wide) accessible. + // In each partial file, if need a private variable, use prefix `p-` for "private". + // Parameters in mixins shall not use any prefixes. + // vertical rhythm - @1rem: 16px; // a shortcut variable used for fallbacks where rems aren’t supported + @g-1rem: 16px; // a shortcut variable used for fallbacks where rems aren’t supported // where are rems not supported? // - IE8 and below, and // - IE9 and IE10 on the `font` shorthand property and on pseudo-elements/classes - @xmeter_font_size: 100%; // defined by user agent - @xmeter_font_size: @1rem; // HACK fixes Chrome inheritance bug - @xmeter_line_height: 1.5; - @xmeter_vru_px: (@xmeter_line_height * @1rem); // fallback for @xmeter_vru, which is in rems - @xmeter_vru: (@xmeter_line_height * 1rem); + @g-font_size: 100%; // defined by user agent + @g-font_size: @g-1rem; // HACK fixes Chrome inheritance bug + @g-line_height: 1.5; + @g-vru_px: (@g-line_height * @g-1rem); // fallback for @g-vru, which is in rems + @g-vru: (@g-line_height * 1rem); - @xmeter_font_size_h1: 32/16; // 2.000 - @xmeter_font_size_h2: 24/16; // 1.500 - @xmeter_font_size_h3: 20/16; // 1.250 - @xmeter_font_size_h4: 16/16; // 1.000 - @xmeter_font_size_h5: 14/16; // 0.875 - @xmeter_font_size_h6: 12/16; // 0.750 - } -} + @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 diff --git a/src/__tool.fallback.box-sizing.less b/src/__tool.fallback.box-sizing.less index 918f248..afe69c7 100644 --- a/src/__tool.fallback.box-sizing.less +++ b/src/__tool.fallback.box-sizing.less @@ -4,7 +4,6 @@ \*################################*/ -#XMETER { // Alters the CSS box model used to calculate width and height. // See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) for more info. // @@ -20,4 +19,3 @@ -moz-box-sizing: @box; box-sizing: @box; } -} diff --git a/src/__tool.fallback.column-count.less b/src/__tool.fallback.column-count.less index ace9325..03c05df 100644 --- a/src/__tool.fallback.column-count.less +++ b/src/__tool.fallback.column-count.less @@ -4,7 +4,6 @@ \*################################*/ -#XMETER { // Sets the number of columns of text. // See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-count) for more info. // @@ -19,4 +18,3 @@ -moz-column-count: @n; column-count: @n; } -} diff --git a/src/__tool.fallback.column-width.less b/src/__tool.fallback.column-width.less index 5322a25..58330cd 100644 --- a/src/__tool.fallback.column-width.less +++ b/src/__tool.fallback.column-width.less @@ -4,7 +4,6 @@ \*################################*/ -#XMETER { // Sets the width of columns of text. // See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-width) for more info. // @@ -19,4 +18,3 @@ -moz-column-width: @n; column-width: @n; } -} diff --git a/src/__tool.fallback.flexbox.less b/src/__tool.fallback.flexbox.less index 1aed83f..985e3fa 100644 --- a/src/__tool.fallback.flexbox.less +++ b/src/__tool.fallback.flexbox.less @@ -10,7 +10,6 @@ /////////////////////////////////////////////////////////////////////////////// -#XMETER { // Table of Contents // - CONTAINERS // - ITEMS @@ -193,4 +192,3 @@ align-self: @align; } //++++ end # ITEMS ++++// -} diff --git a/src/__tool.fallback.gradient.less b/src/__tool.fallback.gradient.less index 7efde03..54e31cb 100644 --- a/src/__tool.fallback.gradient.less +++ b/src/__tool.fallback.gradient.less @@ -4,7 +4,6 @@ \*################################*/ -#XMETER { // Applies a linear gradient background on an Element. // See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient) for more info. // See [WPD](http://docs.webplatform.org/wiki/css/functions/linear-gradient) for more info. @@ -22,4 +21,3 @@ background-image: linear-gradient(@arguments); background-image: -webkit-gradient(@arguments); // "Old Webkit" } -} diff --git a/src/__tool.fallback.rotate.less b/src/__tool.fallback.rotate.less index e7c9378..7f1c61e 100644 --- a/src/__tool.fallback.rotate.less +++ b/src/__tool.fallback.rotate.less @@ -4,7 +4,6 @@ \*################################*/ -#XMETER { // Use this tool to apply a rotation transformation to an Object. // // @rotation - the angle, in degrees, to rotate the Object @@ -19,4 +18,3 @@ -o-transform: rotate(@rotation); transform: rotate(@rotation); } -} diff --git a/src/__tool.fallback.transition.less b/src/__tool.fallback.transition.less index cc274d8..9e0cd0f 100644 --- a/src/__tool.fallback.transition.less +++ b/src/__tool.fallback.transition.less @@ -4,7 +4,6 @@ \*################################*/ -#XMETER { // Applies a transition timing effect on an Element. // // @props - the CSS property name(s). If more than one, they must be comma-separated @@ -37,4 +36,3 @@ -o-transition-delay: @delay; transition-delay: @delay; } -} diff --git a/src/__tool.module.borders.less b/src/__tool.module.borders.less index 987636f..3fcae25 100644 --- a/src/__tool.module.borders.less +++ b/src/__tool.module.borders.less @@ -5,7 +5,6 @@ @import (reference) url('__tool.module.spacing.less'); -#XMETER { // The following mixins adjust border widths for **BLOCK** Objects only! They will keep the // vertical rhythm intact when adding border widths (by slightly adjusting position and margins). // Do *not* use these mixins on INLINE Objects! @@ -26,22 +25,21 @@ // : 2015-05-11 .border-vert(top; @width: 0) { border-top-width: @width; - #XMETER .pull-this(@width); + .pull-this(@width); } .border-vert(bottom; @width: 0) { border-bottom-width: @width; - #XMETER .pull-this(@width); + .pull-this(@width); } .border-vert(topbot; @width: 0) { border-top-width: @width; border-bottom-width: @width; - #XMETER .pull-this(2 * @width); + .pull-this(2 * @width); } .border-vert(all; @width: 0) { border-width: @width; - #XMETER .pull-this(2 * @width); + .pull-this(2 * @width); } -} diff --git a/src/__tool.module.clearfix.less b/src/__tool.module.clearfix.less index 68d73af..fdf9bb7 100644 --- a/src/__tool.module.clearfix.less +++ b/src/__tool.module.clearfix.less @@ -4,7 +4,6 @@ \*################################*/ -#XMETER { // This tool is used on **containers of floats** (not on floats themselves). // It pushes subsequent content to the bottom of the container. // @@ -20,4 +19,3 @@ clear: both; } } -} diff --git a/src/__tool.module.delims.less b/src/__tool.module.delims.less index 29c36e1..7a7f6a2 100644 --- a/src/__tool.module.delims.less +++ b/src/__tool.module.delims.less @@ -4,7 +4,6 @@ \*################################*/ -#XMETER { // This tool adds opening and closing punctuation marks surrounding an Object. The // punctuation marks are given by the `quotes` property. // @@ -32,4 +31,3 @@ .quotes-double() { .delimiters('\201c'; '\201d'); } // '“' '”' // “ ” .guillemets-single() { .delimiters('\2039'; '\203a'); } // '‹' '›' // ‹ › .guillemets-double() { .delimiters('\00ab'; '\00bb'); } // '«' '»' // « » -} diff --git a/src/__tool.module.fontsize.less b/src/__tool.module.fontsize.less index 00d1a9f..9735872 100644 --- a/src/__tool.module.fontsize.less +++ b/src/__tool.module.fontsize.less @@ -5,7 +5,6 @@ @import (reference) url('__settings.less'); -#XMETER { // This Mixin sets `font-size` and `line-height` such that // `font-size` * `line-height` = one vertical rhythm unit. // Use this on elements with `display: block;` or `display: inline-block;` or anything @@ -13,17 +12,14 @@ // // ^params // @ratio - the ratio of the new font size to `@fontsize_base`, i.e., the number of 'rem's - // @line_height_orig - (default: @xmeter_line_height) the `line-height` of the parent element + // @line_height_orig - (default: @g-line_height) the `line-height` of the parent element // @lines - (default: 1) the number of vrus each line of text will take up. should be a whole number to satisfy vertical rhythm. // ^author // : Chris Harvey // ^updated // : 2016-01-08 - #XMETER .VARS(); - .font-size-block(@ratio; @line_height_orig: @xmeter_line_height; @lines: 1) { - #XMETER .VARS(); - font-size: (@ratio * @1rem); // legacy browsers (see __settings for more info) - font-size: (@ratio * 1rem); + .font-size-block(@ratio; @line_height_orig: @g-line_height; @lines: 1) { + font-size: (@ratio * @g-1rem); // legacy browsers (see __settings for more info) + font-size: (@ratio * 1rem); line-height: ((@line_height_orig / @ratio) * @lines); } -} diff --git a/src/__tool.module.spacing.less b/src/__tool.module.spacing.less index cc2a40f..82d2961 100644 --- a/src/__tool.module.spacing.less +++ b/src/__tool.module.spacing.less @@ -4,7 +4,6 @@ \*################################*/ -#XMETER { // Provides [top|bottom] spacing of any given amount. // They do *NOT* automatically multiply by a vertical rhythm unit; you have to do that before // giving an argument. @@ -50,4 +49,3 @@ .spacing-bottom(@space) { .push-next(@space); } -} diff --git a/src/__tool.module.sprite.less b/src/__tool.module.sprite.less index dab6fac..7cd1451 100644 --- a/src/__tool.module.sprite.less +++ b/src/__tool.module.sprite.less @@ -4,7 +4,6 @@ \*################################*/ -#XMETER { // Sets the background position of an Object’s background sprite image. // // @{[horizontal|vertcial]} - whether the sprite’s images are linearly horizontally or vertically ordered. @@ -27,4 +26,3 @@ .sprite(vertical; @position; @iconsize; @iconpadd) when (@position = 1) { background-position: 0 0; } -} diff --git a/src/__tool.module.translucent.less b/src/__tool.module.translucent.less index 7ab91b2..b5960e6 100644 --- a/src/__tool.module.translucent.less +++ b/src/__tool.module.translucent.less @@ -4,7 +4,6 @@ \*################################*/ -#XMETER { // Makes an object slightly transparent, but it becomes opaque upon `:hover`. // // ^author @@ -15,4 +14,3 @@ opacity: 0.5; &:hover { opacity: 1; } } -} diff --git a/src/_base.forms.less b/src/_base.forms.less index 34e32d5..8d28ba0 100644 --- a/src/_base.forms.less +++ b/src/_base.forms.less @@ -8,8 +8,8 @@ @import (reference) url('__tool.module.fontsize.less'); -@color_gray_fb: #c0c0c0; // fallback -@color_gray: fadeout(#000, 75%); +@p-color_gray_fb: #c0c0c0; // fallback +@p-color_gray: fadeout(#000, 75%); // consistent borders for all fieldset, @@ -17,10 +17,10 @@ input, select, textarea, button { - #XMETER .border-vert(all; 1px); + .border-vert(all; 1px); border-style: solid; - border-color: @color_gray_fb; - border-color: @color_gray; + border-color: @p-color_gray_fb; + border-color: @p-color_gray; } fieldset { @@ -38,26 +38,24 @@ button { // small font size for textual inputs input:not([type="button"]):not([type="reset"]):not([type="submit"]), textarea { - #XMETER .VARS(); - #XMETER .font-size-block(@xmeter_font_size_h6); + .font-size-block(@g-font_size_h6); } textarea { width: 30rem; - #XMETER .VARS(); - height: 6 * @xmeter_vru; - line-height: @xmeter_line_height; // override browser-default (simply looks better) + height: 6 * @g-vru; + line-height: @g-line_height; // override browser-default (simply looks better) } input[type="button"], input[type="reset"], input[type="submit"], button { - background-color: @color_gray_fb; - background-color: @color_gray; + background-color: @p-color_gray_fb; + background-color: @p-color_gray; } // Override content-box in Normalize (* in base.generic isn’t specific enough) input[type="search"] { - #XMETER .box-sizing(border-box); + .box-sizing(border-box); } diff --git a/src/_base.generic.less b/src/_base.generic.less index 23b916a..ff73395 100644 --- a/src/_base.generic.less +++ b/src/_base.generic.less @@ -11,9 +11,10 @@ &, &::before, &::after { - #XMETER .box-sizing(border-box); + .box-sizing(border-box); border: 0 solid; // reset browser default border - content: ''; content: none; // fallback + content: ''; // fallback + content: none; @media print { background: transparent; box-shadow: none; @@ -24,9 +25,8 @@ // [1] addresses support for `rem` units (otherwise these would be in `body` selector) html { - #XMETER .VARS(); - font-size: @xmeter_font_size; // [1] - line-height: @xmeter_line_height; // [1] + font-size: @g-font_size; // [1] + line-height: @g-line_height; // [1] } // Vertical spacing between typographical blocks @@ -35,12 +35,11 @@ p, figure, blockquote, pre, ol, ul, dl, table, fieldset { - #XMETER .VARS(); - #XMETER .spacing-bottom(@xmeter_vru); + .spacing-bottom(@g-vru); } li, dt, dd { > ol, > ul, > dl { - #XMETER .spacing-bottom(0); // undo default spacing-bottom for nested lists + .spacing-bottom(0); // undo default spacing-bottom for nested lists } } diff --git a/src/_base.grouping.tables.less b/src/_base.grouping.tables.less index b3c9f11..3b8cc2b 100644 --- a/src/_base.grouping.tables.less +++ b/src/_base.grouping.tables.less @@ -16,11 +16,11 @@ tfoot { } thead { } +tfoot { +} tbody { vertical-align: top; // for data alignment } -tfoot { -} tr { } th { diff --git a/src/_base.sections.less b/src/_base.sections.less index 24c1b06..c76d22f 100644 --- a/src/_base.sections.less +++ b/src/_base.sections.less @@ -32,17 +32,16 @@ footer { h1, h2, h3, h4, h5, h6 { font-weight: 700; } -h1 { #XMETER .VARS(); #XMETER .font-size-block(@xmeter_font_size_h1); } -h2 { #XMETER .VARS(); #XMETER .font-size-block(@xmeter_font_size_h2); } -h3 { #XMETER .VARS(); #XMETER .font-size-block(@xmeter_font_size_h3); } -h4 { #XMETER .VARS(); #XMETER .font-size-block(@xmeter_font_size_h4); } -h5 { #XMETER .VARS(); #XMETER .font-size-block(@xmeter_font_size_h5); } -h6 { #XMETER .VARS(); #XMETER .font-size-block(@xmeter_font_size_h6); } +h1 { .font-size-block(@g-font_size_h1); } +h2 { .font-size-block(@g-font_size_h2); } +h3 { .font-size-block(@g-font_size_h3); } +h4 { .font-size-block(@g-font_size_h4); } +h5 { .font-size-block(@g-font_size_h5); } +h6 { .font-size-block(@g-font_size_h6); } h1 { margin-top: 0; // undo Normalize - #XMETER .VARS(); - #XMETER .spacing-top(@xmeter_vru); + .spacing-top(@g-vru); } hr { diff --git a/src/_base.text.doctext.less b/src/_base.text.doctext.less index 8f1e668..27baf64 100644 --- a/src/_base.text.doctext.less +++ b/src/_base.text.doctext.less @@ -80,7 +80,7 @@ var { // ^updated // : 2014-11-05 q { - #XMETER .quotes-double(); // fallback for `initial` + .quotes-double(); // fallback for `initial` quotes: initial; } // Represents a placeholder reference to a name or title of a heading, section, figure, From 1cd401b8033d312ed15a38df4bc717393df0bf73 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Fri, 19 Feb 2016 14:16:30 -0500 Subject: [PATCH 11/31] fix broken links to test page --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 3beebad..8d2139a 100644 --- a/README.md +++ b/README.md @@ -91,7 +91,7 @@ stylesheet that you want built off of xmeter, include at the top of your file. -This package also comes installed with a [test page](./test.html) +This package also comes installed with a test page (`doc/test.html`) that links to the main stylesheet. ∗The reason the stylesheets are compiled separately is to increase @@ -107,7 +107,7 @@ This option is for you if you don’t wanna develop with **xmeter**, you just wanna use it on your site. It’s a great starting point that “normalizes” unclassed HTML elements before any specific classes and styles get added on. -See the [test page](./test.html) for a preview. +See the test page (`doc/test.html`) for a preview. To install: From ad830f1fd97476ad5d0f2eae79bda9f1b231c785 Mon Sep 17 00:00:00 2001 From: Chris Harvey Date: Fri, 19 Feb 2016 14:36:59 -0500 Subject: [PATCH 12/31] DEPRECATES .translucent(); also adjust indentation and commenting --- src/__settings.less | 40 +-- src/__tool.fallback.box-sizing.less | 30 +-- src/__tool.fallback.column-count.less | 28 +- src/__tool.fallback.column-width.less | 28 +- src/__tool.fallback.flexbox.less | 364 +++++++++++++------------- src/__tool.fallback.gradient.less | 34 +-- src/__tool.fallback.rotate.less | 28 +- src/__tool.fallback.transition.less | 64 ++--- src/__tool.module.borders.less | 70 ++--- src/__tool.module.clearfix.less | 28 +- src/__tool.module.delims.less | 48 ++-- src/__tool.module.fontsize.less | 36 +-- src/__tool.module.spacing.less | 88 +++---- src/__tool.module.sprite.less | 44 ++-- src/__tool.module.translucent.less | 21 +- src/_base.grouping.paras.less | 15 -- src/_base.sections.less | 3 - xmeter.less | 8 +- 18 files changed, 480 insertions(+), 497 deletions(-) diff --git a/src/__settings.less b/src/__settings.less index ff7e24e..2d19c51 100644 --- a/src/__settings.less +++ b/src/__settings.less @@ -4,26 +4,26 @@ \*################################*/ - // NOTE: the prefix `g-` on each variable stands for "global" because these variables - // are globally (project-wide) accessible. - // In each partial file, if need a private variable, use prefix `p-` for "private". - // Parameters in mixins shall not use any prefixes. +// NOTE: the prefix `g-` on each variable stands for "global" because these variables +// are globally (project-wide) accessible. +// In each partial file, if need a private variable, use prefix `p-` for "private". +// Parameters in mixins shall not use any prefixes. - // vertical rhythm - @g-1rem: 16px; // a shortcut variable used for fallbacks where rems aren’t supported - // where are rems not supported? - // - IE8 and below, and - // - IE9 and IE10 on the `font` shorthand property and on pseudo-elements/classes +// vertical rhythm +@g-1rem: 16px; // a shortcut variable used for fallbacks where rems aren’t supported +// where are rems not supported? +// - IE8 and below, and +// - IE9 and IE10 on the `font` shorthand property and on pseudo-elements/classes - @g-font_size: 100%; // defined by user agent - @g-font_size: @g-1rem; // HACK fixes Chrome inheritance bug - @g-line_height: 1.5; - @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: 100%; // defined by user agent +@g-font_size: @g-1rem; // HACK fixes Chrome inheritance bug +@g-line_height: 1.5; +@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 +@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 diff --git a/src/__tool.fallback.box-sizing.less b/src/__tool.fallback.box-sizing.less index afe69c7..28907ea 100644 --- a/src/__tool.fallback.box-sizing.less +++ b/src/__tool.fallback.box-sizing.less @@ -4,18 +4,18 @@ \*################################*/ - // Alters the CSS box model used to calculate width and height. - // See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) for more info. - // - // @box - the way the box is sized - // - content-box - (default) `width` and `height` properties measured include only the content - // - border-box - `width` and `height` properties measured include padding and border as well as content - // ^author - // : Chris Harvey - // ^updated - // : 2014-10-21 - .box-sizing(@box) { - -webkit-box-sizing: @box; - -moz-box-sizing: @box; - box-sizing: @box; - } +// Alters the CSS box model used to calculate width and height. +// See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) for more info. +// +// @box - the way the box is sized +// - content-box - (default) `width` and `height` properties measured include only the content +// - border-box - `width` and `height` properties measured include padding and border as well as content +// ^author +// : Chris Harvey +// ^updated +// : 2014-10-21 +.box-sizing(@box) { + -webkit-box-sizing: @box; + -moz-box-sizing: @box; + box-sizing: @box; +} diff --git a/src/__tool.fallback.column-count.less b/src/__tool.fallback.column-count.less index 03c05df..06793a9 100644 --- a/src/__tool.fallback.column-count.less +++ b/src/__tool.fallback.column-count.less @@ -4,17 +4,17 @@ \*################################*/ - // Sets the number of columns of text. - // See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-count) for more info. - // - // @n - a positive integer indicating the number of columns, or - // - auto (initial) - indicates the number of columns should be determined by the `column-width` property - // ^author - // : Chris Harvey - // ^updated - // : 2015-10-23 - .column-count(@n) { - -webkit-column-count: @n; - -moz-column-count: @n; - column-count: @n; - } +// Sets the number of columns of text. +// See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-count) for more info. +// +// @n - a positive integer indicating the number of columns, or +// - auto (initial) - indicates the number of columns should be determined by the `column-width` property +// ^author +// : Chris Harvey +// ^updated +// : 2015-10-23 +.column-count(@n) { + -webkit-column-count: @n; + -moz-column-count: @n; + column-count: @n; +} diff --git a/src/__tool.fallback.column-width.less b/src/__tool.fallback.column-width.less index 58330cd..3aa1f23 100644 --- a/src/__tool.fallback.column-width.less +++ b/src/__tool.fallback.column-width.less @@ -4,17 +4,17 @@ \*################################*/ - // 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 - // - 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) { - -webkit-column-width: @n; - -moz-column-width: @n; - column-width: @n; - } +// 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 +// - 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) { + -webkit-column-width: @n; + -moz-column-width: @n; + column-width: @n; +} diff --git a/src/__tool.fallback.flexbox.less b/src/__tool.fallback.flexbox.less index 985e3fa..4a47e13 100644 --- a/src/__tool.fallback.flexbox.less +++ b/src/__tool.fallback.flexbox.less @@ -10,185 +10,185 @@ /////////////////////////////////////////////////////////////////////////////// - // Table of Contents - // - CONTAINERS - // - ITEMS - - - //++++++++++++++++++++++++++++++++// - // # CONTAINERS - //++++++++++++++++++++++++++++++++// - // Sets up a flexbox container. - // - // ^author - // : Chris Harvey - // ^updated - // : 2015-09-03 - .flexbox() { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - } - - // Determines the direction of the flow. - // - // @direction - The direction of flow. - // - `row` (default) - left to right in `ltr`; right to left in `rtl` - // - `column` - same as `row` but top to bottom - // - `row-reverse` - right to left in `ltr`; left to right in `rtl` - // - `column-reverse` - same as `row-reverse` but bottom to top - // ^author - // : Chris Harvey - // ^updated - // : 2015-02-12 - .flex-direction(@direction) { - -webkit-flex-direction: @direction; - -moz-flex-direction: @direction; - -ms-flex-direction: @direction; - flex-direction: @direction; - } - - // Determines whether boxes wrap to the next row or column. - // - // @wrap - how blocks will wrap - // - `nowrap` (default) - single-line / left to right in `ltr`; right to left in `rtl` - // - `wrap` - multi-line / left to right in `ltr`; right to left in `rtl` - // - `wrap-reverse` - multi-line / right to left in `ltr`; left to right in `rtl` - // ^author - // : Chris Harvey - // ^updated - // : 2015-02-12 - .flex-wrap(@wrap) { - -webkit-flex-wrap: @wrap; - -moz-flex-wrap: @wrap; // no support for Firefox 27 and older (28+ uses `flex-wrap`) - -ms-flex-wrap: @wrap; - flex-wrap: @wrap; - } - - // Determines how content is justified along the main axis. - // - // @justify - how content is justified - // - `flex-start` (default) - items are aligned left (in rows) or top (in columns) - // - `flex-end` - items are aligned right (in rows) or bottom (in columns) - // - `center` - items are pushed to middle - // - `space-between` - extra space is distributed between items, - // leaving them flush left/right - // - `space-around` - extra space is distributed around items, - // leaving margin on left/right. - // Good for centering one item without using - // `margin-left: auto; margin-right: auto;`!!! - // ^author - // : Chris Harvey - // ^updated - // : 2015-10-12 - .flex-justify-content(@justify) { - -webkit-justify-content: @justify; - -moz-justify-content: @justify; - -ms-justify-content: @justify; - justify-content: @justify; - } - - // Aligns a flex container’s lines when there is empty space in the cross-axis. - // (align vertically for `flex-direction: row` or horizontally for `flex-direction: column`) - // - // @align - how content is aligned - // - `stretch` (default) - lines stretch to take up the remaining space - // - `flex-start` - lines packed to the start of the container - // - `flex-end` - lines packed to the end of the container - // - `center` - lines packed to the center of the container - // - `space-between` - extra space is distributed between lines, - // leaving them flush top/bottom - // - `space-around` - extra space is distributed around lines, - // leaving margin on top/bottom. - // ^author - // : Chris Harvey - // ^updated - // : 2015-09-03 - .flex-align-content(@align) { - -webkit-align-content: @align; - -moz-align-content: @align; - -ms-align-content: @align; - align-content: @align; - } - - // Defines default behavior for aligining flex items along cross axis - // (align vertically for `flex-direction: row` or horizontally for `flex-direction: column`) - // - // @align - how items are aligned - // - `stretch` (default) - stretch to fill the container - // (still respect min-width/max-width) - // - `flex-start` - cross-start margin edge of the items is placed on the cross-start line - // - `flex-end` - cross-end margin edge of the items is placed on the cross-end line - // - `center` - items are centered in the cross-axis - // - `baseline` - items are aligned such as their baselines align - // ^author - // : Chris Harvey - // ^updated - // : 2015-09-03 - .flex-align-items(@align) { - -webkit-align-items: @align; - -moz-align-items: @align; - -ms-align-items: @align; - align-items: @align; - } - //++++ end # CONTAINERS ++++// - - - //++++++++++++++++++++++++++++++++// - // # ITEMS - //++++++++++++++++++++++++++++++++// - // Shorthand for `flex-grow`, `flex-shrink`, and `flex-basis` properties (in that order). - // - // @values - none | [ ‹number:0› ‹number:1›? || ‹length:auto› ] - // ^author - // : Chris Harvey - // ^updated - // : 2015-09-03 - .flex(@values) { - -webkit-box-flex: @values; - -moz-box-flex: @values; - -webkit-flex: @values; - -moz-flex: @values; - -ms-flex: @values; - flex: @values; - } - - // Determines the order in which items appear in the flex container. - // - // @integer - ‹integer:0› the order in which the item appears in the flex container - // ^author - // : Chris Harvey - // ^updated - // : 2015-09-03 - .flex-order(@integer) { - -webkit-box-ordinal-group: @integer; - -moz-box-ordinal-group: @integer; - -ms-flex-order: @integer; - -webkit-order: @integer; - order: @integer; - } - - // Overrides behavior of `align-items` for aligining one specific flex item along cross axis - // (align vertically for `flex-direction: row` or horizontally for `flex-direction: column`) - // - // @align - how the item is aligned - // - `auto` (default) - value of parent’s `align-items` property - // - `stretch` - stretch to fill the container - // (still respect min-width/max-width) - // - `flex-start` - cross-start margin edge of the items is placed on the cross-start line - // - `flex-end` - cross-end margin edge of the items is placed on the cross-end line - // - `center` - items are centered in the cross-axis - // - `baseline` - items are aligned such as their baselines align - // ^author - // : Chris Harvey - // ^updated - // : 2015-10-14 - .flex-align-self(@align) { - -webkit-align-self: @align; - -moz-align-self: @align; - -ms-align-self: @align; - align-self: @align; - } - //++++ end # ITEMS ++++// +// Table of Contents +// - CONTAINERS +// - ITEMS + + +//++++++++++++++++++++++++++++++++// +// # CONTAINERS +//++++++++++++++++++++++++++++++++// +// Sets up a flexbox container. +// +// ^author +// : Chris Harvey +// ^updated +// : 2015-09-03 +.flexbox() { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; +} + +// Determines the direction of the flow. +// +// @direction - The direction of flow. +// - `row` (default) - left to right in `ltr`; right to left in `rtl` +// - `column` - same as `row` but top to bottom +// - `row-reverse` - right to left in `ltr`; left to right in `rtl` +// - `column-reverse` - same as `row-reverse` but bottom to top +// ^author +// : Chris Harvey +// ^updated +// : 2015-02-12 +.flex-direction(@direction) { + -webkit-flex-direction: @direction; + -moz-flex-direction: @direction; + -ms-flex-direction: @direction; + flex-direction: @direction; +} + +// Determines whether boxes wrap to the next row or column. +// +// @wrap - how blocks will wrap +// - `nowrap` (default) - single-line / left to right in `ltr`; right to left in `rtl` +// - `wrap` - multi-line / left to right in `ltr`; right to left in `rtl` +// - `wrap-reverse` - multi-line / right to left in `ltr`; left to right in `rtl` +// ^author +// : Chris Harvey +// ^updated +// : 2015-02-12 +.flex-wrap(@wrap) { + -webkit-flex-wrap: @wrap; + -moz-flex-wrap: @wrap; // no support for Firefox 27 and older (28+ uses `flex-wrap`) + -ms-flex-wrap: @wrap; + flex-wrap: @wrap; +} + +// Determines how content is justified along the main axis. +// +// @justify - how content is justified +// - `flex-start` (default) - items are aligned left (in rows) or top (in columns) +// - `flex-end` - items are aligned right (in rows) or bottom (in columns) +// - `center` - items are pushed to middle +// - `space-between` - extra space is distributed between items, +// leaving them flush left/right +// - `space-around` - extra space is distributed around items, +// leaving margin on left/right. +// Good for centering one item without using +// `margin-left: auto; margin-right: auto;`!!! +// ^author +// : Chris Harvey +// ^updated +// : 2015-10-12 +.flex-justify-content(@justify) { + -webkit-justify-content: @justify; + -moz-justify-content: @justify; + -ms-justify-content: @justify; + justify-content: @justify; +} + +// Aligns a flex container’s lines when there is empty space in the cross-axis. +// (align vertically for `flex-direction: row` or horizontally for `flex-direction: column`) +// +// @align - how content is aligned +// - `stretch` (default) - lines stretch to take up the remaining space +// - `flex-start` - lines packed to the start of the container +// - `flex-end` - lines packed to the end of the container +// - `center` - lines packed to the center of the container +// - `space-between` - extra space is distributed between lines, +// leaving them flush top/bottom +// - `space-around` - extra space is distributed around lines, +// leaving margin on top/bottom. +// ^author +// : Chris Harvey +// ^updated +// : 2015-09-03 +.flex-align-content(@align) { + -webkit-align-content: @align; + -moz-align-content: @align; + -ms-align-content: @align; + align-content: @align; +} + +// Defines default behavior for aligining flex items along cross axis +// (align vertically for `flex-direction: row` or horizontally for `flex-direction: column`) +// +// @align - how items are aligned +// - `stretch` (default) - stretch to fill the container +// (still respect min-width/max-width) +// - `flex-start` - cross-start margin edge of the items is placed on the cross-start line +// - `flex-end` - cross-end margin edge of the items is placed on the cross-end line +// - `center` - items are centered in the cross-axis +// - `baseline` - items are aligned such as their baselines align +// ^author +// : Chris Harvey +// ^updated +// : 2015-09-03 +.flex-align-items(@align) { + -webkit-align-items: @align; + -moz-align-items: @align; + -ms-align-items: @align; + align-items: @align; +} +//++++ end # CONTAINERS ++++// + + +//++++++++++++++++++++++++++++++++// +// # ITEMS +//++++++++++++++++++++++++++++++++// +// Shorthand for `flex-grow`, `flex-shrink`, and `flex-basis` properties (in that order). +// +// @values - none | [ ‹number:0› ‹number:1›? || ‹length:auto› ] +// ^author +// : Chris Harvey +// ^updated +// : 2015-09-03 +.flex(@values) { + -webkit-box-flex: @values; + -moz-box-flex: @values; + -webkit-flex: @values; + -moz-flex: @values; + -ms-flex: @values; + flex: @values; +} + +// Determines the order in which items appear in the flex container. +// +// @integer - ‹integer:0› the order in which the item appears in the flex container +// ^author +// : Chris Harvey +// ^updated +// : 2015-09-03 +.flex-order(@integer) { + -webkit-box-ordinal-group: @integer; + -moz-box-ordinal-group: @integer; + -ms-flex-order: @integer; + -webkit-order: @integer; + order: @integer; +} + +// Overrides behavior of `align-items` for aligining one specific flex item along cross axis +// (align vertically for `flex-direction: row` or horizontally for `flex-direction: column`) +// +// @align - how the item is aligned +// - `auto` (default) - value of parent’s `align-items` property +// - `stretch` - stretch to fill the container +// (still respect min-width/max-width) +// - `flex-start` - cross-start margin edge of the items is placed on the cross-start line +// - `flex-end` - cross-end margin edge of the items is placed on the cross-end line +// - `center` - items are centered in the cross-axis +// - `baseline` - items are aligned such as their baselines align +// ^author +// : Chris Harvey +// ^updated +// : 2015-10-14 +.flex-align-self(@align) { + -webkit-align-self: @align; + -moz-align-self: @align; + -ms-align-self: @align; + align-self: @align; +} +//++++ end # ITEMS ++++// diff --git a/src/__tool.fallback.gradient.less b/src/__tool.fallback.gradient.less index 54e31cb..1c76605 100644 --- a/src/__tool.fallback.gradient.less +++ b/src/__tool.fallback.gradient.less @@ -4,20 +4,20 @@ \*################################*/ - // Applies a linear gradient background on an Element. - // See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient) for more info. - // See [WPD](http://docs.webplatform.org/wiki/css/functions/linear-gradient) for more info. - // - // ... - any number of parameters - // ^author - // : Chris Harvey - // ^updated - // : 2014-07-08 - .gradient(...) { - background-image: -webkit-linear-gradient(@arguments); - background-image: -moz-linear-gradient(@arguments); - background-image: -ms-linear-gradient(@arguments); - background-image: -o-linear-gradient(@arguments); - background-image: linear-gradient(@arguments); - background-image: -webkit-gradient(@arguments); // "Old Webkit" - } +// Applies a linear gradient background on an Element. +// See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient) for more info. +// See [WPD](http://docs.webplatform.org/wiki/css/functions/linear-gradient) for more info. +// +// ... - any number of parameters +// ^author +// : Chris Harvey +// ^updated +// : 2014-07-08 +.gradient(...) { + background-image: -webkit-linear-gradient(@arguments); + background-image: -moz-linear-gradient(@arguments); + background-image: -ms-linear-gradient(@arguments); + background-image: -o-linear-gradient(@arguments); + background-image: linear-gradient(@arguments); + background-image: -webkit-gradient(@arguments); // "Old Webkit" +} diff --git a/src/__tool.fallback.rotate.less b/src/__tool.fallback.rotate.less index 7f1c61e..834b661 100644 --- a/src/__tool.fallback.rotate.less +++ b/src/__tool.fallback.rotate.less @@ -4,17 +4,17 @@ \*################################*/ - // Use this tool to apply a rotation transformation to an Object. - // - // @rotation - the angle, in degrees, to rotate the Object - // ^author - // : Chris Harvey - // ^updated - // : 2014-05-10 - .rotate(@rotation) { - -webkit-transform: rotate(@rotation); - -moz-transform: rotate(@rotation); - -ms-transform: rotate(@rotation); - -o-transform: rotate(@rotation); - transform: rotate(@rotation); - } +// Use this tool to apply a rotation transformation to an Object. +// +// @rotation - the angle, in degrees, to rotate the Object +// ^author +// : Chris Harvey +// ^updated +// : 2014-05-10 +.rotate(@rotation) { + -webkit-transform: rotate(@rotation); + -moz-transform: rotate(@rotation); + -ms-transform: rotate(@rotation); + -o-transform: rotate(@rotation); + transform: rotate(@rotation); +} diff --git a/src/__tool.fallback.transition.less b/src/__tool.fallback.transition.less index 9e0cd0f..2477391 100644 --- a/src/__tool.fallback.transition.less +++ b/src/__tool.fallback.transition.less @@ -4,35 +4,35 @@ \*################################*/ - // Applies a transition timing effect on an Element. - // - // @props - the CSS property name(s). If more than one, they must be comma-separated - // @dura - (optional: `0ms`) the length in time, in milliseconds, the transition is to be in effect - // @func - (optional: `ease`) the timing-function. See `https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function` - // @delay - (optional: `0ms`) the length in time, in milliseconds, the transition will wait before starting - // ^author - // : Chris Harvey - // ^updated - // : 2014-06-17 - .transition(@props; @dura: 0ms; @func: ease; @delay: 0ms) { - -webkit-transition-property: @props; - -moz-transition-property: @props; - -ms-transition-property: @props; - -o-transition-property: @props; - transition-property: @props; - -webkit-transition-duration: @dura; - -moz-transition-duration: @dura; - -ms-transition-duration: @dura; - -o-transition-duration: @dura; - transition-duration: @dura; - -webkit-transition-timing-function: @func; - -moz-transition-timing-function: @func; - -ms-transition-timing-function: @func; - -o-transition-timing-function: @func; - transition-timing-function: @func; - -webkit-transition-delay: @delay; - -moz-transition-delay: @delay; - -ms-transition-delay: @delay; - -o-transition-delay: @delay; - transition-delay: @delay; - } +// Applies a transition timing effect on an Element. +// +// @props - the CSS property name(s). If more than one, they must be comma-separated +// @dura - (optional: `0ms`) the length in time, in milliseconds, the transition is to be in effect +// @func - (optional: `ease`) the timing-function. See `https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function` +// @delay - (optional: `0ms`) the length in time, in milliseconds, the transition will wait before starting +// ^author +// : Chris Harvey +// ^updated +// : 2014-06-17 +.transition(@props; @dura: 0ms; @func: ease; @delay: 0ms) { + -webkit-transition-property: @props; + -moz-transition-property: @props; + -ms-transition-property: @props; + -o-transition-property: @props; + transition-property: @props; + -webkit-transition-duration: @dura; + -moz-transition-duration: @dura; + -ms-transition-duration: @dura; + -o-transition-duration: @dura; + transition-duration: @dura; + -webkit-transition-timing-function: @func; + -moz-transition-timing-function: @func; + -ms-transition-timing-function: @func; + -o-transition-timing-function: @func; + transition-timing-function: @func; + -webkit-transition-delay: @delay; + -moz-transition-delay: @delay; + -ms-transition-delay: @delay; + -o-transition-delay: @delay; + transition-delay: @delay; +} diff --git a/src/__tool.module.borders.less b/src/__tool.module.borders.less index 3fcae25..d004911 100644 --- a/src/__tool.module.borders.less +++ b/src/__tool.module.borders.less @@ -5,41 +5,41 @@ @import (reference) url('__tool.module.spacing.less'); - // The following mixins adjust border widths for **BLOCK** Objects only! They will keep the - // vertical rhythm intact when adding border widths (by slightly adjusting position and margins). - // Do *not* use these mixins on INLINE Objects! - // - // Note: This mixin affects border width only (for structure). It does not affect cosmetics, - // i.e., border style or color. To change these, you must include the `border-style` and - // `border-color` properties after including this mixin. - // - // `.border-vert(top; ...)` - adjust the top border - // `.border-vert(bottom; ...)` - adjust the bottom border - // `.border-vert(topbot; ...)` - adjust both the top and bottom borders - // `.border-vert(all; ...)` - adjust all four borders - // - // @width - (optional: `0`) value of `border-width` - // ^author - // : Chris Harvey - // ^updated - // : 2015-05-11 - .border-vert(top; @width: 0) { - border-top-width: @width; - .pull-this(@width); - } +// The following mixins adjust border widths for **BLOCK** Objects only! They will keep the +// vertical rhythm intact when adding border widths (by slightly adjusting position and margins). +// Do *not* use these mixins on INLINE Objects! +// +// Note: This mixin affects border width only (for structure). It does not affect cosmetics, +// i.e., border style or color. To change these, you must include the `border-style` and +// `border-color` properties after including this mixin. +// +// `.border-vert(top; ...)` - adjust the top border +// `.border-vert(bottom; ...)` - adjust the bottom border +// `.border-vert(topbot; ...)` - adjust both the top and bottom borders +// `.border-vert(all; ...)` - adjust all four borders +// +// @width - (optional: `0`) value of `border-width` +// ^author +// : Chris Harvey +// ^updated +// : 2015-05-11 +.border-vert(top; @width: 0) { + border-top-width: @width; + .pull-this(@width); +} - .border-vert(bottom; @width: 0) { - border-bottom-width: @width; - .pull-this(@width); - } +.border-vert(bottom; @width: 0) { + border-bottom-width: @width; + .pull-this(@width); +} - .border-vert(topbot; @width: 0) { - border-top-width: @width; - border-bottom-width: @width; - .pull-this(2 * @width); - } +.border-vert(topbot; @width: 0) { + border-top-width: @width; + border-bottom-width: @width; + .pull-this(2 * @width); +} - .border-vert(all; @width: 0) { - border-width: @width; - .pull-this(2 * @width); - } +.border-vert(all; @width: 0) { + border-width: @width; + .pull-this(2 * @width); +} diff --git a/src/__tool.module.clearfix.less b/src/__tool.module.clearfix.less index fdf9bb7..fab2021 100644 --- a/src/__tool.module.clearfix.less +++ b/src/__tool.module.clearfix.less @@ -4,18 +4,18 @@ \*################################*/ - // This tool is used on **containers of floats** (not on floats themselves). - // It pushes subsequent content to the bottom of the container. - // - // ^author - // : Chris Harevy - // ^updated - // : 2016-02-08 - .clearfix() { - &::after { - content: ' '; // older browsers do not support empty content ('') - display: block; - height: 0; - clear: both; - } +// This tool is used on **containers of floats** (not on floats themselves). +// It pushes subsequent content to the bottom of the container. +// +// ^author +// : Chris Harevy +// ^updated +// : 2016-02-08 +.clearfix() { + &::after { + content: ' '; // older browsers do not support empty content ('') + display: block; + height: 0; + clear: both; } +} diff --git a/src/__tool.module.delims.less b/src/__tool.module.delims.less index 7a7f6a2..f889820 100644 --- a/src/__tool.module.delims.less +++ b/src/__tool.module.delims.less @@ -4,30 +4,30 @@ \*################################*/ - // This tool adds opening and closing punctuation marks surrounding an Object. The - // punctuation marks are given by the `quotes` property. - // - // @left - the character for the left delimiter - // @right - the character for the right delimiter - // ^author - // : Chris Harvey - // ^updated - // : 2014-10-11 - .delimiters(@left; @right) { - quotes: @left @right; - &::before { content: open-quote; } - &::after { content: close-quote; } - } +// This tool adds opening and closing punctuation marks surrounding an Object. The +// punctuation marks are given by the `quotes` property. +// +// @left - the character for the left delimiter +// @right - the character for the right delimiter +// ^author +// : Chris Harvey +// ^updated +// : 2014-10-11 +.delimiters(@left; @right) { + quotes: @left @right; + &::before { content: open-quote; } + &::after { content: close-quote; } +} - .parens() { .delimiters('('; ')'); } - .brackets() { .delimiters('['; ']'); } - .braces() { .delimiters('{'; '}'); } - .angles() { .delimiters('<'; '>'); } // '\003c' '\003e' // < > +.parens() { .delimiters('('; ')'); } +.brackets() { .delimiters('['; ']'); } +.braces() { .delimiters('{'; '}'); } +.angles() { .delimiters('<'; '>'); } // '\003c' '\003e' // < > - .apos() { .delimiters('\''; '\''); } // '\0027' '\0027' // ' ' - .quot() { .delimiters('\"'; '\"'); } // '\0022' '\0022' // " " +.apos() { .delimiters('\''; '\''); } // '\0027' '\0027' // ' ' +.quot() { .delimiters('\"'; '\"'); } // '\0022' '\0022' // " " - .quotes-single() { .delimiters('\2018'; '\2019'); } // '‘' '’' // ‘ ’ - .quotes-double() { .delimiters('\201c'; '\201d'); } // '“' '”' // “ ” - .guillemets-single() { .delimiters('\2039'; '\203a'); } // '‹' '›' // ‹ › - .guillemets-double() { .delimiters('\00ab'; '\00bb'); } // '«' '»' // « » +.quotes-single() { .delimiters('\2018'; '\2019'); } // '‘' '’' // ‘ ’ +.quotes-double() { .delimiters('\201c'; '\201d'); } // '“' '”' // “ ” +.guillemets-single() { .delimiters('\2039'; '\203a'); } // '‹' '›' // ‹ › +.guillemets-double() { .delimiters('\00ab'; '\00bb'); } // '«' '»' // « » diff --git a/src/__tool.module.fontsize.less b/src/__tool.module.fontsize.less index 9735872..c8422fb 100644 --- a/src/__tool.module.fontsize.less +++ b/src/__tool.module.fontsize.less @@ -5,21 +5,21 @@ @import (reference) url('__settings.less'); - // This Mixin sets `font-size` and `line-height` such that - // `font-size` * `line-height` = one vertical rhythm unit. - // Use this on elements with `display: block;` or `display: inline-block;` or anything - // that will affect vertical rhythm. - // - // ^params - // @ratio - the ratio of the new font size to `@fontsize_base`, i.e., the number of 'rem's - // @line_height_orig - (default: @g-line_height) the `line-height` of the parent element - // @lines - (default: 1) the number of vrus each line of text will take up. should be a whole number to satisfy vertical rhythm. - // ^author - // : Chris Harvey - // ^updated - // : 2016-01-08 - .font-size-block(@ratio; @line_height_orig: @g-line_height; @lines: 1) { - font-size: (@ratio * @g-1rem); // legacy browsers (see __settings for more info) - font-size: (@ratio * 1rem); - line-height: ((@line_height_orig / @ratio) * @lines); - } +// This Mixin sets `font-size` and `line-height` such that +// `font-size` * `line-height` = one vertical rhythm unit. +// Use this on elements with `display: block;` or `display: inline-block;` or anything +// that will affect vertical rhythm. +// +// ^params +// @ratio - the ratio of the new font size to `@fontsize_base`, i.e., the number of 'rem's +// @line_height_orig - (default: @g-line_height) the `line-height` of the parent element +// @lines - (default: 1) the number of vrus each line of text will take up. should be a whole number to satisfy vertical rhythm. +// ^author +// : Chris Harvey +// ^updated +// : 2016-01-08 +.font-size-block(@ratio; @line_height_orig: @g-line_height; @lines: 1) { + font-size: (@ratio * @g-1rem); // legacy browsers (see __settings for more info) + font-size: (@ratio * 1rem); + line-height: ((@line_height_orig / @ratio) * @lines); +} diff --git a/src/__tool.module.spacing.less b/src/__tool.module.spacing.less index 82d2961..d008e4c 100644 --- a/src/__tool.module.spacing.less +++ b/src/__tool.module.spacing.less @@ -4,48 +4,48 @@ \*################################*/ - // Provides [top|bottom] spacing of any given amount. - // They do *NOT* automatically multiply by a vertical rhythm unit; you have to do that before - // giving an argument. - // The reason these methods exist is to make your life easier so that you don’t have to remember - // whether padding/margin goes on top/bottom. Also, changing it can be done in one step. - // - // Usage: - // Correct vertical rhythm is achieved by positioning elements up and down the page. - // By default, elements may have a top spacing and bottom spacing, but sometimes this has to be - // adjusted because adding a [top|bottom] border offsets the rhythm. - // - // 1. To push the current element down the page, use `.push-this()` - // 2. To push subsequent elements down the page, use `.push-next()` - // 3. To pull the current element, along with subsequent elements, up - // (due to inadvertent pushing of top/bottom border, etc.) use `.pull-this()` - // - // @space - the amout of spacing to insert or remove, in any unit given (px, rems, etc.) as a positive value - // ^author - // : Chris Harvey - // ^updated - // : 2015-03-18 - .push-this(@space) { - padding-top: @space; - } - .push-next(@space) { - margin-bottom: @space; - } - .pull-this(@space) { - margin-top: -@space; - } +// Provides [top|bottom] spacing of any given amount. +// They do *NOT* automatically multiply by a vertical rhythm unit; you have to do that before +// giving an argument. +// The reason these methods exist is to make your life easier so that you don’t have to remember +// whether padding/margin goes on top/bottom. Also, changing it can be done in one step. +// +// Usage: +// Correct vertical rhythm is achieved by positioning elements up and down the page. +// By default, elements may have a top spacing and bottom spacing, but sometimes this has to be +// adjusted because adding a [top|bottom] border offsets the rhythm. +// +// 1. To push the current element down the page, use `.push-this()` +// 2. To push subsequent elements down the page, use `.push-next()` +// 3. To pull the current element, along with subsequent elements, up +// (due to inadvertent pushing of top/bottom border, etc.) use `.pull-this()` +// +// @space - the amout of spacing to insert or remove, in any unit given (px, rems, etc.) as a positive value +// ^author +// : Chris Harvey +// ^updated +// : 2015-03-18 +.push-this(@space) { + padding-top: @space; +} +.push-next(@space) { + margin-bottom: @space; +} +.pull-this(@space) { + margin-top: -@space; +} - // Higher-level concepts for spacing. - // The default top spacing is `.push-this()` and the default bottom spacing is `.push-next()`. - // - // @space - the amout of spacing to insert or remove, in any unit given (px, rems, etc.) as a positive value - // ^author - // : Chris Harvey - // ^updated - // : 2015-03-18 - .spacing-top(@space) { - .push-this(@space); - } - .spacing-bottom(@space) { - .push-next(@space); - } +// Higher-level concepts for spacing. +// The default top spacing is `.push-this()` and the default bottom spacing is `.push-next()`. +// +// @space - the amout of spacing to insert or remove, in any unit given (px, rems, etc.) as a positive value +// ^author +// : Chris Harvey +// ^updated +// : 2015-03-18 +.spacing-top(@space) { + .push-this(@space); +} +.spacing-bottom(@space) { + .push-next(@space); +} diff --git a/src/__tool.module.sprite.less b/src/__tool.module.sprite.less index 7cd1451..f6cea5a 100644 --- a/src/__tool.module.sprite.less +++ b/src/__tool.module.sprite.less @@ -4,25 +4,25 @@ \*################################*/ - // Sets the background position of an Object’s background sprite image. - // - // @{[horizontal|vertcial]} - whether the sprite’s images are linearly horizontally or vertically ordered. - // @position - the position of the sprite’s image to be used, starting at 1. must be a positive integer. - // @iconsize - the horizontal (x) size of the sprite’s image. in pixels. - // @iconpadd - the padding between images in the sprite’s image. in pixels. - // ^author - // : Chris Harvey - // ^updated - // : 2016-01-19 - .sprite(horizontal; @position; @iconsize; @iconpadd) when (@position > 1) { - background-position: ((@position - 1) * -(@iconsize + @iconpadd)) 0; - } - .sprite(horizontal; @position; @iconsize; @iconpadd) when (@position = 1) { - background-position: 0 0; - } - .sprite(vertical; @position; @iconsize; @iconpadd) when (@position > 1) { - background-position: 0 ((@position - 1) * -(@iconsize + @iconpadd)); - } - .sprite(vertical; @position; @iconsize; @iconpadd) when (@position = 1) { - background-position: 0 0; - } +// Sets the background position of an Object’s background sprite image. +// +// @{[horizontal|vertcial]} - whether the sprite’s images are linearly horizontally or vertically ordered. +// @position - the position of the sprite’s image to be used, starting at 1. must be a positive integer. +// @iconsize - the horizontal (x) size of the sprite’s image. in pixels. +// @iconpadd - the padding between images in the sprite’s image. in pixels. +// ^author +// : Chris Harvey +// ^updated +// : 2016-01-19 +.sprite(horizontal; @position; @iconsize; @iconpadd) when (@position > 1) { + background-position: ((@position - 1) * -(@iconsize + @iconpadd)) 0; +} +.sprite(horizontal; @position; @iconsize; @iconpadd) when (@position = 1) { + background-position: 0 0; +} +.sprite(vertical; @position; @iconsize; @iconpadd) when (@position > 1) { + background-position: 0 ((@position - 1) * -(@iconsize + @iconpadd)); +} +.sprite(vertical; @position; @iconsize; @iconpadd) when (@position = 1) { + background-position: 0 0; +} diff --git a/src/__tool.module.translucent.less b/src/__tool.module.translucent.less index b5960e6..810cba9 100644 --- a/src/__tool.module.translucent.less +++ b/src/__tool.module.translucent.less @@ -4,13 +4,14 @@ \*################################*/ - // Makes an object slightly transparent, but it becomes opaque upon `:hover`. - // - // ^author - // : Chris Harvey - // ^updated - // : 2014-10-07 - .translucent() { - opacity: 0.5; - &:hover { opacity: 1; } - } +// Makes an object slightly transparent, but it becomes opaque upon `:hover`. +// NOTE THIS MIXIN IS NOW DEPRECATED +// +// ^author +// : Chris Harvey +// ^updated +// : 2014-10-07 +.translucent() { + opacity: 0.5; + &:hover { opacity: 1; } +} diff --git a/src/_base.grouping.paras.less b/src/_base.grouping.paras.less index 4c0b7eb..06a70b7 100644 --- a/src/_base.grouping.paras.less +++ b/src/_base.grouping.paras.less @@ -5,8 +5,6 @@ figure, blockquote, pre { - // margin-left: 1rem; - // margin-right: 1rem; } p { @@ -19,19 +17,6 @@ figure { } figcaption { } -// A `blockquote` represents material taken directly from another source. Typically, -// block quotations are used when the original source has more than 40 words and/or contains -// paragraph breaks. In either of these cases, the `blockquote` should contain child `p` Elements -// that correspond to the source (or not have any children `p` Elements if the source does not). -// -// -// In a normal block quote, the credit to the source of the quoted work should be indicated by -// a `blockquote > footer > cite`. -// -// ^author -// : Chris Harvey -// ^updated -// : 2015-02-17 blockquote { } pre { diff --git a/src/_base.sections.less b/src/_base.sections.less index c76d22f..ff7fd56 100644 --- a/src/_base.sections.less +++ b/src/_base.sections.less @@ -10,9 +10,6 @@ body { } main { - // @media screen { - // margin: 0 1rem; - // } } section { } diff --git a/xmeter.less b/xmeter.less index 43b700a..3014f5b 100644 --- a/xmeter.less +++ b/xmeter.less @@ -29,13 +29,13 @@ * sections......................secioning content and section-related elements * grouping......................grouping content * ....paras.........................paragraphs, block-level textual elements - * ....lists.........................ordered, unordered, association + * ....lists.........................ordered, unordered, dictionary * ....tables........................tables * text..........................text-level and inline elements * ....links.........................inline hyperlinks - * ....stress........................text outstanding from surrounding prose (e.g., and ) - * ....doctext.......................documentation elements (e.g., and ) - * ....data..........................machine- or human-readable data (e.g.,