Skip to content

Commit

Permalink
Merge branch 'stage-v6.1.0'
Browse files Browse the repository at this point in the history
  • Loading branch information
Chris Harvey committed Oct 13, 2017
2 parents 9d849b8 + 52d1a12 commit 4d0a6ac
Show file tree
Hide file tree
Showing 69 changed files with 4,114 additions and 1,944 deletions.
5 changes: 3 additions & 2 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,5 +31,6 @@ node_modules

# Compiled source files

# Generated style guides
styleguide
# Generated documentation & style guides
docs/api
docs/styleguide
10 changes: 5 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ $ npm install xmeter

Use the global variables:
```less
@import (reference) url('/node_modules/xmeter/src/__settings.less');
@import (reference) url('/node_modules/xmeter/css/src/__settings.less');
.my-selector {
font-size: (1.5 * @g-font-size-kilo);
}
Expand All @@ -28,7 +28,7 @@ See `/src/__settings.less` for all the variables available.

Use the tools:
```less
@import (reference) url('/node_modules/xmeter/src/__tool.fontsize.less');
@import (reference) url('/node_modules/xmeter/css/src/__tool.fontsize.less');
.my-selector {
.font-size-el(2.0; 1.5);
}
Expand All @@ -45,12 +45,12 @@ Locally:
$ npm install xmeter
```
```html
<link rel="stylesheet" href="/node_modules/xmeter/xmeter.css"/>
<link rel="stylesheet" href="/node_modules/xmeter/css/xmeter.css"/>
```

Remotely from a CDN (not recommended, unless deploying your `/node_modules/` isn’t possible):
```html
<link rel="stylesheet" href="https://cdn.rawgit.com/chharvey/xmeter/‹master›/xmeter.css"/>
<link rel="stylesheet" href="https://cdn.rawgit.com/chharvey/xmeter/‹master›/css/xmeter.css"/>
```
where `‹master›` can be any branch or tag.

Expand All @@ -61,7 +61,7 @@ The stylesheet `xmeter.css` is already minified, and is accompanied by a sourcem

Xmeter’s stylesheet is a starting point that “normalizes” unclassed HTML elements.
And now that Xmeter has a few [design patterns] (link pending) built in, you can use them in your markup too!
In addition to base styles, Xmeter has classes for Objects (`src/_o-*.less`), Components (`src/_c-*.less`) and Helpers (`src/_h-*.less`),
In addition to base styles, Xmeter has classes for Objects (`/css/src/_o-*.less`), Components (`/css/src/_c-*.less`) and Helpers (`/css/src/_h-*.less`),
design patterns that aid in a consistent, easy-to-use, vertical rhythm system.
These classes should be directly injected into elements’ HTML `[class]` attribute on your site.

Expand Down
44 changes: 44 additions & 0 deletions class/Xmeter.class.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
const Element = require('extrajs-dom').Element
const View = require('extrajs-view')

/**
* Static members for the Xmeter package.
* @namespace
*/
class Xmeter {
/** @private */ constructor() {}

/**
* @summary Render any data in HTML.
* @see Xmeter.VIEW
* @param {*} data any data to render
* @returns {View}
*/
static view(data) {
/**
* @summary This view object is a set of functions returning HTML output.
* @description Available displays:
* - `Xmeter.view(data).permalink()` - display a permalink
* @namespace Xmeter.VIEW
* @type {View}
*/
return new View(null, data)
/**
* Return an `<a.Permlink>` element.
* @summary Call `Xmeter.view(data).permalink()` to render this display.
* @function Xmeter.VIEW.permalink
* @version STABLE
* @param {string=} content the text of the link
* @param {string=} label the value for `[aria-label]` attribute
* @returns {string} HTML output
*/
.addDisplay(function permalink(content = '&sect;', label = 'permalink') {
return new Element('a').class('c-Permalink h-Inline h-Hidden')
.attr({ href: `#${this.id}`, 'aria-label': label })
.addContent(content)
.html()
})
}
}

