Merge branch 'fix'; tag v5.6.2

docs/_docs.tpl.jade

@@ -24,7 +24,7 @@ html(lang="en")
       block
   block vars
   head
-    title= page.title() || (page.name() + ' | ' + Docs.DOCS.name())
+    title= page.title() || `${page.name()} | ${Docs.DOCS.name()}`
     meta(charset="utf-8")
     meta(name="description" content=Docs.DOCS.description())
     meta(name="viewport" content="width=device-width, initial-scale=1")

docs/tools.md

@@ -180,17 +180,44 @@ so that subsequent elements will not be pushed down the page.
 }
 ```
 #### Box-Shadow Hack
-**Note**: You may use a hack involving `box-shadow` to create a border around all 4 sides,
-which will not affect vertical rhythm. The box-shadow must be outset, have an offset-x of 0,
+**Tip:** You may use a hack involving `box-shadow` to emulate a border that won’t affect
+vertical rhythm. Borders add to the box’s height, which slightly but noticeably
+move subsequent content down the page, messing with typographical grid lines. Box shadows,
+on the other hand, do not affect the box’s height, so you can apply one without
+having to reposition the box or changing its top margin.
+
+Note that this hack is similar to using the `outline` property, except that
+[`outline` behaves slightly differently](https://css-tricks.com/almanac/properties/o/outline/).
+
+There are two ways you can use this hack:
+to emulate borders on all 4 sides, or to emulate a top (or bottom) border.
+
+To emulate a border on all sides, the box-shadow must be outset, have an offset-x of 0,
 an offset-y of 0, a blur of 0, and a spread of `<length>`, which is the effective border width.
 ```less
