Build: add jsass-vars and completely modularize grunt

.gitignore

@@ -6,6 +6,7 @@ style.css
 # Folders
 bower_components/
 node_modules/
+external/
 icons/svg-min/
 .sass-cache/
 dist/

.jshintrc

@@ -12,6 +12,8 @@
 	"trailing": true,
 	"undef": true,
 	"unused": true,
-
+	"globals": {
+		"define": true
+	},
 	"node": true
 }

Gruntfile.js

@@ -1,199 +1,10 @@
 module.exports = function( grunt ) {
-require( "load-grunt-tasks" )( grunt );
-
-var config = {
-		htmllint: {
-			dist: {
-				options: {},
-				src: [ "demos/*.html" ]
-			}
-		},
-		autoprefixer: {
-			dist: {
-				options: {
-					map: true,
-					browsers: [
-						"> 1%",
-						"last 2 versions",
-						"safari >= 5.1",
-						"ios >= 6.1",
-						"android 2.3",
-						"android >= 4",
-						"ie >= 8"
-					]
-				},
-				src: "dist/css/*.css"
-			}
-		},
-		csscomb: {
-			dist: {
-				files: {
-					"dist/css/chassis.css": "dist/css/chassis.css"
-				}
-			},
-			scss: {
-				files: [ {
-					expand: true,
-					src: [ "scss/**/*.scss" ]
-				} ]
-			}
-		},
-		cssmin: {
-			options: {
-				report: "gzip",
-				sourceMap: true
-			},
-			target: {
-				files: {
-					"dist/css/chassis.min.css": "dist/css/chassis.css"
-				}
-			}
-		},
-		csslint: {
-			src: [ "dist/css/chassis.lint.css", "dist/css/chassis.lint.css", "demos/demos.css" ]
-		},
-		jscs: {
-			all: [ "*.js", "performance/**/*.js" ]
-		},
-		jshint: {
-			files: [ "*.js", "performance/**/*.js" ],
-			options: {
-				jshintrc: ".jshintrc"
-			}
-		},
-		npmcopy: {
-			options: {
-				destPrefix: "external"
-			},
-			normalize: {
-				files: {
-					"normalize.css/LICENSE.md": "normalize.css/LICENSE.md",
-					"normalize.css/normalize.scss": "normalize.css/normalize.css"
-				}
-			}
-		},
-		sass: {
-
-			// This is the same as lint below except including normalize.css
-			dist: {
-				options: {
-					sourceMap: true,
-
-					// This actually does nested until libsass updates to support expanded
-					outputStyle: "expanded"
-				},
-				files: {
-					"dist/css/chassis.css": "scss/style.scss"
-				}
-			},
-
-			// This is everything except normalize.css which won't pass our lint settings
-			lint: {
-				options: {
-					sourceMap: true,
-
-					// This actually does nested until libsass updates to support expanded
-					outputStyle: "expanded"
-				},
-				files: {
-					"dist/css/chassis.lint.css": "scss/lint.scss"
-				}
-			}
-		},
-
-		// Minifies SVGs
-		svgmin: {
-			options: {
-				plugins: [
-					{
-						removeViewBox: false
-					},
-					{
-						removeUselessStrokeAndFill: false
-					}
-				]
-			},
-			dist: {
-				files: [ {
-					expand: true,
-					cwd: "icons/svg-source",
-					src: [ "*.svg" ],
-					dest: "icons/svg-min/",
-					ext: ".svg"
-				} ]
-			}
-		},
-
-		// Combines SVGs into single file
-		svgstore: {
-			defaults: {
-				options: {
-
-					// This will prefix each ID
-					prefix: "icon-",
-
-					// Adds attributes to the resulting SVG
-					svg: {
-						viewBox: "0 0 24 24",
-						xmlns: "http://www.w3.org/2000/svg"
-					},
-					cleanup: [ "style", "fill", "id" ]
-				},
-				files: {
-					"icons/icons.svg": [ "icons/svg-min/*.svg" ]
-				}
-			}
-		},
-		watch: {
-			sass: {
-				files: [ "scss/**/*.scss" ],
-				tasks: [ "build" ],
-				options: {
-					spawn: false
-				}
-			},
-			svg: {
-				files: [ "svg-source/**/*.svg" ],
-				tasks: [ "svg" ],
-				options: {
-					spawn: false
-				}
-			}
-		},
-		"stop-selenium-server": {
-			dev: {}
-		}
-	};
-
-// This loads files in the options folder as task options
-// and builds an object based on their file names
-function loadConfig(path) {
-	var glob = require( "glob" ),
-		object = {},
-		key;
-
-	glob.sync( "*", { cwd: path } ).forEach( function( option ) {
-		key = option.replace( /\.js$/, "" );
-		object[ key ] = require( path + option );
-	});
-
-	return object;
-}
-
-// We no combine the loaded task options with the ones defined in config above
-grunt.util._.extend( config, loadConfig( "./tasks/options/" ) );
-
-grunt.initConfig( config );
-grunt.loadTasks( "tasks" );
-grunt.loadNpmTasks( "perfjankie" );
-grunt.registerTask( "default", [ "test" ] );
-grunt.registerTask( "test", [ "build", "jshint", "jscs", "csslint", "htmllint" ] );
-grunt.registerTask( "build", [ "svg", "sass", "csscomb", "cssmin" ] );
-grunt.registerTask( "perf", [
-	"start-selenium-server",
-	"connect:perf",
-	"perfjankie",
-	"stop-selenium-server"
-]);
-grunt.registerTask( "svg", [ "svgmin", "svgstore" ] );
+var path = require( "path" );
+require( "load-grunt-config" )( grunt, {
+	configPath: [
+		path.join( process.cwd(), "tasks/options" ),
+		path.join( process.cwd(), "tasks" )
+	],
+	init: true
+} );
 };