module.exports = Xmeter
26 changes: 26 additions & 0 deletions config-jsdoc.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"sourceType": "module",
"tags": {
"allowUnknownTags": true,
"dictionaries": ["jsdoc", "closure"]
},
"opts": {
"destination": "./docs/api"
},
"plugins": [
"plugins/markdown"
],
"templates": {
"cleverLinks": false,
"monospaceLinks": false,
"default": {
"outputSourceFiles": true,
"includeDate": false
},
"path": "ink-docstrap",
"theme": "flatly",
"navType": "vertical",
"linenums": false,
"dateFormat": "MMMM Do YYYY, h:mm:ss a"
}
}
13 changes: 13 additions & 0 deletions config-kss.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"title": "Xmeter Style Guide",
"source": "css/src/",
"destination": "docs/styleguide/",
"css": [
"../../css/xmeter.css",
"../../docs/css/kss.css"
],
"js": [
"http://code.jquery.com/jquery-3.2.1.min.js",
"../../js/o-Tablist.js"
]
}
87 changes: 87 additions & 0 deletions css/src/_-fz.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@

/*################################*\
xmeter | _-fz.less
\*################################*/


// font-size
//
// The font-size Atoms set the font-size property.
//
// These are two groups of Atoms: the first group simply sets the font size of an element,
// and the second group uses the <code>.font-size-el()</code> mixin, which also affects line-height
// for maintaining vertical rhythm. See <a>__tool.fontsize.less</a> for the mixin code.
//
// All font sizes are available in <a>/src/__settings.less</a>.
// <header><dl>
// <dt>author</dt> <dd>Chris Harvey</dd>
// <dt>updated</dt> <dd><time>2017-02-09</time></dd>
// </dl></header>
//
// Markup:
// <ul>
// <li><u class="-fz-peta">universe</u> (6.00)</li>
// <li><u class="-fz-tera">galaxy </u> (4.00)</li>
// <li><u class="-fz-giga">star </u> (3.00)</li>
// <li><u class="-fz-mega">planet </u> (2.00)</li>
// <li><u class="-fz-kilo">asteroid</u> (1.50)</li>
// <li><u class="-fz-norm">molecule</u> (1.00)</li>
// <li><u class="-fz-mill">atom </u> (0.75)</li>
// <li><u class="-fz-micr">quark </u> (0.50)</li>
// </ul>
// <ul style="overflow: auto; white-space: nowrap;">
// <li class="-fz-el-peta">universe (6.00/1.000)</li>
// <li class="-fz-el-tera">galaxy (4.00/1.125)</li>
// <li class="-fz-el-giga">star (3.00/1.000)</li>
// <li class="-fz-el-mega">planet (2.00/1.500)</li>
// <li class="-fz-el-kilo">asteroid (1.50/1.000)</li>
// <li class="-fz-el-norm">molecule (1.00/1.500)</li>
// <li class="-fz-el-mill">atom (0.75/2.000)</li>
// <li class="-fz-el-micr">quark (0.50/3.000)</li>
// </ul>
//
// Weight: 1
//
// Styleguide Atoms.font-size


.-fz-peta { font-size: (@g-font-size-peta * 1em) !important; }
.-fz-tera { font-size: (@g-font-size-tera * 1em) !important; }
.-fz-giga { font-size: (@g-font-size-giga * 1em) !important; }
.-fz-mega { font-size: (@g-font-size-mega * 1em) !important; }
.-fz-kilo { font-size: (@g-font-size-kilo * 1em) !important; }
.-fz-norm { font-size: (@g-font-size-norm * 1em) !important; }
.-fz-mill { font-size: (@g-font-size-mill * 1em) !important; }
.-fz-micr { font-size: (@g-font-size-micr * 1em) !important; }

