/Base.scss

A Sass normalize and base stylesheet

Primary LanguageCSSMIT LicenseMIT

Base.scss

Base.scss is currently based entirely on Set.scss by Rob Wierzbowski.

Set.scss is a Sass normalize and base stylesheet that emphasizes setting your own values instead of linking to an unedited third-party stylesheet. As Eric Meyer says, CSS resets are "a starting point, not a self-contained black box of no-touchiness."

Using Base.scss

Set.scss doesn't make assumptions on how baseline elements should be styled. It provides scaffolding to fill with element styles specific to your project, prepopulated with normalization rules from Nicolas Gallagher's Normalize.css and sensible defaults from HTML5 Boilerplate.

Base.scss improves upon Set.scss is trying to leverage the modularity of Sass by breaking out the differnt sections of Set.scss for two reasons.

  1. It allows you to easily eliminate sections that you are not using in a particular project
  2. It breaks up the style sheet into more managable chunks. As the idea behind Set.scss and Base.scss is to build onto them it makes sense to abstact each section you may be building on.

Comments above selectors let you know which rules must be set, and the project where the rule originated:

// Set margin (Normalize)
body {
  margin: 0;
}

If a rule must be set to a certain value, the value is given in the comment as well:

// Set font-size, font-family (Normalize)
// Set white-space: pre-wrap (Normalize)
pre {
  font-size: 1em;
  font-family: $type-stack-monospace;
  white-space: pre-wrap;
}

Testing

Base.scss currently provides a barebones grunt task to build your base.css file to use for testing against the test.html provided

If you have never used Grunt check out their site.

Technical notes

This project currently tracks:

Since this is primarily a re-interpretation of Normalize.css 2.x, browser support is identical: Modern browsers and IE8+.

html [element] is a hack to target android 4.x fixes, in case you're wondering (I was).