Skip to content

Commit

Permalink
Merge branch 'beta-v7.1.0'
Browse files Browse the repository at this point in the history
  • Loading branch information
Chris Harvey committed Jan 17, 2019
2 parents a4a61b2 + 9a54f41 commit b67c1ee
Show file tree
Hide file tree
Showing 22 changed files with 756 additions and 331 deletions.
15 changes: 10 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ Use the global variables:
font-size: (1.5 * @g-font-size-kilo);
}
```
See `/src/__settings.less` for all the variables available.
See [`/css/src/__settings.less`](https://github.com/chharvey/xmeter/blob/master/css/src/__settings.less)
for all the variables available.

Use the tools:
```less
Expand All @@ -33,7 +34,8 @@ Use the tools:
.transitions(color, background-color; 500ms; ease-in-out);
}
```
Read about all of Xmeter’s tools (see `/docs/tools.md`).
Read about all of Xmeter’s tools at
[`/docs/tools.md`](https://github.com/chharvey/xmeter/blob/master/docs/tools.md).

### Deployment

Expand Down Expand Up @@ -64,8 +66,12 @@ $ npm install xmeter
<link rel="stylesheet" href="/node_modules/xmeter/css/dist/h-Constrain.css"/>
<link rel="stylesheet" href="/node_modules/xmeter/css/dist/h-FontSize.css"/>
<link rel="stylesheet" href="/node_modules/xmeter/css/dist/h-Ruled.css"/>
<link rel="stylesheet" href="/node_modules/xmeter/css/dist/-mt.css"/>
<link rel="stylesheet" href="/node_modules/xmeter/css/dist/-mb.css"/>
<link rel="stylesheet" href="/node_modules/xmeter/css/dist/-my.css"/>
<link rel="stylesheet" href="/node_modules/xmeter/css/dist/-pt.css"/>
<link rel="stylesheet" href="/node_modules/xmeter/css/dist/-pb.css"/>
<link rel="stylesheet" href="/node_modules/xmeter/css/dist/-py.css"/>
<link rel="stylesheet" href="/node_modules/xmeter/css/dist/-fz.css"/>
<link rel="stylesheet" href="/node_modules/xmeter/css/dist/xmeter.css"/> <!-- for development & testing only! -->
```
Expand All @@ -74,10 +80,9 @@ $ npm install xmeter
(not recommended, unless deploying your `/node_modules/` isn’t possible)

```html
<link rel="stylesheet" media="‹breakpoint›"
href="https://cdn.rawgit.com/chharvey/xmeter/‹master›/css/dist/‹filename›.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xmeter@‹X.Y.Z›/css/dist/‹filename›.css"/>
```
where `master` can be any release tag, commit, or branch, and `‹filename›` represents the stylesheet name.
where `X.Y.Z` is any published version number, and `‹filename›` is the name of the stylesheet.


## Features
Expand Down
34 changes: 17 additions & 17 deletions css/src/_-mb.less
Original file line number Diff line number Diff line change
Expand Up @@ -25,68 +25,68 @@
// <li class="-mb-4">Planet (4.00)</li>
// </ul>
//
// Weight: 1
// Weight: 1.1
//
// Styleguide Atoms.margin-bottom

@p-lh: 1.5rem; // COMBAK:FALLBACK for `lh` unit
@p-lh: 1.5rem; // COMBAK{FALLBACK} for `lh` unit

.-mb-0 {
margin-bottom: 0;
margin-block-end: 0;
}

.-mb-q {
margin-bottom: (0.25 * @p-lh); // COMBAK:FALLBACK
margin-bottom: calc(0.25 * var(--lh)); // COMBAK:FALLBACK
margin-bottom: (0.25 * @p-lh); // COMBAK{FALLBACK}
margin-bottom: calc(0.25 * var(--lh)); // COMBAK{FALLBACK}
margin-bottom: 0.25lh;
@supports (margin-block-end: var(--v)) {
margin-bottom: unset;
margin-block-end: calc(0.25 * var(--lh)); // COMBAK:FALLBACK
margin-block-end: calc(0.25 * var(--lh)); // COMBAK{FALLBACK}
margin-block-end: 0.25lh;
}
}

.-mb-h {
margin-bottom: (0.5 * @p-lh); // COMBAK:FALLBACK
margin-bottom: calc(0.5 * var(--lh)); // COMBAK:FALLBACK
margin-bottom: (0.5 * @p-lh); // COMBAK{FALLBACK}
margin-bottom: calc(0.5 * var(--lh)); // COMBAK{FALLBACK}
margin-bottom: 0.5lh;
@supports (margin-block-end: var(--v)) {
margin-bottom: unset;
margin-block-end: calc(0.5 * var(--lh)); // COMBAK:FALLBACK
margin-block-end: calc(0.5 * var(--lh)); // COMBAK{FALLBACK}
margin-block-end: 0.5lh;
}
}

