css reset and normalize sass

A cleaned up combination of Eric Meyer's Reset CSS 2.0 and Nicolas Gallagher's normalize.css with some optional flavor. The Sass Version.

css-reset-and-normalize-sass

Sass Version of css-reset-and-normalize (stylus original).

A cleaned up combination of Eric Meyer’s
Reset CSS 2.0
and Nicolas Gallagher’s
normalize.css
with some optional flavor.

npm Package Version
MIT License
Build Status


Setup

Packages can be installed via npm or bower:

  • npm install css-reset-and-normalize-sass
  • bower install css-reset-and-normalize-sass

Usage

Sources are available in scss or generated css
including minified versions.

<link…> or @import the minified or unminified css version:

  • css/reset-and-normalize.min.css
  • css/reset-and-normalize.css

Or with some additional flavor:

  • css/flavored-reset-and-normalize.min.css
  • css/flavored-reset-and-normalize.css

Or @import the stylus versions:

  • scss/reset-and-normalize.scss
  • scss/flavored-reset-and-normalize.scss

Differences from Reset 2.0

  • Removed hgroup from all selectors as it is not included in the HTML5
    specification anymore
  • Added main to basic reset
  • Added main and summary to HTML5 display-role reset selector

Differences from normalize.css 3.2.2

  • Removed everything that is already covered or overwritten by Reset:
    • HTML5 display-role reset
    • h1: font-size, margin
    • sub, sup: vertical-align
    • figure: margin
    • code, kbd, pre, samp: font-size
    • fieldset: border, margin, padding
    • table: border-collapse, border-spacing
    • td, th: padding
  • Removed vendor prefixes for box-sizing (autoprefixer handles that)
  • Set font-style: italic for i, em, resetted by basic reset

Optional additional flavor

  • Add rules for responsive @viewport
  • Set box-sizing:border-box for everything
  • Set help cursor for abbr
  • Add transparent tap highlight for iOS
  • iOS “clickable elements” fix for role="button"
  • Avoid 300ms click delay on touch devices that support the touch-action CSS property
  • Override the extra rounded corners on search inputs in iOS

Why?

I personally prefer normalizing over resetting in general.
But when it comes to producing detailed custom styles for all elements, i find
myself overwriting and resetting most rules, that were previously normalized.
That’s why I ended up with a combination of both: reset and normalize – with
some optional flavor…

License

MIT