Skip to content

Commit

Permalink
Merge branch 'beta-v6.4.0'
Browse files Browse the repository at this point in the history
  • Loading branch information
Chris Harvey committed Mar 29, 2018
2 parents 34b3188 + d0bb5d6 commit f6e1a4b
Show file tree
Hide file tree
Showing 37 changed files with 932 additions and 1,200 deletions.
7 changes: 3 additions & 4 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
.DS_Store

.wiki

# Logs
Expand Down Expand Up @@ -31,8 +29,9 @@ node_modules
# Users Environment Variables
.lock-wscript

# Compiled source files
# Generated build files
css/dist

# Generated documentation & style guides
# Generated documentation & style guides
docs/api
docs/styleguide
49 changes: 39 additions & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# xmeter
# [xmeter](https://chharvey.github.io/xmeter/)
A default stylesheet with a set of tools that make designing with vertical rhythm easy.

Pronounced “Cross Meter”.
Expand Down Expand Up @@ -28,9 +28,9 @@ See `/src/__settings.less` for all the variables available.

Use the tools:
```less
@import (reference) url('/node_modules/xmeter/css/src/__tool.fontsize.less');
@import (reference) url('/node_modules/xmeter/css/src/__tool.transitions.less');
.my-selector {
.font-size-el(2.0; 1.5);
.transitions(color, background-color; 500ms; ease-in-out);
}
```
Read about all of Xmeter’s tools (see `/docs/tools.md`).
Expand All @@ -40,21 +40,50 @@ Read about all of Xmeter’s tools (see `/docs/tools.md`).
Use Xmeter right out of the box on your own site.
Want to see what Xmeter can do? [Check out the style guide] (link pending).

Locally:
Each stylesheet is minified and optimized for production, and accompanied by a sourcemap ending in `.css.map`.
It is recommended that you split up the stylesheet into media queries as shown below.

The `dist/xmeter.css` stylesheet contains all code not nested in a media query
(thus applying to `@media all`), and additionally any experimental code and deprecated code.
All other stylesheets (`dist/xmeter-‹breakpoint›.css`) represents media-specific classes.
For example, `xmeter-sG.css` contains `.o-Flex-sG`, which is identical to `.o-Flex`,
but it only applies to media `screen and (min-width: 60em)`.
The recommended approach is to link only the stylesheets you need, and update your `<link>`s when your needs change.
Your users will appreciate that.

Mnemonic:
1. Kilo
2. Mega
3. Giga
4. Tera
5. Peta

#### Locally:
```bash
$ npm install xmeter
```
```html
<link rel="stylesheet" href="/node_modules/xmeter/css/xmeter.css"/>
<link rel="stylesheet" media="all" href="/node_modules/xmeter/css/dist/xmeter.css"/>
<link rel="stylesheet" media="screen and (min-width: 30em)" href="/node_modules/xmeter/css/dist/xmeter-sK.css"/>
<link rel="stylesheet" media="screen and (min-width: 45em)" href="/node_modules/xmeter/css/dist/xmeter-sM.css"/>
<link rel="stylesheet" media="screen and (min-width: 60em)" href="/node_modules/xmeter/css/dist/xmeter-sG.css"/>
<link rel="stylesheet" media="screen and (min-width: 75em)" href="/node_modules/xmeter/css/dist/xmeter-sT.css"/>
<link rel="stylesheet" media="screen and (min-width: 90em)" href="/node_modules/xmeter/css/dist/xmeter-sP.css"/>
<link rel="stylesheet" media="not all and (min-width: 30em)" href="/node_modules/xmeter/css/dist/xmeter-nK.css"/>
<link rel="stylesheet" media="not all and (min-width: 45em)" href="/node_modules/xmeter/css/dist/xmeter-nM.css"/>
<link rel="stylesheet" media="not all and (min-width: 60em)" href="/node_modules/xmeter/css/dist/xmeter-nG.css"/>
<link rel="stylesheet" media="not all and (min-width: 75em)" href="/node_modules/xmeter/css/dist/xmeter-nT.css"/>
<link rel="stylesheet" media="not all and (min-width: 90em)" href="/node_modules/xmeter/css/dist/xmeter-nP.css"/>
```

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

