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.

• Setup
• Usage
• Differences from Reset 2.0
• Differences from normalize.css 3.2.2
• Optional additional flavor
• Why?
• License

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