.-mb-1 {
margin-bottom: @p-lh; // COMBAK:FALLBACK
margin-bottom: var(--lh); // COMBAK:FALLBACK
margin-bottom: @p-lh; // COMBAK{FALLBACK}
margin-bottom: var(--lh); // COMBAK{FALLBACK}
margin-bottom: 1lh;
@supports (margin-block-end: var(--v)) {
margin-bottom: unset;
margin-block-end: var(--lh); // COMBAK:FALLBACK
margin-block-end: var(--lh); // COMBAK{FALLBACK}
margin-block-end: 1lh;
}
}

.-mb-2 {
margin-bottom: (2 * @p-lh); // COMBAK:FALLBACK
margin-bottom: calc(2 * var(--lh)); // COMBAK:FALLBACK
margin-bottom: (2 * @p-lh); // COMBAK{FALLBACK}
margin-bottom: calc(2 * var(--lh)); // COMBAK{FALLBACK}
margin-bottom: 2lh;
@supports (margin-block-end: var(--v)) {
margin-bottom: unset;
margin-block-end: calc(2 * var(--lh)); // COMBAK:FALLBACK
margin-block-end: calc(2 * var(--lh)); // COMBAK{FALLBACK}
margin-block-end: 2lh;
}
}

.-mb-4 {
margin-bottom: (4 * @p-lh); // COMBAK:FALLBACK
margin-bottom: calc(4 * var(--lh)); // COMBAK:FALLBACK
margin-bottom: (4 * @p-lh); // COMBAK{FALLBACK}
margin-bottom: calc(4 * var(--lh)); // COMBAK{FALLBACK}
margin-bottom: 4lh;
@supports (margin-block-end: var(--v)) {
margin-bottom: unset;
margin-block-end: calc(4 * var(--lh)); // COMBAK:FALLBACK
margin-block-end: calc(4 * var(--lh)); // COMBAK{FALLBACK}
margin-block-end: 4lh;
}
}
92 changes: 92 additions & 0 deletions css/src/_-mt.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@

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


// margin-top
//
// Set the `margin-top` property on an element,
// or `margin-block-start` if it is supported.
//
// <header><dl>
// <dt>author</dt> <dd>Chris Harvey</dd>
// <dt>updated</dt> <dd><time>2018-07-07</time></dd>
// </dl></header>
//
// Markup:
// <!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/-mt.css"/-->
// <ul>
// <li class="-mt-0">Point (0.00)</li>
// <li class="-mt-q">Quark (0.25)</li>
// <li class="-mt-h">Atom (0.50)</li>
// <li class="-mt-1">Molecule (1.00)</li>
// <li class="-mt-2">Asteroid (2.00)</li>
// <li class="-mt-4">Planet (4.00)</li>
// </ul>
//
// Weight: 1
//
// Styleguide Atoms.margin-top

@p-lh: 1.5rem; // COMBAK{FALLBACK} for `lh` unit

.-mt-0 {
margin-top: 0;
margin-block-start: 0;
}

.-mt-q {
margin-top: (0.25 * @p-lh); // COMBAK{FALLBACK}
margin-top: calc(0.25 * var(--lh)); // COMBAK{FALLBACK}
margin-top: 0.25lh;
@supports (margin-block-start: var(--v)) {
margin-top: unset;
margin-block-start: calc(0.25 * var(--lh)); // COMBAK{FALLBACK}
margin-block-start: 0.25lh;
}
}

.-mt-h {
margin-top: (0.5 * @p-lh); // COMBAK{FALLBACK}
margin-top: calc(0.5 * var(--lh)); // COMBAK{FALLBACK}
margin-top: 0.5lh;
@supports (margin-block-start: var(--v)) {
margin-top: unset;
margin-block-start: calc(0.5 * var(--lh)); // COMBAK{FALLBACK}
margin-block-start: 0.5lh;
}
}

.-mt-1 {
margin-top: @p-lh; // COMBAK{FALLBACK}
margin-top: var(--lh); // COMBAK{FALLBACK}
margin-top: 1lh;
@supports (margin-block-start: var(--v)) {
margin-top: unset;
margin-block-start: var(--lh); // COMBAK{FALLBACK}
margin-block-start: 1lh;
}
}