@media screen and (min-width: 30em) { .-fz-peta-sK { .-fz-peta; } .-fz-tera-sK { .-fz-tera; } .-fz-giga-sK { .-fz-giga; } .-fz-mega-sK { .-fz-mega; } .-fz-kilo-sK { .-fz-kilo; } .-fz-norm-sK { .-fz-norm; } .-fz-mill-sK { .-fz-mill; } .-fz-micr-sK { .-fz-micr; } }
@media screen and (min-width: 45em) { .-fz-peta-sM { .-fz-peta; } .-fz-tera-sM { .-fz-tera; } .-fz-giga-sM { .-fz-giga; } .-fz-mega-sM { .-fz-mega; } .-fz-kilo-sM { .-fz-kilo; } .-fz-norm-sM { .-fz-norm; } .-fz-mill-sM { .-fz-mill; } .-fz-micr-sM { .-fz-micr; } }
@media screen and (min-width: 60em) { .-fz-peta-sG { .-fz-peta; } .-fz-tera-sG { .-fz-tera; } .-fz-giga-sG { .-fz-giga; } .-fz-mega-sG { .-fz-mega; } .-fz-kilo-sG { .-fz-kilo; } .-fz-norm-sG { .-fz-norm; } .-fz-mill-sG { .-fz-mill; } .-fz-micr-sG { .-fz-micr; } }
@media screen and (min-width: 75em) { .-fz-peta-sT { .-fz-peta; } .-fz-tera-sT { .-fz-tera; } .-fz-giga-sT { .-fz-giga; } .-fz-mega-sT { .-fz-mega; } .-fz-kilo-sT { .-fz-kilo; } .-fz-norm-sT { .-fz-norm; } .-fz-mill-sT { .-fz-mill; } .-fz-micr-sT { .-fz-micr; } }
@media screen and (min-width: 90em) { .-fz-peta-sP { .-fz-peta; } .-fz-tera-sP { .-fz-tera; } .-fz-giga-sP { .-fz-giga; } .-fz-mega-sP { .-fz-mega; } .-fz-kilo-sP { .-fz-kilo; } .-fz-norm-sP { .-fz-norm; } .-fz-mill-sP { .-fz-mill; } .-fz-micr-sP { .-fz-micr; } }
@media not all and (min-width: 30em) { .-fz-peta-nK { .-fz-peta; } .-fz-tera-nK { .-fz-tera; } .-fz-giga-nK { .-fz-giga; } .-fz-mega-nK { .-fz-mega; } .-fz-kilo-nK { .-fz-kilo; } .-fz-norm-nK { .-fz-norm; } .-fz-mill-nK { .-fz-mill; } .-fz-micr-nK { .-fz-micr; } }
@media not all and (min-width: 45em) { .-fz-peta-nM { .-fz-peta; } .-fz-tera-nM { .-fz-tera; } .-fz-giga-nM { .-fz-giga; } .-fz-mega-nM { .-fz-mega; } .-fz-kilo-nM { .-fz-kilo; } .-fz-norm-nM { .-fz-norm; } .-fz-mill-nM { .-fz-mill; } .-fz-micr-nM { .-fz-micr; } }
@media not all and (min-width: 60em) { .-fz-peta-nG { .-fz-peta; } .-fz-tera-nG { .-fz-tera; } .-fz-giga-nG { .-fz-giga; } .-fz-mega-nG { .-fz-mega; } .-fz-kilo-nG { .-fz-kilo; } .-fz-norm-nG { .-fz-norm; } .-fz-mill-nG { .-fz-mill; } .-fz-micr-nG { .-fz-micr; } }
@media not all and (min-width: 75em) { .-fz-peta-nT { .-fz-peta; } .-fz-tera-nT { .-fz-tera; } .-fz-giga-nT { .-fz-giga; } .-fz-mega-nT { .-fz-mega; } .-fz-kilo-nT { .-fz-kilo; } .-fz-norm-nT { .-fz-norm; } .-fz-mill-nT { .-fz-mill; } .-fz-micr-nT { .-fz-micr; } }
@media not all and (min-width: 90em) { .-fz-peta-nP { .-fz-peta; } .-fz-tera-nP { .-fz-tera; } .-fz-giga-nP { .-fz-giga; } .-fz-mega-nP { .-fz-mega; } .-fz-kilo-nP { .-fz-kilo; } .-fz-norm-nP { .-fz-norm; } .-fz-mill-nP { .-fz-mill; } .-fz-micr-nP { .-fz-micr; } }


