Skip to content

Commit

Permalink
Merge branch 'beta-v7.0.0'
Browse files Browse the repository at this point in the history
  • Loading branch information
Chris Harvey committed Jul 20, 2018
2 parents 8142f35 + cc23620 commit a4a61b2
Show file tree
Hide file tree
Showing 57 changed files with 2,513 additions and 4,033 deletions.
1 change: 0 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,5 +33,4 @@ node_modules
css/dist

# Generated documentation & style guides
docs/api
docs/styleguide
54 changes: 24 additions & 30 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,66 +38,60 @@ Read about all of Xmeter’s tools (see `/docs/tools.md`).
### Deployment

Use Xmeter right out of the box on your own site.
Want to see what Xmeter can do? [Check out the style guide](http://chharvey.github.io/xmeter/docs/styleguide/).
Want to see what Xmeter can do? [Check out the style guide](https://chharvey.github.io/xmeter/docs/styleguide/).

The production stylesheets are split into class-specific partials, which you can link or import separately.
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.
Your users will appreciate that. Additionally, this more fine-grained approach allows you to import the classes
you need in the order you need, so you can work with specificity and overrides more easily.

Mnemonic:
1. Kilo
2. Mega
3. Giga
4. Tera
5. Peta
For development and testing, you can link/import `xmeter.css`, which concatenates all styles into one sheet.

#### Locally:
```bash
$ npm install xmeter
```
```html
<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"/>
<link rel="stylesheet" href="/node_modules/xmeter/css/dist/base.css"/>
<link rel="stylesheet" href="/node_modules/xmeter/css/dist/o-List.css"/>
<link rel="stylesheet" href="/node_modules/xmeter/css/dist/o-Flex.css"/>
<link rel="stylesheet" href="/node_modules/xmeter/css/dist/o-Grid.css"/>
<link rel="stylesheet" href="/node_modules/xmeter/css/dist/h-Block.css"/>
<link rel="stylesheet" href="/node_modules/xmeter/css/dist/h-Inline.css"/>
<link rel="stylesheet" href="/node_modules/xmeter/css/dist/h-Clearfix.css"/>
<link rel="stylesheet" href="/node_modules/xmeter/css/dist/h-Measure.css"/>
<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/-mb.css"/>
<link rel="stylesheet" href="/node_modules/xmeter/css/dist/-pt.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! -->
```

#### Remotely from a CDN:
(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/xmeter‹breakpoint›.css"/>
href="https://cdn.rawgit.com/chharvey/xmeter/‹master›/css/dist/‹filename›.css"/>
```
where `‹master›` can be any release tag, commit, or branch, and `‹breakpoint›` represents the media query.
where `‹master›` can be any release tag, commit, or branch, and `‹filename›` represents the stylesheet name.


## Features

Xmeter’s stylesheet is a starting point that “normalizes” unclassed HTML elements.
And now that Xmeter has a few [design patterns](http://chharvey.github.io/xmeter/docs/styleguide/) built in, you can use them in your markup too!
And now that Xmeter has a few [design patterns](https://chharvey.github.io/xmeter/docs/styleguide/) built in, you can use them in your markup too!
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.

### normalize.css

This stylesheet rides on top of **normalize.css** developed by
[Nicolas Gallagher](http://necolas.github.io/normalize.css/).
[Nicolas Gallagher](https://necolas.github.io/normalize.css/).

This package has **normalize.css** as an npm dependency.
normalize.css is imported into xmeter.css, so there is *no need* to
Expand Down
2 changes: 0 additions & 2 deletions _views/_c-Permalink.view.pug
View file

This file was deleted.

52 changes: 0 additions & 52 deletions class/Xmeter.class.js
View file

This file was deleted.

26 changes: 0 additions & 26 deletions config/jsdoc.json
View file

This file was deleted.

2 changes: 0 additions & 2 deletions config/kss.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,5 @@
"./kss-custom.css"
],
"js": [
"http://code.jquery.com/jquery-3.2.1.min.js",
"../../js/o-Tablist.js"
]
}
41 changes: 9 additions & 32 deletions css/src/_-fz.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,13 @@
// [type scale](./section-principles.html).
// You can see the source for the font-size settings in <a>/src/__settings.less</a>.
//
// 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.
//
// <header><dl>
// <dt>author</dt> <dd>Chris Harvey</dd>
// <dt>updated</dt> <dd><time>2018-03-26</time></dd>
// </dl></header>
//
// Markup:
// <!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/-fz.css"/-->
// <ul>
// <li class="-fz-micr">Quark (0.625)</li>
// <li class="-fz-mill">Atom (0.75) </li>
Expand All @@ -38,32 +36,11 @@
// Styleguide Atoms.font-size


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


// CHANGED-DEPRECATED! Use inline styles or define your own stylesheets instead.
.-fz-el-micr { --font-scale: @g-font-size-micr !important; }
.-fz-el-mill { --font-scale: @g-font-size-mill !important; }
.-fz-el-norm { --font-scale: @g-font-size-norm !important; }
.-fz-el-kilo { --font-scale: @g-font-size-kilo !important; }
.-fz-el-mega { --font-scale: @g-font-size-mega !important; --tracks: 2 !important; }
.-fz-el-giga { --font-scale: @g-font-size-giga !important; --tracks: 2 !important; }
.-fz-el-tera { --font-scale: @g-font-size-tera !important; --tracks: 2 !important; }
.-fz-el-peta { --font-scale: @g-font-size-peta !important; --tracks: 3 !important; }
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.-fz-el-micr { .font-size-el(@g-font-size-micr; ) !important; }
.-fz-el-mill { .font-size-el(@g-font-size-mill; ) !important; }
.-fz-el-norm { .font-size-el(@g-font-size-norm; ) !important; }
.-fz-el-kilo { .font-size-el(@g-font-size-kilo; ) !important; }
.-fz-el-mega { .font-size-el(@g-font-size-mega; 2) !important; }
.-fz-el-giga { .font-size-el(@g-font-size-giga; 2) !important; }
.-fz-el-tera { .font-size-el(@g-font-size-tera; 2) !important; }
.-fz-el-peta { .font-size-el(@g-font-size-peta; 3) !important; }
}
.-fz-micr { --font-scale: @g-font-size-micr; font-size: (@g-font-size-micr * 1em); }
.-fz-mill { --font-scale: @g-font-size-mill; font-size: (@g-font-size-mill * 1em); }
.-fz-norm { --font-scale: @g-font-size-norm; font-size: (@g-font-size-norm * 1em); }
.-fz-kilo { --font-scale: @g-font-size-kilo; font-size: (@g-font-size-kilo * 1em); }
.-fz-mega { --font-scale: @g-font-size-mega; --tracks: 2; font-size: (@g-font-size-mega * 1em); }
.-fz-giga { --font-scale: @g-font-size-giga; --tracks: 2; font-size: (@g-font-size-giga * 1em); }
.-fz-tera { --font-scale: @g-font-size-tera; --tracks: 2; font-size: (@g-font-size-tera * 1em); }
.-fz-peta { --font-scale: @g-font-size-peta; --tracks: 3; font-size: (@g-font-size-peta * 1em); }
1 change: 1 addition & 0 deletions css/src/_-mb.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
// </dl></header>
//
// Markup:
// <!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/-mb.css"/-->
// <ul>
// <li class="-mb-0">Point (0.00)</li>
// <li class="-mb-q">Quark (0.25)</li>
Expand Down
1 change: 1 addition & 0 deletions css/src/_-pt.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
// </dl></header>
//
// Markup:
// <!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/-pt.css"/-->
// <ul>
// <li class="-pt-0">Point (0.00)</li>
// <li class="-pt-q">Quark (0.25)</li>
Expand Down
Loading

0 comments on commit a4a61b2

Please sign in to comment.