.-mt-2 {
margin-top: (2 * @p-lh); // COMBAK{FALLBACK}
margin-top: calc(2 * var(--lh)); // COMBAK{FALLBACK}
margin-top: 2lh;
@supports (margin-block-start: var(--v)) {
margin-top: unset;
margin-block-start: calc(2 * var(--lh)); // COMBAK{FALLBACK}
margin-block-start: 2lh;
}
}

.-mt-4 {
margin-top: (4 * @p-lh); // COMBAK{FALLBACK}
margin-top: calc(4 * var(--lh)); // COMBAK{FALLBACK}
margin-top: 4lh;
@supports (margin-block-start: var(--v)) {
margin-top: unset;
margin-block-start: calc(4 * var(--lh)); // COMBAK{FALLBACK}
margin-block-start: 4lh;
}
}
92 changes: 92 additions & 0 deletions css/src/_-my.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@

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


// margin-vertical
//
// Set the `margin-top` and `margin-bottom` properties on an element,
// or `margin-block` if it is supported.
//
// <header><dl>
// <dt>author</dt> <dd>Chris Harvey</dd>
// <dt>updated</dt> <dd><time>2018-07-07</time></dd>
// </dl></header>
//
// Markup:
// <!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/-my.css"/-->
// <ul>
// <li class="-my-0">Point (0.00)</li>
// <li class="-my-q">Quark (0.25)</li>
// <li class="-my-h">Atom (0.50)</li>
// <li class="-my-1">Molecule (1.00)</li>
// <li class="-my-2">Asteroid (2.00)</li>
// <li class="-my-4">Planet (4.00)</li>
// </ul>
//
// Weight: 1.4
//
// Styleguide Atoms.margin-vertical

@p-lh: 1.5rem; // COMBAK{FALLBACK} for `lh` unit

.-my-0 {
margin-top: 0; margin-bottom: 0;
margin-block: 0;
}

.-my-q {
margin-top: (0.25 * @p-lh); margin-bottom: (0.25 * @p-lh); // COMBAK{FALLBACK}
margin-top: calc(0.25 * var(--lh)); margin-bottom: calc(0.25 * var(--lh)); // COMBAK{FALLBACK}
margin-top: 0.25lh; margin-bottom: 0.25lh;
@supports (margin-block: var(--v)) {
margin-top: unset; margin-bottom: unset;
margin-block: calc(0.25 * var(--lh)); // COMBAK{FALLBACK}
margin-block: 0.25lh;
}
}

.-my-h {
margin-top: (0.5 * @p-lh); margin-bottom: (0.5 * @p-lh); // COMBAK{FALLBACK}
margin-top: calc(0.5 * var(--lh)); margin-bottom: calc(0.5 * var(--lh)); // COMBAK{FALLBACK}
margin-top: 0.5lh; margin-bottom: 0.5lh;
@supports (margin-block-end: var(--v)) {
margin-top: unset; margin-bottom: unset;
margin-block: calc(0.5 * var(--lh)); // COMBAK{FALLBACK}
margin-block: 0.5lh;
}
}

.-my-1 {
margin-top: @p-lh; margin-bottom: @p-lh; // COMBAK{FALLBACK}
margin-top: var(--lh); margin-bottom: var(--lh); // COMBAK{FALLBACK}
margin-top: 1lh; margin-bottom: 1lh;
@supports (margin-block: var(--v)) {
margin-top: unset; margin-bottom: unset;
margin-block: var(--lh); // COMBAK{FALLBACK}
margin-block: 1lh;
}
}

.-my-2 {
margin-top: (2 * @p-lh); margin-bottom: (2 * @p-lh); // COMBAK{FALLBACK}
margin-top: calc(2 * var(--lh)); margin-bottom: calc(2 * var(--lh)); // COMBAK{FALLBACK}
margin-top: 2lh; margin-bottom: 2lh;
@supports (margin-block: var(--v)) {
margin-top: unset; margin-bottom: unset;
margin-block: calc(2 * var(--lh)); // COMBAK{FALLBACK}
margin-block: 2lh;
}
}

.-my-4 {
margin-top: (4 * @p-lh); margin-bottom: (4 * @p-lh); // COMBAK{FALLBACK}
margin-top: calc(4 * var(--lh)); margin-bottom: calc(4 * var(--lh)); // COMBAK{FALLBACK}
margin-top: 4lh; margin-bottom: 4lh;
@supports (margin-block: var(--v)) {
margin-top: unset; margin-bottom: unset;
margin-block: calc(4 * var(--lh)); // COMBAK{FALLBACK}
margin-block: 4lh;
}
}
Loading

0 comments on commit b67c1ee

Please sign in to comment.