v2.0.0 - SASS version

Gruntfile.js

@@ -1,79 +1,97 @@
-module.exports = function (grunt) {
+module.exports = grunt => {
 
-    grunt.initConfig({
+	require('load-grunt-tasks')(grunt);
 
-        // live browser injection
-        browserSync: {
-            bsFiles: {
-                src : 'css/site.css'
+	grunt.initConfig({
+		browserSync: {
+			bsFiles: {
+                src: [
+                    'css/*.css',
+                    'js/*.js',
+                    '/*.html'
+                ]
             },
-            options: {
-                watchTask: true
-            }
-        },
-
-        // watch changes to less files
-        watch: {
-            styles: {
-                files: ['less/**/*'],
-                tasks: ['less'],
-                options: {
-                   spawn: false
-                }
-            },
-            scripts: {
-                files: ['js/*.js', '!js/*.min.js'],
-                tasks: ['uglify'],
-                options: {
-                  spawn: false
-                }
-            }
-        },
-
-        // compile set less files
-        less: {
-            development: {
-                options: {
-                    paths: ["less"],
-                    sourceMap: true,
-                    sourceMapFilename: 'css/site.css.map',
-                    sourceMapURL: 'css/site.css.map',
-                    compress: true
-                },
-                files: {
-                    "css/site.css": ["less/*.less", "!less/_*.less"]
-                }
-            }
-        },
-
-        // Minify Javascript
-        uglify: {
-            my_target: {
-              files: {
-                'js/site.min.js': ['js/*.js', '!js/*.min.js']
-              }
-            }
-        }
-
-    });
-
-    // Load tasks so we can use them
-    grunt.loadNpmTasks("grunt-contrib-watch");
-    grunt.loadNpmTasks("grunt-contrib-less");
-    grunt.loadNpmTasks('grunt-browser-sync');
-    grunt.loadNpmTasks('grunt-contrib-uglify');
+			options: {
+				watchTask: true,
+	            proxy: "base-scss.dev"
+	        }
+		},
+		// watch changes to SASS and JS files
+		watch: {
+			styles: {
+				files: ['scss/**/*'],
+				tasks: ['sass', 'autoprefixer'],
+				options: {
+				   spawn: false
+				}
+			},
+			scripts: {
+				files: ['js/**/*.js'],
+				tasks: ['browserify', 'uglify'],
+				options: {
+				  spawn: false
+				}
+			}
+		},
 
+		sass: {
+			options: {
+				sourceMap: true,
+				sourceMapFilename: 'css/site.min.css.map',
+                sourceMapURL: 'main.min.css.map',
+				outputStyle: 'compressed'
+			},
+			dist: {
+				files: {
+					'css/main.min.css': 'scss/base.scss'
+				}
+			}
+		},
+		autoprefixer: {
+			options: {
+				browsers: ['last 2 versions', 'ie 8', 'ie 9'],
+				map: true
+			},
+			dist: {
+				files: {
+					'css/main.min.css': 'css/main.min.css'
+				}
+			}
+		},
+		browserify: {
+			dist: {
+				options: {
+					browserifyOptions: {
+						debug: true
+					},
+					transform: [
+						["babelify"]
+					]
+				},
+				files: {
+				   "js/site.min.js": ["js/main.js"]
+				}
+			}
+		},
+		uglify: {
+			dist: {
+				files: {
+					'js/site.min.js': ['js/site.min.js']
+				}
+			}
+		}
 
-    // the default task will show the usage
-    grunt.registerTask("default", "Prints usage", function () {
-        grunt.log.writeln("");
-        grunt.log.writeln("Building Base");
-        grunt.log.writeln("------------------------");
-        grunt.log.writeln("");
-        grunt.log.writeln("* run 'grunt --help' to get an overview of all commands.");
-        grunt.log.writeln("* run 'grunt dev' to start watching and compiling LESS changes for development.");
-    });
+	});
 
-    grunt.registerTask("dev", ["less", "uglify", "browserSync", "watch"]);
+	grunt.registerTask("default", "Prints usage", function () {
+		grunt.log.writeln("");
+		grunt.log.writeln("Building Base");
+		grunt.log.writeln("------------------------");
+		grunt.log.writeln("");
+		grunt.log.writeln("* run 'grunt --help' to get an overview of all commands.");
+		grunt.log.writeln("* run 'grunt dev' to start watching and compiling SASS and JS changes for development.");
+	});
 
-};
+	grunt.registerTask('dev', ['sass', 'autoprefixer', 'browserSync', 'watch']);
+	grunt.registerTask('prod', ['sass', 'autoprefixer', 'browserify', 'uglify']);
+}

README.md

@@ -1,4 +1,4 @@
-[Base 1.0.2](http://base.gs/)
+[Base 2.0.0](http://base.gs/)
 ======
 
 **Base is a semantic, lightweight and extensible framework to power the next generation of responsive websites.**
@@ -16,34 +16,11 @@ Getting started building websites with Base is easy. You can:
 
 When you download Base you'll see a boilerplate `index.html` file and a folder structure like this:
 
-```
-| js/
-    vendor/
-      jquery-1.10.2.min.js
-      modernizr-2.6.2.min.js
-| less/
-    _buttons.less
-    _forms.less
-    _layout.less
-    _mixins.less
-    _menus.less
-    _reset.less
-    _type.less
-    _variables.less
-    base.less (compiles)
-    desktop.less (compiles)
-    mobile.less (compiles)
-    tablet.less (compiles)
-```
-
 **To note:**
-* Files prefixed with ‘_’ do not directly compile.
-* The latest versions of jQuery and Modernizr are included for convenience.
-* Base supports all major modern browsers and IE7+.
 
-## Compiling LESS
+## Compiling SASS
 
-Base requires a [LESS CSS](http://lesscss.org/) compiler to work its magic. This can be done with [Grunt](http://gruntjs.com/) *(instructions below)* or one of these third-party GUI tools:
+This can be done with [Grunt](http://gruntjs.com/) *(instructions below)* or one of these third-party GUI tools:
 
 * [Codekit (OS X)](http://incident57.com/codekit/)
 * [Simpleless (Windows & OS X)](http://wearekiss.com/simpless)