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:
$ npm install xmeterUse the global variables:
reference url('/node_modules/xmeter/css/src/__settings.less');.my-selector font-size: 1.5 * @g-font-size-kilo;See /css/src/__settings.less
for all the variables available.
Use the tools:
reference url('/node_modules/xmeter/css/src/__tool.transitions.less');.my-selector .transitionscolor, background-color; 500ms; ease-in-out;Read about all of Xmeter’s tools at
/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.
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 <link>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:
$ npm install xmeter <!-- for development & testing only! -->Remotely from a CDN:
(not recommended, unless deploying your /node_modules/ isn’t possible)
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 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.
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 <link/> 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.
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 thetransition-{property,duration,timing-function,delay}properties all at once (semicolon-separated arguments)
Changelog
It’s on Github.