.-fz-el-peta { .font-size-el(@g-font-size-peta; 4) !important; }
.-fz-el-tera { .font-size-el(@g-font-size-tera; 3) !important; }
.-fz-el-giga { .font-size-el(@g-font-size-giga; 2) !important; }
.-fz-el-mega { .font-size-el(@g-font-size-mega; 2) !important; }
.-fz-el-kilo { .font-size-el(@g-font-size-kilo ) !important; }
.-fz-el-norm { .font-size-el(@g-font-size-norm ) !important; }
.-fz-el-mill { .font-size-el(@g-font-size-mill ) !important; }
.-fz-el-micr { .font-size-el(@g-font-size-micr ) !important; }

@media screen and (min-width: 30em) { .-fz-el-peta-sK { .-fz-el-peta; } .-fz-el-tera-sK { .-fz-el-tera; } .-fz-el-giga-sK { .-fz-el-giga; } .-fz-el-mega-sK { .-fz-el-mega; } .-fz-el-kilo-sK { .-fz-el-kilo; } .-fz-el-norm-sK { .-fz-el-norm; } .-fz-el-mill-sK { .-fz-el-mill; } .-fz-el-micr-sK { .-fz-el-micr; } }
@media screen and (min-width: 45em) { .-fz-el-peta-sM { .-fz-el-peta; } .-fz-el-tera-sM { .-fz-el-tera; } .-fz-el-giga-sM { .-fz-el-giga; } .-fz-el-mega-sM { .-fz-el-mega; } .-fz-el-kilo-sM { .-fz-el-kilo; } .-fz-el-norm-sM { .-fz-el-norm; } .-fz-el-mill-sM { .-fz-el-mill; } .-fz-el-micr-sM { .-fz-el-micr; } }
@media screen and (min-width: 60em) { .-fz-el-peta-sG { .-fz-el-peta; } .-fz-el-tera-sG { .-fz-el-tera; } .-fz-el-giga-sG { .-fz-el-giga; } .-fz-el-mega-sG { .-fz-el-mega; } .-fz-el-kilo-sG { .-fz-el-kilo; } .-fz-el-norm-sG { .-fz-el-norm; } .-fz-el-mill-sG { .-fz-el-mill; } .-fz-el-micr-sG { .-fz-el-micr; } }
@media screen and (min-width: 75em) { .-fz-el-peta-sT { .-fz-el-peta; } .-fz-el-tera-sT { .-fz-el-tera; } .-fz-el-giga-sT { .-fz-el-giga; } .-fz-el-mega-sT { .-fz-el-mega; } .-fz-el-kilo-sT { .-fz-el-kilo; } .-fz-el-norm-sT { .-fz-el-norm; } .-fz-el-mill-sT { .-fz-el-mill; } .-fz-el-micr-sT { .-fz-el-micr; } }
@media screen and (min-width: 90em) { .-fz-el-peta-sP { .-fz-el-peta; } .-fz-el-tera-sP { .-fz-el-tera; } .-fz-el-giga-sP { .-fz-el-giga; } .-fz-el-mega-sP { .-fz-el-mega; } .-fz-el-kilo-sP { .-fz-el-kilo; } .-fz-el-norm-sP { .-fz-el-norm; } .-fz-el-mill-sP { .-fz-el-mill; } .-fz-el-micr-sP { .-fz-el-micr; } }
@media not all and (min-width: 30em) { .-fz-el-peta-nK { .-fz-el-peta; } .-fz-el-tera-nK { .-fz-el-tera; } .-fz-el-giga-nK { .-fz-el-giga; } .-fz-el-mega-nK { .-fz-el-mega; } .-fz-el-kilo-nK { .-fz-el-kilo; } .-fz-el-norm-nK { .-fz-el-norm; } .-fz-el-mill-nK { .-fz-el-mill; } .-fz-el-micr-nK { .-fz-el-micr; } }
@media not all and (min-width: 45em) { .-fz-el-peta-nM { .-fz-el-peta; } .-fz-el-tera-nM { .-fz-el-tera; } .-fz-el-giga-nM { .-fz-el-giga; } .-fz-el-mega-nM { .-fz-el-mega; } .-fz-el-kilo-nM { .-fz-el-kilo; } .-fz-el-norm-nM { .-fz-el-norm; } .-fz-el-mill-nM { .-fz-el-mill; } .-fz-el-micr-nM { .-fz-el-micr; } }
@media not all and (min-width: 60em) { .-fz-el-peta-nG { .-fz-el-peta; } .-fz-el-tera-nG { .-fz-el-tera; } .-fz-el-giga-nG { .-fz-el-giga; } .-fz-el-mega-nG { .-fz-el-mega; } .-fz-el-kilo-nG { .-fz-el-kilo; } .-fz-el-norm-nG { .-fz-el-norm; } .-fz-el-mill-nG { .-fz-el-mill; } .-fz-el-micr-nG { .-fz-el-micr; } }
@media not all and (min-width: 75em) { .-fz-el-peta-nT { .-fz-el-peta; } .-fz-el-tera-nT { .-fz-el-tera; } .-fz-el-giga-nT { .-fz-el-giga; } .-fz-el-mega-nT { .-fz-el-mega; } .-fz-el-kilo-nT { .-fz-el-kilo; } .-fz-el-norm-nT { .-fz-el-norm; } .-fz-el-mill-nT { .-fz-el-mill; } .-fz-el-micr-nT { .-fz-el-micr; } }
@media not all and (min-width: 90em) { .-fz-el-peta-nP { .-fz-el-peta; } .-fz-el-tera-nP { .-fz-el-tera; } .-fz-el-giga-nP { .-fz-el-giga; } .-fz-el-mega-nP { .-fz-el-mega; } .-fz-el-kilo-nP { .-fz-el-kilo; } .-fz-el-norm-nP { .-fz-el-norm; } .-fz-el-mill-nP { .-fz-el-mill; } .-fz-el-micr-nP { .-fz-el-micr; } }
29 changes: 29 additions & 0 deletions css/src/__settings.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@

