Initial Sass file structure

.gitignore

@@ -1,6 +1,9 @@
 # Files
 npm-debug.log
+*.css.map
+style.css
 
 # Folders
 bower_components/
 node_modules/
+.sass-cache/

Gruntfile.js

@@ -3,6 +3,9 @@ module.exports = function( grunt ) {
 grunt.loadNpmTasks( "grunt-contrib-jshint" );
 grunt.loadNpmTasks( "grunt-html" );
 grunt.loadNpmTasks( "grunt-jscs" );
+grunt.loadNpmTasks( "grunt-sass" );
+grunt.loadNpmTasks( "grunt-autoprefixer" );
+grunt.loadNpmTasks( "grunt-contrib-watch" );
 
 grunt.initConfig({
 	jshint: {
@@ -13,6 +16,47 @@ grunt.initConfig({
 	},
 	jscs: {
 		all: [ "*.js" ]
+	},
+	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
+			}
+		}
 	}
 });
 
@@ -34,5 +78,6 @@ grunt.registerTask( "update-authors", function() {
 });
 
 grunt.registerTask( "default", [ "jshint", "jscs" ] );
+grunt.registerTask( "build", [ "sass", "autoprefixer" ] );
 
 };

README.md

@@ -11,3 +11,25 @@ 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
+```
+
+### Other grunt commands
+
+* `grunt` - JS lint and style check
+* `grunt build` - Compiles the Sass into CSS
+* `grunt watch` - Watches Sass files for changes. Upon change, compiles the Sass.

package.json

@@ -1,48 +1,50 @@
 {
-	"name": "css-chassis",
-	"title": "Chassis",
-	"description": "An attempt at creating open standards designed for CSS libraries, JavaScript UI libraries, and web developers in general",
-	"version": "0.0.1-pre",
-	"author": {
-		"name": "jQuery Foundation and other contributors",
-		"url": "https://github.com/jquery/css-chassis/blob/master/AUTHORS.txt"
-	},
-	"maintainers": [
-		{
-			"name": "Sarah Frisk",
-			"email": "sarah@sarahfrisk.net",
-			"url": "http://sarahfrisk.net"
-		},
-		{
-			"name": "Alexander Schmitz",
-			"email": "arschmitz@gmail.com",
-			"url": "http://arschmitz.me"
-		},
-		{
-			"name": "Chris Bracco",
-			"email": "chris@cbracco.me",
-			"url": "http://cbracco.me"
-		}
-
-	],
-	"repository": {
-		"type": "git",
-		"url": "git://github.com/jquery/css-chassis.git"
-	},
-	"bugs": "http://github.com/jquery/css-chassis/issues/",
-	"licenses": [
-		{
-			"type": "MIT",
-			"url": "https://github.com/jquery/css-chassis/blob/master/LICENSE.txt"
-		}
-	],
-	"dependencies": {},
-	"devDependencies": {
-		"commitplease": "2.0.0",
-		"grunt": "0.4.2",
-		"grunt-contrib-jshint": "0.10.0",
-		"grunt-git-authors": "2.0.0",
-		"grunt-jscs": "0.6.2"
-	},
-	"keywords": []
+  "name": "css-chassis",
+  "title": "Chassis",
+  "description": "An attempt at creating open standards designed for CSS libraries, JavaScript UI libraries, and web developers in general",
+  "version": "0.0.1-pre",
+  "author": {
+    "name": "jQuery Foundation and other contributors",
+    "url": "https://github.com/jquery/css-chassis/blob/master/AUTHORS.txt"
+  },
+  "maintainers": [
+    {
+      "name": "Sarah Frisk",
+      "email": "sarah@sarahfrisk.net",
+      "url": "http://sarahfrisk.net"
+    },
+    {
+      "name": "Alexander Schmitz",
+      "email": "arschmitz@gmail.com",
+      "url": "http://arschmitz.me"
+    },
+    {
+      "name": "Chris Bracco",
+      "email": "chris@cbracco.me",
+      "url": "http://cbracco.me"
+    }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/jquery/css-chassis.git"
+  },
+  "bugs": "http://github.com/jquery/css-chassis/issues/",
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "https://github.com/jquery/css-chassis/blob/master/LICENSE.txt"
+    }
+  ],
+  "dependencies": {},
+  "devDependencies": {
+    "commitplease": "2.0.0",
+    "grunt": "0.4.2",
+    "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-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
+// ==========================================================================