-.your-class {
+.border-all {
   // .border-vert(all; <length>); // using box-shadow instead
   box-shadow 0 0 0 <length> <color>;
 }
 ```
-There are a few limitations of this hack: it can only be used in the case of `.border-vert(all)`,
-because the box shadow must appear on all 4 sides. The effective border color must be provided
+To emulate a top or bottom border, use outset, offset-x 0, offset-y `<length>`, blur 0, and spread 0.
+The shadow will emulate a border-bottom if `<length>` is positive, or border-top if negative.
+```less
+.border-bottom {
+  // .border-vert(bottom; <length>); // using box-shadow instead
+  box-shadow 0 <length> 0 0 <color>;
+}
+.border-top {
+  // .border-vert(top; <length>); // using box-shadow instead
+  box-shadow 0 -<length> 0 0 <color>;
+}
+```
+
+**Sub-Tip:** Use `inset` to keep the box-shadow constrained within the bounds of the box’s `box-sizing`.
+
+There are a few limitations of this hack: it cannot be used in the case of `.border-vert(topbot)`,
+because you can’t get the box shadow to appear only on opposing sides.
+The effective border color must be provided
 in the same declaration, and the effective border-style cannot be specified; it will always be solid.
 
 ### border-radius

package.json

@@ -1,6 +1,6 @@
 {
   "name": "xmeter",
-  "version": "5.6.1",
+  "version": "5.6.2",
   "description": "A default stylesheet with a set of tools that make designing with vertical rhythm easy.",
   "main": "xmeter.css",
   "dependencies": {},

src/__fallback.align-content.less

@@ -13,9 +13,9 @@
 // ^author
 // : Chris Harvey
 // ^updated
-// : 2017-03-20
+// : 2017-06-02
 .align-content(@align: normal) {
-  -webkit-align-content: @align;
+     -ms-flex-line-pack: @align;
       -ms-align-content: @align;
           align-content: @align;
 }

src/__fallback.align-items.less

@@ -13,9 +13,10 @@
 // ^author
 // : Chris Harvey
 // ^updated
-// : 2017-03-20
+// : 2017-06-02
 .align-items(@align: normal) {
-  -webkit-align-items: @align;
+    -webkit-box-align: @align;
+       -ms-flex-align: @align;
       -ms-align-items: @align;
           align-items: @align;
 }

src/__fallback.align-self.less

@@ -13,8 +13,9 @@
 // ^author
 // : Chris Harvey
 // ^updated
-// : 2017-03-20
+// : 2017-06-02
 .align-self(@align: auto) {
+ -ms-flex-item-align: @align;
   -webkit-align-self: @align;
       -ms-align-self: @align;
           align-self: @align;

src/__fallback.flexbox.less

@@ -23,15 +23,14 @@
 // ^author
 // : Chris Harvey
 // ^updated
-// : 2015-09-03
+// : 2017-06-02
 .flexbox() {
   display: -webkit-box;
   display:     -ms-box;
 
   display: -webkit-flexbox;
   display:     -ms-flexbox;
 
-  display: -webkit-flex;
   display:     -ms-flex;
   display:         flex;
 }
@@ -46,9 +45,10 @@
 // ^author
 // : Chris Harvey
 // ^updated
-// : 2015-02-12
+// : 2017-06-02
 .flex-direction(@direction: row) {
-  -webkit-flex-direction: @direction;
+      -webkit-box-orient: @direction;
+   -webkit-box-direction: @direction;
       -ms-flex-direction: @direction;
           flex-direction: @direction;
 }
@@ -62,9 +62,8 @@
 // ^author
 // : Chris Harvey
 // ^updated
-// : 2015-02-12
+// : 2017-06-02
 .flex-wrap(@wrap: nowrap) {
-  -webkit-flex-wrap: @wrap;
       -ms-flex-wrap: @wrap;
           flex-wrap: @wrap;
 }
@@ -174,11 +173,10 @@
 // ^author
 // : Chris Harvey
 // ^updated
-// : 2015-09-03
+// : 2017-06-02
 .flex-order(@integer: 0) {
   -webkit-box-ordinal-group: @integer;
              -ms-flex-order: @integer;
-              -webkit-order: @integer;
                       order: @integer;
 }
 
@@ -228,10 +226,9 @@
 // ^author
 // : Chris Harvey
 // ^updated
-// : 2015-09-03
+// : 2017-06-02
 .flex(@arg: 0 1 auto) {
   -webkit-box-flex: @arg;
-      -webkit-flex: @arg;
           -ms-flex: @arg;
               flex: @arg;
 }

src/__fallback.justify-content.less

@@ -13,9 +13,10 @@
 // ^author
 // : Chris Harvey
 // ^updated
-// : 2017-03-19
+// : 2017-06-02
 .justify-content(@justify: normal) {
-  -webkit-justify-content: @justify;
+         -webkit-box-pack: @justify;
+            -ms-flex-pack: @justify;
       -ms-justify-content: @justify;
           justify-content: @justify;
 }

src/_base.less

@@ -34,15 +34,21 @@
   &,
   &::before,
   &::after {
-    box-sizing: border-box;
-    border: 0 solid; // reset browser default border
     content: none;
+    box-sizing: border-box;
+    column-rule: 0 solid; // change initial column-rule from `medium none`
     @media print {
       background: transparent !important;
       box-shadow: none !important;
       text-shadow: none !important;
     }
   }
+  &:not(input):not(select):not(button),
+  // &:not(input, select, button),
+  &::before,
+  &::after {
+    border: 0 solid; // change initial border from `medium none`
+  }
 }
 
 html {
@@ -98,7 +104,6 @@ a, ins, del {
   //   display: inline;
   //   line-height: 0;
   // }
-  display: contents;
 }
 //++++ end # GENERIC ++++//
 
@@ -159,7 +164,7 @@ hr {
   }
   pre {
     .font-size-el(@g-font_size_mill);
-    text-align: left;
+    text-align: left; // code blocks are always aligned left, regardless of writing mode
     text-indent: 0;
     white-space: pre;
     overflow: auto;
@@ -215,7 +220,7 @@ hr {
   table {
     max-width: 100%; // fluid tables for responsive purposes
     border-collapse: collapse;
-    text-align: left; // fix browser bug
+    text-align: left; // FIXME fix browser bug... which? file an issue!
   }
   caption {
     text-align: center;
@@ -376,11 +381,6 @@ input {
   padding: 0 0.25rem;
 }
 
-input,
-button {
-  font-size: inherit; // undo browser default
-}
-
 input,
 button,
 select,
@@ -398,12 +398,6 @@ textarea {
   box-shadow: 0 0 0 1px @p-color_gray; // HACK vertical border hack
 }
 
-input,
-select,
-button {
-  border: 1px solid @p-color_gray;
-}
-
 textarea {
   display: block; // override browser default
   width: 30rem;
@@ -417,6 +411,7 @@ label {
 }
 
 input:not([type="button"]):not([type="reset"]):not([type="submit"]),
+// input:not([type="button"], [type="reset"], [type="submit"]),
 select {
   font-size: @g-font_size_mill * 1em;
 }
@@ -426,7 +421,6 @@ input[type="reset"],
 input[type="submit"],
 button {
   padding: 0.125em 0.25em;
-  background-color: @p-color_gray;
 }
 
 select[multiple] > optgroup > option {

src/reset.css

@@ -5,7 +5,8 @@
 
 
 body {
-  text-align: left;
+  text-align: start; /* HACK fallback */
+  text-align: initial; /* fix unsupported browsers initial value */
   background: #fff;
   color: #000;
 }