morph.css

The Latest Greatest Reset CSS

Our Goal is

You can define default styles for whatever tags whenever you want. This morph.css do no harm for these.
You can opt in or out of morph.css anytime. Even after you've included this reset css into your projects.
We'll push our users to do code more semantically.

Inspired by

nondestructive-reset.css

Usage

Basics:

You wrote p tag, but it looks like div.

<p class="div"></p>

You wrote a tag, but it looks like span.

<a href="#" class="span"></a>

Components:

You can use semantic tags, but they looks like non-semantics.

<div clas="your-component">
  <ul class="your-component__items div">
    <li class="your-component__item div">
      <a href="#" class="your-component__link span">

      </a>
    </li>
  </ul>
</div>

Install morph.css

npm

$ npm install morph.css --save

bower

$ bower install morph.css

Download

master.zip

Test Results

Level 1: Against browsers' default styles
Level 2: Against authors' reset styles
Level 3: Against authors' scoped styles (Advanced)

Advanced test requires Stylus support. Which is scoped import ability like this:

.your-scope
  @import "path/to/morph.css/src/morph"

Supported Browsers

All browsers

BYODKM/morph.css