A modern, HTML5-ready alternative to CSS resets, as a SCSS module
CSS HTML
Switch branches/tags
Clone or download
Pull request Compare This branch is 74 commits ahead, 212 commits behind necolas:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
.gitignore
LICENSE.md
README.md
_normalize.scss
package.json
test.html

README.md

_normalize.scss v2.2.0

_normalize.scss is a customisable SASS file that makes browsers render all elements more consistently and in line with modern standards--derived from Nicholas Gallagher's Normalize.css project. It is the result of researching the differences between default browser styles in order to precisely target only the styles that need normalizing.

Check out the demo

What does it do?

  • Preserves useful defaults, unlike many CSS resets.
  • Normalizes styles for a wide range of elements.
  • Corrects bugs and common browser inconsistencies.
  • Improves usability with subtle improvements.
  • Explains what code does using detailed comments.

How to use it

I intend _normalize.scss to be used as a declaration of many default styles that I used in Ayn Rand Institute web projects, and for working around many browser quirks. It has been adapted for use as an @import into a site's stylesheet, and compiled in using Sass, using a subset of Sass that can be compiled by libsass. An npm build script for making a standalone version is provided, if you wish to make a standalone version.

The following variables are used throughout the code, and you can override them in your own loader stylesheets:

$base-font-size: 15px !default; // otherwise inherited from _rem library
$text-color: #333 !default;
$background-color: #ccc !default;
$lh: 1.2rem !default; // line-height unit, in rem

Dependencies:

Node.JS and its package manager, npm. Install Node.JS via whatever method you choose (too much to list here, bleh).

Then for this project, once cloned, install the necessary local NPM modules for handling the various gulp tasks by running:

cd {project install folder}
npm install

For the future

This file is becoming less of a normalizer, and more of a "framework", as my opinions about the margins/padding and base appearance of some links are creeping in. I re-sync with Necolas' project whenever I judge that another default is needed.

From Nicholas Gallagher (necolas):

_normalize.scss is intended to be used as an alternative to CSS resets.

It's suggested that you read the _normalize.scss file and consider customising it to meet your needs. Alternatively, include the file in your project and override the defaults later in your CSS.

Browser support

I am tracking the v1 series, because I want to keep some old browser support around, these old browsers include:

  • Google Chrome
  • Mozilla Firefox 3+ (the Long-Term Support release of Firefox is based on v3)
  • Apple Safari 4+ (because some people haven't upgraded their iOS version)
  • Opera 10+
  • Internet Explorer 6+ (better in here than in my main CSS files)

Contribute

Please contribute to the upstream project: Please read the issue guidelines. Issue reports to me are welcome, but either address a matter of my personal taste or site standards, or ultimately rely on the work of the upstream maintainers. Only one of those is a "public" problem (hint, it's upstream).

Acknowledgements

_normalize.css is adapted from Normalize.css, which is a project by Nicolas Gallagher and Jonathan Neal.