/*################################*\
xmeter | __settings.less
\*################################*/


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


// new global font sizes as of 2016-08-17
@g-font-size-peta: 96/16; // 6.00 // lines: ceil(6.00/line-height) == 4
@g-font-size-tera: 64/16; // 4.00 // lines: ceil(4.00/line-height) == 3
@g-font-size-giga: 48/16; // 3.00 // lines: ceil(3.00/line-height) == 2
@g-font-size-mega: 32/16; // 2.00 // lines: ceil(2.00/line-height) == 2
@g-font-size-kilo: 24/16; // 1.50 // lines: ceil(1.50/line-height) == 1
@g-font-size-norm: 16/16; // 1.00 // lines: ceil(1.00/line-height) == 1
@g-font-size-mill: 12/16; // 0.75 // lines: ceil(0.75/line-height) == 1
@g-font-size-micr: 8/16; // 0.50 // lines: ceil(0.50/line-height) == 1

// heading sizes
@g-font-size-h1: @g-font-size-giga;
@g-font-size-h2: @g-font-size-mega;
@g-font-size-h3: @g-font-size-kilo;
@g-font-size-h4: @g-font-size-norm;
@g-font-size-h5: @g-font-size-mill;
@g-font-size-h6: @g-font-size-micr;
45 changes: 45 additions & 0 deletions css/src/__tool.border-radius.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@