package.json

@@ -2,7 +2,7 @@
   "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",
+  "version": "0.0.1",
   "author": {
     "name": "jQuery Foundation and other contributors",
     "url": "https://github.com/jquery/css-chassis/blob/master/AUTHORS.txt"
@@ -48,7 +48,6 @@
     "chromedriver": "2.13.0",
     "commitplease": "2.0.0",
     "ejs-template": "0.1.0",
-    "glob": "4.4.2",
     "grunt": "0.4.5",
     "grunt-autoprefixer": "2.1.0",
     "grunt-contrib-cssmin": "0.10.0",
@@ -59,14 +58,13 @@
     "grunt-csscomb": "3.0.0",
     "grunt-git-authors": "2.0.0",
     "grunt-html": "1.6.0",
-    "grunt-htmllint": "0.2.7",
-    "grunt-jscs": "0.6.2",
-    "grunt-npmcopy": "0.1.0",
-    "grunt-sass": "0.18.1",
+    "grunt-jscs": "1.8.0",
+    "grunt-sass": "0.17.0",
     "grunt-selenium-server": "0.1.2",
     "grunt-svgmin": "2.0.0",
     "grunt-svgstore": "0.5.0",
-    "load-grunt-tasks": "3.1.0",
+    "jsass-vars": "0.0.3",
+    "load-grunt-config": "0.16.0",
     "perfjankie": "1.2.2"
   },
   "keywords": []

performance/component.js

@@ -7,7 +7,7 @@ var components = {
 				html = "";
 
 			function render( i ) {
-				framework[ component ].variations[ keys[ i ] ].forEach(function( value ) {
+				framework[ component ].variations[ keys[ i ] ].forEach( function( value ) {
 					current[ keys[ i ] ] = value;
 					if ( i < keys.length - 1 ) {
 						render( i + 1 );
@@ -17,7 +17,7 @@ var components = {
 							html = html + framework[ component ].generator.call( this, current );
 						}
 					}
-				});
+				} );
 			}
 			while ( currentCount < count ) {
 				render( 0 );

performance/frameworks/bootstrap.js

@@ -27,7 +27,7 @@ module.exports = {
 			],
 			icon: [
 				false,
-				"asterisk",
+				"astrisk",
 				"plus",
 				"minus",
 				"euro",

scss/atoms/typography/_functions.scss

@@ -7,6 +7,6 @@
 // Examples:
 // 1. font-size: em(14px);
 // 2. font-size: em(30px/14px);
-@function em($value, $context: map-get($root-font, font-size)) {
+@function em($value, $context: map-get($defaultFont, font-size)) {
 	@return ($value / $context * 1em);
 }

scss/atoms/typography/_typography.scss

@@ -3,12 +3,12 @@
 // ==========================================================================
 
 @import
-	"variables",
+	"dist/chassis",
 	"functions",
 	"mixins";
 
 body {
-	font: $normal #{ map-get( $root-font, font-size ) }/1.5 $sans-serif;
+	font: $normal #{ map-get( $defaultFont, font-size ) }/1.5 $sans;
 
 	@media ( max-width: 800px ) {
 		font-size: 16px;

scss/style.scss

@@ -1,8 +1,13 @@
 // ==========================================================================
 // CSS Chassis
 // ==========================================================================
-// This just adds normalize to the build see lint.scss for explanation.
 
 @import
-	"external/normalize.css/normalize.scss",
-	"lint.scss";
+	"_utilities/clearfix";
+
+@import
+	"atoms/icons/icons",
+	"atoms/typography/typography";
+
+@import
+	"views/main";

scss/variables/chassis.js

@@ -0,0 +1,13 @@
+// This is just boiuler plate dont worry about it
+// This just supports loading in any enviroment
+( function( root, factory ) {
+	if ( typeof define === "function" && define.amd ) {
+		define( [], factory );
+	} else if ( typeof exports === "object" ) {
+		module.exports = factory();
+	} else {
+		root.chassis = factory();
+  }
+}( this, function() {
+return {};
+} ) );