Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chharvey/xmeter
A default stylesheet with a set of tools that make designing with vertical rhythm easy.
https://github.com/chharvey/xmeter
Last synced: 9 days ago
JSON representation
A default stylesheet with a set of tools that make designing with vertical rhythm easy.
- Host: GitHub
- URL: https://github.com/chharvey/xmeter
- Owner: chharvey
- License: mit
- Created: 2015-03-08T19:47:06.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2019-11-10T22:12:01.000Z (about 5 years ago)
- Last Synced: 2024-11-19T14:37:35.349Z (about 1 month ago)
- Language: CSS
- Homepage: https://www.npmjs.com/package/xmeter
- Size: 1.68 MB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [xmeter](https://chharvey.github.io/xmeter/)
A default stylesheet with a set of tools that make designing with vertical rhythm easy.
Pronounced “Cross Meter”.
## Installation and Usage
This package can be used in two ways: Development and Deployment.
### Development
Develop your own codebase using Xmeter’s helper tools (Less mixins to help make your life easier).
Install:
```bash
$ npm install xmeter
```
Use the global variables:
```less
@import (reference) url('/node_modules/xmeter/css/src/__settings.less');
.my-selector {
font-size: (1.5 * @g-font-size-kilo);
}
```
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
@import (reference) url('/node_modules/xmeter/css/src/__tool.transitions.less');
.my-selector {
.transitions(color, background-color; 500ms; ease-in-out);
}
```
Read about all of Xmeter’s tools at
[`/docs/tools.md`](https://github.com/chharvey/xmeter/blob/master/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](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`.
The recommended approach is to link only the stylesheets you need, and update your ``s when your needs change.
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.
For development and testing, you can link/import `xmeter.css`, which concatenates all styles into one sheet.
#### Locally:
```bash
$ npm install xmeter
```
```html
```
#### Remotely from a CDN:
(not recommended, unless deploying your `/node_modules/` isn’t possible)
```html
```
where `‹X.Y.Z›` is any published version number, and `‹filename›` is the name of the stylesheet.
## Features
Xmeter’s stylesheet is a starting point that “normalizes” unclassed HTML elements.
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](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
`npm install`, `@import`, or `` it manually.
### Vertical Rhythm
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](https://github.com/chharvey/xmeter/wiki/Vertical-Rhythm).
### Base Styles
Minor, albeit prettier, style changes for some text-level elements (from common browser defaults).
### Miscellaneous Tools
- `.sprite()` sets background image sprites
- `.delims()` sets quotes and other things
- `.border-*-radius()` sets the border-radius on one side of a box, e.g., only the left side
- `.transitions()` allows you to set the
`transition-{property,duration,timing-function,delay}` properties all at once (semicolon-separated arguments)
## Changelog
It’s on [Github](https://github.com/chharvey/xmeter/releases).