Giter VIP home page Giter VIP logo

base.scss's Introduction

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).

base.scss's People

Contributors

necolas avatar jonathantneal avatar d-land avatar austinwi avatar dawidkkruczek avatar calvein avatar tj avatar tjvantoll avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.