reset.styl

Just one powerful implementation of those popular resets in Stylus

npm install reset.styl
4 downloads in the last week
7 downloads in the last month

reset.styl Build Status NPM version

reset.styl is a resetting framework. Do you use Eric Meyer's Reset or Normalize.css from Necolas? Or do you have your own reset?

With reset.styl you can use any parts of those resets, or combine them with your overrides in an easy and maintainable way.

Install

installation instructions coming soon; in the meantime: use npm or git if you know how!

Basic usage

After including reset.styl (more on this coming soon) in your Stylus stylesheet, you can start using the two available resets: Meyers and Normalize.

To say reset.styl which reset you would like to use, you should write something like this:

use_reset('meyer')

or

use_reset('normalize')

This won't do anything on its own: it would only tell Stylus from where take the reset styles when you'll need them.

Then there are two possible ways to use the resets: in the global scope, and in the scope of a selector.

Global scope

Just call the reset() function in the global scope, passing what you wish to reset as arguments.

If you wouldn't pass anything or would pass 'all' keyword like this:

reset('all')

You would get all the reset styles from the reset you've used.

However, in most cases you won't need to have all those styles in your stylesheet: you can pass a string with an array of elements you want to reset, like this:

reset('ul li a table')

This would reset only the given elements.

Local scope

If you don't want to have any element selectors, you could use the selector scope for resets. So, for Meyer's reset this:

use_reset('meyer')

.list
  reset('ul, ol')

  &-item
    reset('li')

would render to this:

.list,
.list-item {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
.list {
  list-style: none;
}
npm loves you