Merge branch 'stage-v4.2.0'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "xmeter",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "A default stylesheet with a set of tools that make designing with vertical rhythm easy.",
   "main": "xmeter.css",
   "dependencies": {},
@@ -9,17 +9,17 @@
     "jade": "^1.11.0",
     "less": "^2.5.3",
     "lessc-each": "^1.1.0",
-    "normalize.css": "^3.0.3",
+    "normalize.css": "^4.1.1",
     "resetcss": "^1.0.2"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "jade:all": "jade doc/test.jade",
     "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",
+    "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"
+    "build": "npm run jade:all  &&  npm run lessc:all  &&  npm run minify"
   },
   "repository": {
     "type": "git",

src/__settings.less

@@ -4,7 +4,7 @@
 \*################################*/
 
 
-// NOTE: the prefix `g-` on each variable stands for "global" because these variables
+// 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.
@@ -15,7 +15,6 @@
 // - 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-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);

src/__tool.fallback.box-sizing.less

@@ -14,7 +14,7 @@
 // : Chris Harvey
 // ^updated
 // : 2014-10-21
-.box-sizing(@box) {
+.box-sizing(@box: content-box) {
   -webkit-box-sizing: @box;
      -moz-box-sizing: @box;
           box-sizing: @box;

src/__tool.fallback.column-count.less

@@ -13,7 +13,7 @@
 // : Chris Harvey
 // ^updated
 // : 2015-10-23
-.column-count(@n) {
+.column-count(@n: auto) {
   -webkit-column-count: @n;
      -moz-column-count: @n;
           column-count: @n;

src/__tool.fallback.column-width.less

@@ -13,7 +13,7 @@
 // : Chris Harvey
 // ^updated
 // : 2016-02-08
-.column-width(@n) {
+.column-width(@n: auto) {
   -webkit-column-width: @n;
      -moz-column-width: @n;
           column-width: @n;

src/__tool.fallback.filter.less

@@ -4,17 +4,17 @@
 \*################################*/
 
 
-// Applies one or more graphical filter effects on an element.
+// Applies graphical filter effects on an element.
 //
 // ^url
 // : https://developer.mozilla.org/en-US/docs/Web/CSS/filter
 // ^params
-// : @arg - a list of space-separated filter functions
+// : @arg - (default: `none`) a list of zero or more space-separated filter functions
 // ^author
 // : Chris Harvey
 // ^updated
 // : 2016-04-05
-.filter(@arg) {
+.filter(@arg: none) {
   -webkit-filter: @arg;
      -moz-filter: @arg;
       -ms-filter: @arg;

src/__tool.fallback.flexbox.less

@@ -43,7 +43,7 @@
 // : Chris Harvey
 // ^updated
 // : 2015-02-12
-.flex-direction(@direction) {
+.flex-direction(@direction: row) {
   -webkit-flex-direction: @direction;
      -moz-flex-direction: @direction;
       -ms-flex-direction: @direction;
@@ -60,7 +60,7 @@
 // : Chris Harvey
 // ^updated
 // : 2015-02-12
-.flex-wrap(@wrap) {
+.flex-wrap(@wrap: nowrap) {
   -webkit-flex-wrap: @wrap;
      -moz-flex-wrap: @wrap; // no support for Firefox 27 and older (28+ uses `flex-wrap`)
       -ms-flex-wrap: @wrap;
@@ -83,7 +83,7 @@
 // : Chris Harvey
 // ^updated
 // : 2015-10-12
-.flex-justify-content(@justify) {
+.flex-justify-content(@justify: flex-start) {
   -webkit-justify-content: @justify;
      -moz-justify-content: @justify;
       -ms-justify-content: @justify;
@@ -106,7 +106,7 @@
 // : Chris Harvey
 // ^updated
 // : 2015-09-03
-.flex-align-content(@align) {
+.flex-align-content(@align: stretch) {
   -webkit-align-content: @align;
      -moz-align-content: @align;
       -ms-align-content: @align;
@@ -127,7 +127,7 @@
 // : Chris Harvey
 // ^updated
 // : 2015-09-03
-.flex-align-items(@align) {
+.flex-align-items(@align: stretch) {
   -webkit-align-items: @align;
      -moz-align-items: @align;
       -ms-align-items: @align;
@@ -147,7 +147,7 @@
 // : Chris Harvey
 // ^updated
 // : 2015-09-03
-.flex-order(@integer) {
+.flex-order(@integer: 0) {
   -webkit-box-ordinal-group: @integer;
      -moz-box-ordinal-group: @integer;
              -ms-flex-order: @integer;
@@ -170,7 +170,7 @@
 // : Chris Harvey
 // ^updated
 // : 2015-10-14
-.flex-align-self(@align) {
+.flex-align-self(@align: auto) {
   -webkit-align-self: @align;
      -moz-align-self: @align;
       -ms-align-self: @align;
@@ -186,7 +186,7 @@
 // : Chris Harvey
 // ^updated
 // : 2016-04-26
-.flex-grow(@number) {
+.flex-grow(@number: 0) {
   -webkit-flex-grow: @number;
       -ms-flex-grow: @number;
           flex-grow: @number;
@@ -202,7 +202,7 @@
 // : Chris Harvey
 // ^updated
 // : 2016-04-26
-.flex-shrink(@number) {
+.flex-shrink(@number: 1) {
   -webkit-flex-shrink: @number;
       -ms-flex-shrink: @number;
           flex-shrink: @number;
@@ -219,7 +219,7 @@
 // : Chris Harvey
 // ^updated
 // : 2016-04-26
-.flex-basis(@width) {
+.flex-basis(@width: auto) {
   -webkit-flex-basis: @width;
       -ms-flex-basis: @width;
           flex-basis: @width;
@@ -230,7 +230,7 @@
 // @arg - a space-separated list of:
 //      - none | [ ‹number› ‹number›? || ‹length› ]
 //      - options:
-//        0. `initial` - computes to `0 1 auto`
+//        0. `initial` - (default) computes to `0 1 auto`
 //        1. `none`    - computes to `0 0 auto`
 //        2. `‹flex-grow›`
 //        3. `‹flex-grow› ‹flex-shrink›`
@@ -241,7 +241,7 @@
 // : Chris Harvey
 // ^updated
 // : 2015-09-03
-.flex(@arg) {
+.flex(@arg: initial) {
   -webkit-box-flex: @arg;
      -moz-box-flex: @arg;
       -webkit-flex: @arg;

src/__tool.fallback.linear-gradient.less

@@ -14,13 +14,14 @@
 // See [WPD](http://docs.webplatform.org/wiki/css/functions/linear-gradient) for more info.
 //
 // ^params
-// : @arg - a list of comma-separated components (each as a component of one gradient value).
+// : @arg - (default: `0deg, #fff`) a list of comma-separated components,
+//          each as a component of one gradient value.
 //          Must be terminated with a semicolon (;).
 // ^author
 // : Chris Harvey
 // ^updated
 // : 2014-07-08
-.linear-gradient(@arg) {
+.linear-gradient(@arg: 0deg, #fff;) {
   background-image: -webkit-linear-gradient(@arg);
   background-image:    -moz-linear-gradient(@arg);
   background-image:     -ms-linear-gradient(@arg);

src/__tool.fallback.rotate.less

@@ -13,7 +13,6 @@
 // : 2014-05-10
 ///////////////////////////////////////////////////////////////////////////////
 // CHANGED: THIS MIXIN IS DEPRECATED.
-// CHANGED
 // IMPORTANT!!!
 // ------------
 // As of v4.1.0

src/__tool.fallback.transform.less

@@ -4,17 +4,17 @@
 \*################################*/
 
 
-// Applies one or more transformations to an element.
+// Applies transformations to an element.
 //
 // ^url
 // : https://developer.mozilla.org/en-US/docs/Web/CSS/transform
 // ^params
-// : @arg - a list of space-separated transformation functions
+// : @arg - (default: `none`) a list of zero or more space-separated transformation functions
 // ^author
 // : Chris Harvey
 // ^updated
 // : 2016-05-04
-.transform(@arg) {
+.transform(@arg: none) {
   -webkit-transform: @arg;
      -moz-transform: @arg;
       -ms-transform: @arg;

src/__tool.fallback.transition.less

@@ -4,35 +4,71 @@
 \*################################*/
 
 
-// Applies a single transition timing effect on an element.
+// Applies individual longhand transition-* properties on an element.
 // Each parameter must be a list of (zero or more) comma-separated values.
-// The default value of each parameter is the default value of its corresponding css property.
+// The default value of each parameter is the default value of its
+// corresponding longhand css property.
 //
 // ^params
-// : @props - the CSS property name(s)
-// : @dura  - (optional: `0ms`) the length(s) in time, in milliseconds, the transition is to be in effect
-// : @func  - (optional: `ease`) the timing-function(s). See `https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function`
-// : @delay - (optional: `0ms`) the length(s) in time, in milliseconds, the transition will wait before starting
+// : @props - (default: `all`)  the CSS property name(s)
+// : @dura  - (default: `0ms`)  the length(s) in time, in milliseconds, the transition is to be in effect
+// : @func  - (default: `ease`) the timing-function(s). See `https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function`
+// : @delay - (default: `0ms`)  the length(s) 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) {
+// : 2016-05-18
+///////////////////////////////////////////////////////////////////////////////
+// CHANGED: THIS MIXIN IS DEPRECATED. see `.transitions()` below
+///////////////////////////////////////////////////////////////////////////////
+.transition(@props: all; @dura: 0ms; @func: ease; @delay: 0ms) {
+  .transitions(@props; @dura; @func; @delay);
+}
+.transitions(@props: all; @dura: 0ms; @func: ease; @delay: 0ms) {
+  .transition-property(@props);
+  .transition-duration(@dura);
+  .transition-timing-function(@func);
+  .transition-delay(@delay);
+}
+
+// The following 4 mixins set one or more longhand transition-* values on an element
+// (`transition-property`, `transition-duration`, `transition-timing-function`, and
+// `transition-delay`, repsectively).
+// Each mixin takes one argument, which is a list of (zero or more) comma-separated values.
+// If the list contains more than one value, you MUST terminate it with a semicolon,
+// or the Less compiler will interpret your comma-separated list as multiple arguments.
+//
+// ^params
+// : @props - (default: `all`)  the CSS property name(s)
+// : @dura  - (default: `0ms`)  the length(s) in time, in milliseconds, the transition is to be in effect
+// : @func  - (default: `ease`) the timing-function(s). See `https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function`
+// : @delay - (default: `0ms`)  the length(s) in time, in milliseconds, the transition will wait before starting
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2016-05-17
+.transition-property(@props: all) {
   -webkit-transition-property: @props;
      -moz-transition-property: @props;
       -ms-transition-property: @props;
        -o-transition-property: @props;
           transition-property: @props;
+}
+.transition-duration(@dura: 0ms) {
   -webkit-transition-duration: @dura;
      -moz-transition-duration: @dura;
       -ms-transition-duration: @dura;
        -o-transition-duration: @dura;
           transition-duration: @dura;
+}
+.transition-timing-function(@func: ease) {
   -webkit-transition-timing-function: @func;
      -moz-transition-timing-function: @func;
       -ms-transition-timing-function: @func;
        -o-transition-timing-function: @func;
           transition-timing-function: @func;
+}
+.transition-delay(@delay: 0ms) {
   -webkit-transition-delay: @delay;
      -moz-transition-delay: @delay;
       -ms-transition-delay: @delay;
@@ -41,14 +77,17 @@
 }
 
 // Applies multiple transition timing effects on an element.
+// Each transition effect must have the syntax:
+//     [ none | all | ‹single-transition-property› ] || ‹time› || ‹single-transition-timing-function› || ‹time›
+// If more than one, list of transitions must be comma-separated and terminated with a semicolon.
 //
 // ^params
 // : @arg - (optional: `all 0ms ease 0ms`) a list of (zero or more) comma-separated transition effects.
 //          Must be terminated with a semicolon (;).
 // ^author
 // : Chris Harvey
 // ^updated
-// : 2014-06-17
+// : 2016-05-04
 .transition-multi(@arg: all 0ms ease 0ms) {
   -webkit-transition: @arg;
      -moz-transition: @arg;

src/__tool.module.delims.less

@@ -13,6 +13,9 @@
 // : Chris Harvey
 // ^updated
 // : 2014-10-11
+///////////////////////////////////////////////////////////////////////////////
+// CHANGED: THIS MIXIN IS DEPRECATED. see `.delims()` below
+///////////////////////////////////////////////////////////////////////////////
 .delimiters(@left; @right) {
   quotes: @left @right;
   &::before { content: open-quote; }
@@ -31,3 +34,36 @@
 .quotes-double()     { .delimiters('\201c'; '\201d'); } // '“' '”' // “  ”
 .guillemets-single() { .delimiters('\2039'; '\203a'); } // '‹' '›' // ‹ ›
 .guillemets-double() { .delimiters('\00ab'; '\00bb'); } // '«' '»' // «  »
+
+
+///////////////////////////////////////////////////////////////////////////////
+// CHANGED: THIS NEW MIXIN HAS PRECEDENCE
+// TODO UNCOMMENT THE MIXINS BELOW ON Version 5+
+///////////////////////////////////////////////////////////////////////////////
+// This tool adds opening and closing punctuation marks surrounding an element.
+// The punctuation marks are given by the `quotes` property.
+//
+// @arg - (default: `none`) an even number of space-separated left/right delimiters,
+//        each pair used for one level of nested quotation.
+// ^author
+// : Chris Harvey
+// ^updated
+// : 2016-05-05
+.delims(@arg: none) {
+  quotes: @arg;
+  &::before { content: open-quote; }
+  &::after  { content: close-quote; }
+}
+
+// .parens()            { .delimiters('(' ')'); }
+// .brackets()          { .delimiters('[' ']'); }
+// .braces()            { .delimiters('{' '}'); }
+// .angles()            { .delimiters('<' '>'); }   // '\003c' '\003e' // &lt;     &gt;
+//
+// .apos()              { .delimiters('\'' '\''); } // '\0027' '\0027' // &apos;   &apos;
+// .quot()              { .delimiters('\"' '\"'); } // '\0022' '\0022' // &quot;   &quot;
+//
+// .quotes-single()     { .delimiters('\2018' '\2019'); } // '‘' '’' // &lsquo;  &rsquo;
+// .quotes-double()     { .delimiters('\201c' '\201d'); } // '“' '”' // &ldquo;  &rdquo;
+// .guillemets-single() { .delimiters('\2039' '\203a'); } // '‹' '›' // &lsaquo; &rsaquo;
+// .guillemets-double() { .delimiters('\00ab' '\00bb'); } // '«' '»' // &laquo;  &raquo;