The stylesheet `xmeter.css` is already minified, and is accompanied by a sourcemap `xmeter.css.map`.
where `‹master›` can be any release tag, commit, or branch, and `‹breakpoint›` represents the media query.


## Features
Expand Down
2 changes: 1 addition & 1 deletion config/kss.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"source": "css/src/",
"destination": "docs/styleguide/",
"css": [
"../../css/xmeter.css",
"../../css/dist/xmeter.css",
"../../docs/css/kss.css"
],
"js": [
Expand Down
1 change: 1 addition & 0 deletions css/.npmignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
!dist
68 changes: 24 additions & 44 deletions css/src/_-fz.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,21 @@
/*################################*\
xmeter | _-fz.less
\*################################*/
@import (reference) url('./__settings.less');
@import (reference) url('./__tool.fontsize.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.
// CHANGED-DEPRECATED: Atoms starting with `.-fz-el-*` are deprecated and will be removed in v7.
// Instead, you should use the `.h-FontSize` helper and define the `--font-scale` custom property on your own.
//
// 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>
// <dt>updated</dt> <dd><time>2018-03-21</time></dd>
// </dl></header>
//
// Markup:
Expand All @@ -29,16 +30,6 @@
// <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
//
Expand All @@ -54,34 +45,23 @@
.-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; } }
// CHANGED-DEPRECATED! Use inline styles or define your own stylesheets instead.
.-fz-el-peta { --font-scale: @g-font-size-peta !important; --tracks: 4 !important; }
.-fz-el-tera { --font-scale: @g-font-size-tera !important; --tracks: 3 !important; }
.-fz-el-giga { --font-scale: @g-font-size-giga !important; --tracks: 2 !important; }
.-fz-el-mega { --font-scale: @g-font-size-mega !important; --tracks: 2 !important; }
.-fz-el-kilo { --font-scale: @g-font-size-kilo !important; }
.-fz-el-norm { --font-scale: @g-font-size-norm !important; }
.-fz-el-mill { --font-scale: @g-font-size-mill !important; }
.-fz-el-micr { --font-scale: @g-font-size-micr !important; }
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.-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; }
}
22 changes: 15 additions & 7 deletions css/src/__tool.fontsize.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,17 @@
font-size: (@ratio * 1rem);
// line-height: inherit; // NOTE clarification
& > * {
--lh: calc(@ratio ~' * var(--line-height) * 1rem'); // @ratio * parent lh
// COMBAK-FALLBACK for `lh` units. TODO remove after `lh` is supported.
--lh: calc(@ratio * var(--line-height) * 1rem); // @ratio * parent lh
}
}

// CHANGED:
// This mixin no longer uses the `var(--line-height)` expression, and instead
// uses the fallback value of 1.5. This mixin should only be used where
// CSS custom properties are not supported. For the most recent method,
// see documentation on the `.h-FontSize` helper.
//
// Sets the font size of an element within a module (or if not, in the root)
// while preserving vertical rhythm.
// Font size is set in ems so that it will scale accordingly with its
Expand All @@ -35,15 +42,16 @@
// `font-size` * `line-height` = one vertical rhythm unit
//
// ^params
// @ratio - (default: 1) the ratio of the new font size to
// @fontscale - (default: 1) the ratio of the new font size to
// the parent font size, i.e., the number of ems
// @lines - (default: 1) the number of vrus each line of text will take up.
// @tracks - (default: 1) the number of vrus each line of text will take up.
// should be a whole number to satisfy vertical rhythm.
// ^author
// : Chris Harvey
// ^updated
// : 2016-10-01
.font-size-el(@ratio: 1; @lines: 1) {
font-size: (@ratio * 1em);
line-height: calc(~'var(--line-height) / ' (@ratio/@lines));
// : 2018-03-21
.font-size-el(@fontscale: 1; @tracks: 1) {
@lineheight: 1.5;
font-size: (@fontscale * 1em);
line-height: (@lineheight / @fontscale * @tracks);
}
Loading

1 comment on commit f6e1a4b

@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.4.0

Please sign in to comment.