/*################################*\
xmeter | __tool.border-radius.less
\*################################*/


// Shortcuts for setting `border-radius` on two corners of the same side of a box.
// Also supports two values, for horizontal/vertical components.
//
// Examples:
// - `.border-left-radius(5%)` will do:
// - `border-top-left-radius: 5%;`
// - `border-bottom-left-radius: 5%;`
// - `.border-left-radius(5px 10px)` will do:
// - `border-top-left-radius: 5px 10px;`
// - `border-bottom-left-radius: 5px 10px;`
//
// ^params
// @radius - (default: 0) the value of the border radius
// - one-value syntax: the horizontal and vertical value
// - two-value syntax, space-separated: the horizontal value, then vertical value
// ^author
// : Chris Harvey
// ^updated
// : 2016-06-29

.border-left-radius(@radius: 0) {
border-top-left-radius: @radius;
border-bottom-left-radius: @radius;
}

.border-right-radius(@radius: 0) {
border-top-right-radius: @radius;
border-bottom-right-radius: @radius;
}

.border-top-radius(@radius: 0) {
border-top-left-radius: @radius;
border-top-right-radius: @radius;
}

.border-bottom-radius(@radius: 0) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
56 changes: 56 additions & 0 deletions css/src/__tool.borders.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@

/*################################*\
xmeter | __tool.borders.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 ; <length>); // adjust the top border
// .border-vert(bottom; <length>); // adjust the bottom border
// .border-vert(topbot; <length>); // adjust both the top and bottom borders
// .border-vert(all ; <length>); // adjust all four borders
// ```
//
// NOTE: In place of `.border-vert(all; ...)`, you may use a hack involving `box-shadow` to create
// an effective border around an element, without using this tool and thus affecting the element’s
// `margin-top` value.
// The box-shadow must be outset, have an offset-x of 0, an offset-y of 0, a blur of 0,
// a spread of `<length>` (the effective border-width), and a color of `<color>` (the effective border-color).
// The color must be specified in the same declaration, and the effective border-style will always be solid.
// ```
// box-shadow: 0 0 0 <length> <color>;
// ```
//
// @width - (optional: `0`) value of `border-width`
// ^author
// : Chris Harvey
// ^updated
// : 2015-05-11
.border-vert(top; @width: 0) {
border-top-width: @width;
margin-top: (-@width);
}

.border-vert(bottom; @width: 0) {
border-bottom-width: @width;
margin-top: (-@width);
}

.border-vert(topbot; @width: 0) {
border-top-width: @width;
border-bottom-width: @width;
margin-top: (-2 * @width);
}

.border-vert(all; @width: 0) {
border-width: @width;
margin-top: (-2 * @width);
}
33 changes: 33 additions & 0 deletions css/src/__tool.delims.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@

/*################################*\
xmeter | __tool.delims.less
\*################################*/


// 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() { .delims('(' ')'); }
.brackets() { .delims('[' ']'); }
.braces() { .delims('{' '}'); }
.angles() { .delims('<' '>'); } // '\003c' '\003e' // &lt; &gt;

.apos() { .delims('\'' '\''); } // '\0027' '\0027' // &apos; &apos;
.quot() { .delims('\"' '\"'); } // '\0022' '\0022' // &quot; &quot;

.quotes-single() { .delims('\2018' '\2019'); } // '‘' '’' // &lsquo; &rsquo;
.quotes-double() { .delims('\201c' '\201d'); } // '“' '”' // &ldquo; &rdquo;
.guillemets-single() { .delims('\2039' '\203a'); } // '‹' '›' // &lsaquo; &rsaquo;
.guillemets-double() { .delims('\00ab' '\00bb'); } // '«' '»' // &laquo; &raquo;
Loading

1 comment on commit 4d0a6ac

@chharvey
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

xmeter v6.1.0

Please sign in to comment.