Merge branch 'beta-v6.2.0'

chharvey · Dec 17, 2017 · a1048f5 · a1048f5 · chharvey · Dec 17, 2017
2 parents d3991d3 + b1c49ee
commit a1048f5
Show file tree

Hide file tree

Showing 27 changed files with 418 additions and 141 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,7 @@
 .DS_Store
 
+.wiki
+
 # Logs
 logs
 *.log

diff --git a/README.md b/README.md
@@ -79,41 +79,7 @@ normalize.css is imported into xmeter.css, so there is *no need* to
 While **normalize.css** addresses discrepancies between different browsers’
 rendering of HTML elements, providing only the very basic and necessary styles,
 **xmeter.css** adds additional tools and styles for a more streamlined look and a
-vertical rhythm system. (For more information on vertical rhythm, see these articles in
-[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).)
-
-Every line on the page is exactly the same height
-(dubbed a “vertical rhythm unit” or “vru”) regardless of font size, and
-typographical block elements (headings, paragraphs, figures, blockquotes, lists,
-tables, etc.) are separated by integer multiples of that height.
-
-The following convention is used to preserve vertical rhythm:
-- Bottom margin is added to an element in order to push subsequent elements down the page.
-- Top padding is added to an element to push *itself* down the page.
-- Negative top margin is added to an element to pull it up the page.
-
-### Modular Font Size & Leading
-
-Font-size of `<html>` is set to `100%` to accommodate for user agent settings.
-
-Units for font-size on modules
-should be set in `rem`s, so that their vertical typography remains the same
-regardless of where that module is placed (style does not depend on location).
-(`<html>` is considered a module.) When font-size of a module changes, the line-height
-should remain unchanged, so that the module is scalable.
-
-Within a module however, font-size on an element
-should be set in `em`s, so that its vertical typography scales with
-its parent module’s font size.
-In addition to font-size, line-height should be adjusted to maintain vertical rhythm.
-For example, if font-size is doubled (x2.0), the line-height should be halved (x0.5) so that the final
-height of each text line is unchanged. Xmeter’s tools do this for you automatically.
-
-All line-height values are unitless. Line-height for all inline (text-level) elements is 0.
-This preserves vertical rhythm within a block.
-
-Tools add styles to blocks (font-size, borders) without disrupting vertical rhythm.
+[vertical rhythm system](https://github.com/chharvey/xmeter/wiki/Vertical-Rhythm).
 
 ### Base Styles
 

diff --git a/class/Xmeter.class.js b/class/Xmeter.class.js
@@ -1,4 +1,4 @@
-const Element = require('extrajs-dom').Element
+const HTMLElement = require('extrajs-dom').HTMLElement
 const View = require('extrajs-view')
 
 /**
@@ -25,6 +25,7 @@ class Xmeter {
     return new View(null, data)
       /**
        * Return an `<a.Permlink>` element.
+       * Parameter `data` should be of type `{id:string}` (an object with a string `id` property).
        * @summary Call `Xmeter.view(data).permalink()` to render this display.
        * @function Xmeter.VIEW.permalink
        * @version STABLE
@@ -33,7 +34,7 @@ class Xmeter {
        * @returns {string} HTML output
        */
       .addDisplay(function permalink(content = '&sect;', label = 'permalink') {
-        return new Element('a').class('c-Permalink h-Inline h-Hidden')
+        return new HTMLElement('a').class('c-Permalink h-Inline h-Hidden')
           .attr({ href: `#${this.id}`, 'aria-label': label })
           .addContent(content)
           .html()

diff --git a/css/src/__tool.border-radius.less b/css/src/__tool.border-radius.less
@@ -22,7 +22,7 @@
 // ^author
 // : Chris Harvey
 // ^updated
-// : 2016-06-29
+// : 2017-11-28
 
 .border-left-radius(@radius: 0) {
   border-top-left-radius:    @radius;
@@ -43,3 +43,25 @@
   border-bottom-right-radius: @radius;
   border-bottom-left-radius:  @radius;
 }
+
+// Logical Properties below
+
+.border-block-start-radius(@radius: 0) {
+  border-start-start-radius: @radius;
+  border-start-end-radius:   @radius;
+}
+
+.border-block-end-radius(@radius: 0) {
+  border-end-start-radius: @radius;
+  border-end-end-radius:   @radius;
+}
+
+.border-inline-start-radius(@radius: 0) {
+  border-start-start-radius: @radius;
+  border-end-start-radius:   @radius;
+}
+
+.border-inline-end-radius(@radius: 0) {
+  border-start-end-radius: @radius;
+  border-end-end-radius:   @radius;
+}
diff --git a/css/src/__tool.borders.less b/css/src/__tool.borders.less
@@ -33,7 +33,7 @@
 // ^author
 // : Chris Harvey
 // ^updated
-// : 2015-05-11
+// : 2017-11-28
 .border-vert(top; @width: 0) {
   border-top-width: @width;
   margin-top: (-@width);
@@ -54,3 +54,25 @@
   border-width: @width;
   margin-top: (-2 * @width);
 }
+
+// Logical Properties below
+
+.border-block(start; @width: 0) {
+  border-block-start-width: @width;
+  margin-block-start: (-@width);
+}
+
+.border-block(end; @width: 0) {
+  border-block-end-width: @width;
+  margin-block-start: (-@width);
+}
+
+.border-block(block; @width: 0) {
+  border-block-width: @width;
+  margin-block-start: (-2 * @width);
+}
+
+.border-block(all; @width: 0) {
+  border-width: @width;
+  margin-block-start: (-2 * @width);
+}
diff --git a/css/src/__tool.delims.less b/css/src/__tool.delims.less
@@ -15,7 +15,7 @@
 // : 2016-05-05
 .delims(@arg: none) {
   quotes: @arg;
-  &::before { content: open-quote; }
+  &::before { content:  open-quote; }
   &::after  { content: close-quote; }
 }
 

diff --git a/css/src/__tool.fontsize.less b/css/src/__tool.fontsize.less
@@ -22,7 +22,7 @@
   font-size: (@ratio * 1rem);
   // line-height: inherit; // NOTE clarification
   & > * {
-    --vru: calc(@ratio ~' * var(--line-height) * 1rem'); // @ratio * parent vru
+    --lh: calc(@ratio ~' * var(--line-height) * 1rem'); // @ratio * parent lh
   }
 }
 

diff --git a/css/src/_base.less b/css/src/_base.less
@@ -48,7 +48,8 @@
 
 html {
   --line-height: 1.5; // default line-height. NOTE: change in your own project if you wish.
-  --vru: calc(~'var(--line-height) * 1rem');
+  --lh: calc(~'var(--line-height) * 1rem'); // HACK fallback for `lh` units (https://drafts.csswg.org/css-values/#lh)
+  --vru: var(--lh); // CHANGED DEPRECATED: legacy support
   // addresses support for `rem` units (otherwise these would be in `body` selector)
   font-size: 100%; // defined by user agent
   line-height: var(--line-height);
@@ -62,10 +63,16 @@ ol, ul, dl,
 table,
 form, fieldset, textarea,
 details {
-  margin-bottom: var(--vru);
+  margin-bottom: var(--lh);
+  margin-bottom: 1lh;
+  margin-block-end: var(--lh);
+  margin-block-end: 1lh;
 }
 h1 {
-  padding-top: var(--vru);
+  padding-top: var(--lh);
+  padding-top: 1lh;
+  padding-block-start: var(--lh);
+  padding-block-start: 1lh;
 }
 
 // Font sizes for text-level elements should be in units of `em` instead of `rem` because
@@ -133,7 +140,9 @@ h5 { .font-size-el(@g-font-size-h5); }
 h6 { .font-size-el(@g-font-size-h6); }
 
 h1 {
-  margin-top: 0; // undo Normalize
+  margin-top: initial; // HACK fallback for `unset`
+  margin-top: unset;   // HACK fallback for logical
+  margin-block-start: unset; // undo Normalize
 }
 
 address {
@@ -163,9 +172,10 @@ hr {
   }
   figure {
     // undo Normalize
-    margin-top:   0;
-    margin-left:  0;
-    margin-right: 0;
+    margin-top: initial; margin-left: initial; margin-right: initial; // HACK fallbacks for `unset`
+    margin-top: unset  ; margin-left: unset  ; margin-right: unset  ; // HACK fallbacks for logical
+    margin-block-start: unset;
+    margin-inline: unset;
   }
   figcaption {
   }
@@ -182,23 +192,27 @@ hr {
     li > &,
     dt > &,
     dd > & {
-      margin-bottom: 0; // undo default bottom spacing for nested lists
+      margin-bottom: initial; // HACK fallback for `unset`
+      margin-bottom: unset;   // HACK fallback for logical
+      margin-block-end: unset; // undo default vertical spacing for nested lists
     }
   }
   ol,
   ul {
-    padding: 0 0 0 4rem;
+    padding: 0 0 0 4rem; // HACK fallback for logical
+    padding: logical 0 4rem 0 0;
     li > &,
     dt > &,
     dd > & {
-      padding-left: 2rem;
+      padding-left: 2rem; // HACK fallback for logical
+      padding-inline-start: 2rem;
     }
   }
   ol {
     list-style-type: decimal;
   }
   ul {
-    list-style-type: disc;
+    list-style-type: disc; // not using `initial` because we explicitly want `disc`
   }
   dl {
     list-style: none; // remove counters from `dl > li`
@@ -217,7 +231,7 @@ hr {
   table {
     max-width: 100%; // fluid tables for responsive purposes
     border-collapse: collapse;
-    text-align: left; // FIXME fix browser bug... which? file an issue!
+    text-align: left; // fix browser BUG... which? file an issue!
   }
   caption {
     text-align: center;
@@ -237,7 +251,6 @@ hr {
   }
   th {
     font-weight: 700;
-    text-align: center;
   }
   td {
   }
@@ -248,23 +261,33 @@ hr {
 //++++++++++++++++++++++++++++++++//
 //    # TEXT
 //++++++++++++++++++++++++++++++++//
-// RECOMMENDATION:
+// NB: RECOMMENDATION:
 // Do not use `br` to indicate line breaks, use CSS instead.
 // One exception: MAY use `address > br` to indicate line breaks (by convention)
 br {
 }
   //--------------------------------//
   //    ## Links
   //--------------------------------//
-  a {
-    color: #00e;       // default :link
+  // NB: RECOMMENDATION:
+  // Do not style `a` elements without the `[href]` attribute.
+  // Such elements are “placeholder anchors,” which do not lead anywhere.
+  // A placeholder anchor can represent a placeholder for where a hyperlink might otherwise be placed,
+  // or it can represent an anchor whose reference may change based on context (e.g., user interaction).
+  //
+  // Link color should have sufficient contrast with the background color
+  // *as well as* sufficient contrast with surrounding non-link text color.
+  // - Background contrast ratio:
+  //   - to meet AA  level: 4.5 normal ; 3.0 large (18pt or 14pt bold)
+  //   - to meet AAA level: 7.0 normal ; 4.5 large (18pt or 14pt bold)
+  // - Surrounding text contrast ratio:
+  //   - 3.0 for all
+  // Read Technique G183 for details: <https://www.w3.org/TR/WCAG20-TECHS/G183.html>
+  a[href] {
+    // color: #00e;    // default :link
     // color: #551a8b; // default :visited
     // color: #f00;    // default :active
-  }
-  a:not([href]) {
-    @media screen {
-      opacity: 0.5;
-    }
+    color: #06c; // 5.57 aginst white, 3.77 against black
   }
   //---- end ## Links ----//
 
@@ -317,15 +340,16 @@ br {
   abbr {
     &[title] {
       cursor: help;
-      text-decoration: none; // undo Normalize
+      text-decoration: none; // HACK fallback for `text-decoration-line` // also IE fallback for `initial`
+      text-decoration-line: initial; // HACK fallback for `unset`
+      text-decoration-line: unset; // undo Normalize
     }
   }
   var {
     font-style: italic;
   }
   q {
-    .quotes-double(); // fallback for `initial`
-    quotes: initial;
+    .delims(initial);
   }
   cite {
     font-style: italic;
@@ -388,8 +412,9 @@ textarea {
   line-height: inherit; // undo browser default
 }
 
-html > body fieldset { // HACK need a specificity of 3 to override generic `*:not(input):not(button):not(select)`
+html body fieldset { // HACK need a specificity of 3 to override generic `*:not(input):not(button):not(select)`
   .border-vert(all; 1px);
+  .border-block(all; 1px);
   border-style: solid;
   border-color: @p-color-gray;
   // NOTE cannot use box-shadow hack due to shadow covering <legend>
@@ -400,9 +425,13 @@ textarea {
 
 textarea {
   display: block; // override browser default
+  height: calc(~'6 * var(--lh)');
+  height: 6lh;
   width: 30rem;
-  height: calc(~'6 * var(--vru)');
-  .font-size-mod(@g-font-size-mill);
+  block-size: calc(~'6 * var(--lh)');
+  block-size: 6lh;
+  inline-size: 30rem;
+  font-size: (@g-font-size-mill * 1rem); // .font-size-mod(@g-font-size-mill); // textarea cannot contain any element children
 }
 
 input[type="button"],
@@ -416,7 +445,7 @@ label {
 input:not([type="button"]):not([type="reset"]):not([type="submit"]),
 // input:not([type="button"], [type="reset"], [type="submit"]), // CHANGED selector not supported yet
 select {
-  font-size: @g-font-size-mill * 1em;
+  font-size: (@g-font-size-mill * 1em);
 }
 
 input[type="button"],
@@ -428,6 +457,7 @@ button {
 
 select[multiple] > optgroup > option {
   padding-left: 1rem;
+  padding-inline-start: 1rem;
 }
 //++++ end # FORMS ++++//
 
@@ -440,9 +470,11 @@ select[multiple] > optgroup > option {
 // [3] offset `[alt]` attribute text from surrounding copy
 // [4] safer alternative to `display: block;`
 img {
-  width: auto;  // [1]
-  height: auto; // [1]
-  max-width: 100%; // [2]
+  // HACK fallbacks for logical properties
+  height: auto; width: auto;
+  max-width: 100%;
+  block-size: auto; inline-size: auto; // [1]
+  max-inline-size: 100%; // [2]
   font-style: italic; // [3]
   vertical-align: middle; // [4]
 }
-Original file line number
+Diff line change
@@ -1,5 +1,7 @@
     .DS_Store
+    .wiki
     # Logs
     logs
     *.log
@@ Expand Down @@