Build: Add sass and autoprefixer

Also adds build instructions to readme and build/watch tasks for builds

Closes gh-42
Ref gh-33

Author: MichaelArestad

.gitignore

@@ -1,8 +1,10 @@
 # Files
 npm-debug.log
 icons/icons.svg
-
+*.css.map
+style.css
 # Folders
 bower_components/
 node_modules/
 icons/svg-min/
+.sass-cache/

Gruntfile.js

@@ -5,6 +5,8 @@ grunt.loadNpmTasks( "grunt-html" );
 grunt.loadNpmTasks( "grunt-jscs" );
 grunt.loadNpmTasks( "grunt-svgmin" );
 grunt.loadNpmTasks( "grunt-svgstore" );
+grunt.loadNpmTasks( "grunt-sass" );
+grunt.loadNpmTasks( "grunt-autoprefixer" );
 grunt.loadNpmTasks( "grunt-contrib-watch" );
 
 grunt.initConfig({
@@ -60,8 +62,46 @@ grunt.initConfig({
 			}
 		}
 	},
-
+	sass: {
+		dist: {
+			options: {
+				sourceMap: true,
+				outputStyle: "compressed"
+			},
+			files: [ {
+				expand: true,
+				cwd: "scss",
+				src: [ "*.scss" ],
+				dest: "",
+				ext: ".css"
+			} ]
+		}
+	},
+	autoprefixer: {
+		dist: {
+			options: {
+				map: true,
+				browsers: [
+					"> 1%",
+					"last 2 versions",
+					"safari >= 5.1",
+					"ios >= 6.1",
+					"android 2.3",
+					"android >= 4",
+					"ie >= 8"
+				]
+			},
+			src: "*.css"
+		}
+	},
 	watch: {
+		sass: {
+			files: [ "scss/**/*.scss" ],
+			tasks: [ "sass", "autoprefixer" ],
+			options: {
+				spawn: false
+			}
+		},
 		svg: {
 			files: [ "svg-source/**/*.svg" ],
 			tasks: [ "svgmin", "svgstore" ],
@@ -90,5 +130,6 @@ grunt.registerTask( "update-authors", function() {
 });
 
 grunt.registerTask( "default", [ "jshint", "jscs" ] );
+grunt.registerTask( "build", [ "sass", "autoprefixer" ] );
 
 };

README.md

@@ -11,3 +11,19 @@ Chassis is an attempt at creating open standards designed for CSS libraries, Jav
 ## Project Collaboration and Interoperability
 
 If you maintain a JavaScript library that has UI components, we'd love for you to join our efforts. We'd be happy to hear your feedback and work through updates of your project(s) to support CSS Framework. If you have the time and interest to help define the standards and improve on our implementation, that's even better! Check out the [contribution guidelines](https://github.com/jquery/css-chassis/blob/master/CONTRIBUTING.md) for more information.
+
+
+## Getting started
+
+### Prerequisites
+
+Node.js and npm should be installed. [[installer]](http://nodejs.org/download/)
+
+### Building
+
+Once you've cloned Chassis to your machine, run `npm install` and `grunt build` from the root Chassis directory.
+
+```
+$ npm install
+$ grunt build
+```

package.json

@@ -39,12 +39,14 @@
   "devDependencies": {
     "commitplease": "2.0.0",
     "grunt": "^0.4.5",
+    "grunt-autoprefixer": "^2.1.0",
     "grunt-contrib-jshint": "0.10.0",
     "grunt-contrib-watch": "^0.6.1",
     "grunt-git-authors": "2.0.0",
     "grunt-jscs": "0.6.2",
     "grunt-svgmin": "^2.0.0",
-    "grunt-svgstore": "^0.5.0"
+    "grunt-svgstore": "^0.5.0",
+    "grunt-sass": "^0.17.0"
   },
   "keywords": []
 }

scss/_utilities/_clearfix.scss

@@ -0,0 +1,19 @@
+// ==========================================================================
+// Clearfix
+// ==========================================================================
+
+
+@mixin clearfix() {
+	&:before,
+	&:after {
+		content: "";
+		display: table;
+	}
+	&:after {
+		clear: both;
+	}
+}
+
+.clearfix {
+	@include clearfix;
+}

scss/_utilities/_colors.scss

@@ -0,0 +1,3 @@
+// ==========================================================================
+// Colors
+// ==========================================================================

scss/atoms/icons/_icons.scss

@@ -0,0 +1,3 @@
+// ==========================================================================
+// Icons
+// ==========================================================================

scss/atoms/typography/_functions.scss

@@ -0,0 +1,12 @@
+// ==========================================================================
+// Typography functions
+// ==========================================================================
+
+// em() function
+// Convert px to em in a readable fashion.
+// Examples:
+// 1. font-size: em(14px);
+// 2. font-size: em(30px/14px);
+@function em($value, $context: map-get($root-font, font-size)) {
+	@return ($value / $context * 1em);
+}

scss/atoms/typography/_typography.scss

@@ -0,0 +1,7 @@
+// ==========================================================================
+// Typography
+// ==========================================================================
+
+@import
+	"variables",
+	"functions";

scss/atoms/typography/_variables.scss

@@ -0,0 +1,19 @@
+// ==========================================================================
+// Typography variables
+// ==========================================================================
+
+// Change these values when using custom fonts
+// For example, normal: 400;
+$normal: normal;
+$bold: bold;
+
+$root-font:(
+	color: #222,
+	font-size: 20px,
+	line-height: 1.5
+);
+
+// Typefaces
+$monospace: "courier new", monospace;
+$serif: Georgia, "Times New Roman", Times, serif;
+$sans: Helvetica, Arial, sans-serif;

scss/style.scss

@@ -0,0 +1,14 @@
+// ==========================================================================
+// CSS Chassis
+// ==========================================================================
+
+@import
+	"_utilities/clearfix",
+	"_utilities/colors";
+
+@import
+	"atoms/icons/icons",
+	"atoms/typography/typography";
+
+@import
+	"views/main";

scss/views/main.scss

@@ -0,0 +1,3 @@
+// ==========================================================================
+// Main
+// ==========================================================================