Merge branch 'stage-v4.3.0'

doc/include/_main-content.jade

@@ -217,7 +217,7 @@ mixin main-content(args)
       h3 Links
       figure(class=classnames.figure): ul
         li: a a
-        li: a(href) a[href]
+        li: a(href="") a[href]
         if appending['links__list']
           +links__list()
     section#stress
@@ -239,7 +239,7 @@ mixin main-content(args)
         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: abbr(title) abbreviation or acronym #[code(class=classnames.code) abbr[title]]
+        li: abbr(title="") abbreviation or acronym #[code(class=classnames.code) abbr[title]]
         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]
@@ -251,7 +251,7 @@ mixin main-content(args)
       h3 Data
       figure(class=classnames.figure): ul
         li: time(datetime="Z") a specific date or time #[code(class=classnames.code) time]
-        li: data(value)        generic machine-readable data #[code(class=classnames.code) data]
+        li: data(value="")     generic machine-readable data #[code(class=classnames.code) data]
         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]

doc/styles/doc.css

@@ -10,21 +10,31 @@ body {
   background-repeat: repeat;
   background-position: left top;
 }
-.x-c-Code {
-  padding: 1px 2px;
-  border-radius: 3px;
-  background-color: #f4f8f0;
-  color: #008080;
+.x-code,
+.x-pre {
+  background-color: #333;
+  color: #ccc;
+  border-radius: 0.25rem;
 }
-.x-c-Fig {
+.x-code u,
+.x-pre u {
+  color: #6c6;
+}
+.x-code {
+  padding: 2px 4px;
+}
+.x-pre {
+  padding: 0.75rem 0.5rem;
+}
+.x-figure {
   margin-left: 1rem;
   margin-right: 1rem;
   padding: 0.75rem 0.5rem;
   border-width: 1px;
   margin-top: -2px;
   border-style: solid;
-  border-color: #e5eaef;
-  border-radius: 8px;
+  border-color: #ddd;
+  border-radius: 0.5rem;
   position: relative;
-  background: rgba(245, 250, 255, 0.5);
+  background: #eee;
 }

doc/styles/doc.less

@@ -20,20 +20,26 @@ body {
   background-repeat: repeat;
   background-position: left top;
 }
-.x-c-Code {
-  padding: 1px 2px;
-  border-radius: 3px;
-  background-color: #f4f8f0;
-  color: #008080;
+.x-code, .x-pre {
+  background-color: #333;
+  color: #ccc;
+  border-radius: 0.25rem;
+  u { color: #6c6; } // good contrast ratio
 }
-.x-c-Fig {
+.x-code {
+  padding: 2px 4px;
+}
+.x-pre {
+  padding: (0.5*@g-vru) 0.5rem;
+}
+.x-figure {
   margin-left: 1rem;
   margin-right: 1rem;
   padding: (0.5*@g-vru) 0.5rem;
   .border-vert(all; 1px);
   border-style: solid;
-  border-color: #e5eaef;
-  border-radius: 8px;
+  border-color: #ddd;
+  border-radius: 0.5rem;
   position: relative;
-  background: rgba(245, 250, 255, 0.5);
+  background: #eee;
 }

doc/test.jade

@@ -15,8 +15,8 @@ html(lang="en")
       +main-content({
         main_heading: project_name + ' — ' + page_title
       , classnames: {
-          figure: 'x-c-Fig'
-        , code  : 'x-c-Code'
+          figure: 'x-figure'
+        , code  : 'x-code'
         }
       })
     script.

package.json

@@ -1,16 +1,16 @@
 {
   "name": "xmeter",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "A default stylesheet with a set of tools that make designing with vertical rhythm easy.",
   "main": "xmeter.css",
   "dependencies": {},
   "devDependencies": {
-    "clean-css": "^3.4.5",
+    "clean-css": "^3.4.17",
     "jade": "^1.11.0",
-    "less": "^2.5.3",
+    "less": "^2.7.1",
     "lessc-each": "^1.1.0",
     "normalize.css": "^4.1.1",
-    "resetcss": "^1.0.2"
+    "resetcss": "^1.0.3"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -19,6 +19,7 @@
     "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",
+    "unbuild": "rm doc/test.html doc/styles/doc.css xmeter.css xmeter.min.css",
     "build": "npm run jade:all  &&  npm run lessc:all  &&  npm run minify"
   },
   "repository": {
@@ -30,14 +31,13 @@
     "default",
     "stylesheet",
     "normalize",
-    "vertical",
-    "rhythm",
+    "vertical rhythm",
     "less"
   ],
   "author": "Chris Harvey <[email protected]> (https://chharvey.github.io/)",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/chharvey/xmeter/issues"
   },
-  "homepage": "https://github.com/chharvey/xmeter/blob/gh-pages/README.md"
+  "homepage": "https://github.com/chharvey/xmeter#readme"
 }

src/__tool.fallback.flexbox.less

@@ -139,22 +139,6 @@
 //++++++++++++++++++++++++++++++++//
 //    # ITEMS
 //++++++++++++++++++++++++++++++++//
-// 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
-//            negative integers may be used.
-// ^author
-// : Chris Harvey
-// ^updated
-// : 2015-09-03
-.flex-order(@integer: 0) {
-  -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`)
 //
@@ -177,6 +161,22 @@
           align-self: @align;
 }
 
+// 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
+//            negative integers may be used.
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2015-09-03
+.flex-order(@integer: 0) {
+  -webkit-box-ordinal-group: @integer;
+     -moz-box-ordinal-group: @integer;
+             -ms-flex-order: @integer;
+              -webkit-order: @integer;
+                      order: @integer;
+}
+
 // Specifies what amount of space inside the flex container this item should take up.
 //
 // ^param
@@ -226,17 +226,41 @@
 }
 
 // Shorthand for `flex-grow`, `flex-shrink`, and `flex-basis` properties (in that order).
+// Options for the argument:
+// 0. `initial` - (default) computes to `0 1 auto` [1]
+// 1. `none`    - computes to `0 0 auto`           [2]
+// 2. `‹flex-grow›`                                [3]
+// 3. `‹flex-grow› ‹flex-shrink›`                  [3]
+// 4. `‹flex-basis›`                               [3]
+// 5. `‹flex-grow› ‹flex-basis›`                   [3]
+// 6. `‹flex-grow› ‹flex-shrink› ‹flex-basis›`
+// Notes:
+// [1] `initial` - the flex item retains its content width but will shrink
+//     if there is not enough space in the flex container.
+//     It will not grow if there is extra space.
+// [2] `none` - the flex item is set to its content width, and
+//     will neither grow nor shrink, regardless of
+//     whether there is extra or not enough space in the container.
+// [3] When a value is left out, it defaults to the following:
+//     - `‹flex-grow›`   - 1
+//     - `‹flex-shrink›` - 1
+//     - `‹flex-basis›`  - `0%`
+//     For example:
+//     - `flex: auto;` = `flex: 1 1 auto;`
+//       the flex item is set to its content width, but
+//       will either grow or shrink, based on
+//       whether there is extra or not enough space in the container.
+//     - `flex: 1;` = `flex: 1 1 0%;`
+//       The flex item starts at 0% but grows or shrinks as necessary
+//       with the other items to fill or reduce the extra space.
+//       If all items have `flex: 1` then they will be equal.
+//       (If there are 4 items then they will all be 25%.)
+//     - `flex: 50%;` = `flex: 1 1 50%;`
+//       The flex item starts at 50% but grows or shrinks as necessary.
 //
 // @arg - a space-separated list of:
-//      - none | [ ‹number› ‹number›? || ‹length› ]
-//      - options:
-//        0. `initial` - (default) computes to `0 1 auto`
-//        1. `none`    - computes to `0 0 auto`
-//        2. `‹flex-grow›`
-//        3. `‹flex-grow› ‹flex-shrink›`
-//        4. `‹flex-basis›`
-//        5. `‹flex-grow› ‹flex-basis›`
-//        6. `‹flex-grow› ‹flex-shrink› ‹flex-basis›`
+//        none | [ ‹number› ‹number›? || ‹length› ]
+//        (see options above)
 // ^author
 // : Chris Harvey
 // ^updated

src/__tool.fallback.gradient.less

@@ -4,6 +4,16 @@
 \*################################*/
 
 
+///////////////////////////////////////////////////////////////////////////////
+// CHANGED DEPRECATED
+// IMPORTANT!!!
+// ------------
+// As of v4.3.0
+// This entire file and the code therein is DEPRECATED due to
+// renaming. see `__tool.fallback.linear-gradient.less`
+// This file will be OBSOLETE and deleted on Version 5.
+///////////////////////////////////////////////////////////////////////////////
+
 // Applies a single linear gradient background on an element.
 // This is an unusual property in that a single css value list is comprised
 // of comma-separated values (unlike normal css value lists which are space-separated).
@@ -20,9 +30,6 @@
 // : Chris Harvey
 // ^updated
 // : 2014-07-08
-///////////////////////////////////////////////////////////////////////////////
-// CHANGED: DEPRECATED. use `linear-gradient` name below.
-///////////////////////////////////////////////////////////////////////////////
 .gradient(@arg) {
   background-image: -webkit-linear-gradient(@arg);
   background-image:    -moz-linear-gradient(@arg);

src/__tool.fallback.linear-gradient.less

@@ -4,6 +4,19 @@
 \*################################*/
 
 
+///////////////////////////////////////////////////////////////////////////////
+// CHANGED DEPRECATED
+// IMPORTANT!!!
+// ------------
+// As of v4.3.0
+// This entire file and the code therein is DEPRECATED due to
+// widespread support of the non-prefixed `linear-gradient()` function
+// and inconsistent browser discrepancies.
+// It is much easier to hand-write these discrepancies for browsers that need it,
+// rather than to try to create a mixin with a given set of arguments.
+// This file will be OBSOLETE and deleted on Version 5.
+///////////////////////////////////////////////////////////////////////////////
+
 // Applies a single linear gradient background on an element.
 // This is an unusual property in that a single css value list is comprised
 // of comma-separated values (unlike normal css value lists which are space-separated).

src/__tool.fallback.transform-origin.less

@@ -0,0 +1,31 @@
+
+/*################################*\
+    xmeter  |  __tool.fallback.transform-origin.less
+\*################################*/
+
+
+// Specifies the origin for transformations of an element.
+// The argument must have the following syntax:
+//     ‹offset_all› | [ ‹offset_2d› ‹offset_z›? ]
+// where:
+// - ‹offset_all› = <percentage> | <length> | left | center | right | top | bottom
+// - ‹offset_2d›  = ‹offset_x› && ‹offset_y›
+// - ‹offset_x›   = <percentage> | <length> | left | center | right
+// - ‹offset_y›   = <percentage> | <length> | top  | center | bottom
+// - ‹offset_z›   = <length>
+//
+// ^url
+// : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
+// ^params
+// : @arg - (default: `50% 50% 0`) see comment above
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2016-05-18
+.transform-origin(@arg: 50% 50% 0) {
+  -webkit-transform-origin: @arg;
+     -moz-transform-origin: @arg;
+      -ms-transform-origin: @arg;
+       -o-transform-origin: @arg;
+          transform-origin: @arg;
+}

src/_base.generic.less

@@ -38,15 +38,15 @@ html {
 // they should scale with their parents.
 // Also, inline elements should not affect vertical rhythm, thus line-heights are zero.
 span, br,
-em, strong, i, mark, u, small,
+em, strong, i, mark, u, small, s
 dfn, b, abbr, var, q, cite, sup, sub,
 data, time, code, kbd, samp {
   line-height: 0;
 }
 
 // Elements with a transparent content model
 // should display what their contents display.
-a, s, ins, del {
+a, ins, del {
   // display: inherit;
   // line-height: inherit;
   // h1 > &, h2 > &, h3 > &, h4 > &, h5 > &, h6 > &,

src/_base.grouping.paras.less

@@ -13,6 +13,7 @@ pre {
   text-align: left;
   text-indent: 0;
   white-space: pre;
+  overflow: auto;
 }
 figure {
   // undo Normalize

src/_base.grouping.tables.less

@@ -6,6 +6,8 @@
 
 table {
   max-width: 100%; // fluid tables for responsive purposes
+  border-collapse: collapse;
+  text-align: left; // fix browser bug
 }
 caption {
   text-align: center;

src/_base.sections.less

@@ -6,11 +6,6 @@
 @import (reference) url('__tool.module.fontsize.less');
 
 
-html,
-body {
-  width: 100%;
-  height: 100%;
-}
 body {
 }
 main {