sass support

.gitignore

@@ -1,7 +1,2 @@
-node_modules/
-css/
-images/me.jpeg
-index.html
-jade/
-script/
-less/main.less
+.sass-cache
+node_modules

Gruntfile.js

@@ -3,38 +3,55 @@ module.exports = function(grunt) {
   // Project configuration.
   grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
-    jade: {
-      compile: {
-          files: [{
-              expand: true,
-              cwd: 'jade/',
-              src: ['**/*.jade'],
-              dest: '',
-              ext: '.html'
-          }]
-      }
+    // clean
+    clean: {
+      dir: ['./src/css', './dist']
     },
+    // less
     less: {
-      src: {
-        expand: true,
-        cwd: 'less/',
-        src: ['**/*.less'],
-        dest: 'css/',
-        ext: '.css'
+      development: {
+        options: {
+          sourceMap: true
+        },
+        files: {
+          './src/css/css-loaders.css': './src/less/main.less',
+        }
+      },
+      production: {
+        options: {
+          compress: true,
+          sourceMap: true
+        },
+        files: {
+          './dist/css-loaders.min.css': './src/less/main.less',
+        }
       }
     },
-    watch: {
-      files: ['less/**/*.less','jade/**/*.jade'],
-      tasks: ['default']
+    // sass
+    sass: {
+      development: {
+        options: {
+          style: 'expanded'
+        },
+        files: {
+          './src/css/css-loaders.css': './src/sass/main.scss'
+        }
+      },
+      production: {
+        options: {
+          style: 'compressed'
+        },
+        files: {
+          './dist/css-loaders.min.css': './src/sass/main.scss'
+        }
+      }
     }
   });
 
-  grunt.loadNpmTasks('grunt-contrib-jade');
-
   grunt.loadNpmTasks('grunt-contrib-less');
+  grunt.loadNpmTasks('grunt-contrib-sass');
+  grunt.loadNpmTasks('grunt-contrib-clean');
 
-  grunt.loadNpmTasks('grunt-contrib-watch');
-
-  grunt.registerTask('default', ['less','jade','watch']);
-
-};
+  grunt.registerTask('default', ['clean', 'less']);
+  grunt.registerTask('compile:sass', ['clean', 'sass']);
+};

README.md

@@ -11,6 +11,38 @@ A strict limit of one element per loader (not including pseudo-elements) was pla
 
 Each loader is given a font size in pixels and all other sizes are in ems so to change the size of a loader, just adjust the font-size.
 
+## Use it in your project
+
+If you want to include the `CSS loaders` immediately inside your project, just grab the minified css version inside the `dist` folder. Otherwise you can also use the `less` or `sass` version present inside `src/less` or `src/sass`.
+
+A demo version using the `CSS loaders` is also present under the `demo` folder so you can have a look at the html code.
+
+## Develop
+
+This project uses `npm` and `Grunt`. If you want to compile the source code and generating new `sass` or `less` version of the library, first clone this repository on your local machine with:
+
+    git clone https://github.com/lukehaas/css-loaders.git
+
+Then, make sure to install all the dependencies running:
+
+    npm install
+
+Install Grunt globally if you don't have that already with:
+
+    npm install -g grunt-cli
+
+Now you can compile your own version of the library running:
+
+    grunt
+
+For compiling the `less` version of the library into the `dist` folder
+
+or
+
+    grunt compile:sass
+
+For compiling the `sass` version of the library into the `dist` folder
+
 ## Demo
 
 [![css-loaders-screenshot](https://raw.githubusercontent.com/lukehaas/css-loaders/step2/images/css-loaders-screenshot.jpg)](http://projects.lukehaas.me/css-loaders)
@@ -38,4 +70,3 @@ For detailed changelog, check [Releases](https://github.com/lukehaas/css-loaders
 ## License
 
 [MIT License](https://github.com/lukehaas/css-loaders/blob/step2/LICENSE)
-

demo/css/main.css

@@ -0,0 +1,39 @@
+body {
+  background-color: #0dc5c1;
+}
+
+h1 {
+  color: #eee;
+  font-size: 42px;
+  padding: 20px 0;
+  margin: 10px 0 30px;
+  font-family: sans-serif;
+  font-weight: 100;
+}
+
+.inner {
+  max-width: 940px;
+  margin: 0 auto;
+  overflow: auto;
+}
+
+.load-container {
+  height: 270px;
+  width: 25%;
+  min-width: 230px;
+  float: left;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+xmp {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  margin: 0 0 10px 0;
+  padding: 0;
+  text-align: center;
+  color: rgba(0, 0, 0, 0.6);
+}

demo/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Loader</title>
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="../dist/css-loaders.min.css">
+  </head>
+  <body>
+    <header>
+      <div class="inner"><h1>Single Element CSS Spinners</h1></div>
+    </header>
+    <main>
+      <div class="inner">
+        <div class="load-container load1">
+          <div class="loader">Loading...</div>
+          <xmp><div class="load1"></xmp>
+        </div>
+        <div class="load-container load2">
+          <div class="loader">Loading...</div>
+          <xmp><div class="load2"></xmp>
+        </div>
+        <div class="load-container load3">
+          <div class="loader">Loading...</div>
+          <xmp><div class="load3"></xmp>
+        </div>
+        <div class="load-container load4">
+          <div class="loader">Loading...</div>
+          <xmp><div class="load4"></xmp>
+        </div>
+        <div class="load-container load5">
+          <div class="loader">Loading...</div>
+          <xmp><div class="load5"></xmp>
+        </div>
+        <div class="load-container load6">
+          <div class="loader">Loading...</div>
+          <xmp><div class="load6"></xmp>
+        </div>
+        <div class="load-container load7">
+          <div class="loader">Loading...</div>
+          <xmp><div class="load7"></xmp>
+        </div>
+        <div class="load-container load8">
+          <div class="loader">Loading...</div>
+          <xmp><div class="load8"></xmp>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>

package.json

@@ -1,17 +1,21 @@
 {
   "name": "css-loaders",
   "version": "0.1.0",
-  "description": "",
+  "description": "Single Element CSS Spinners",
   "main": "Gruntfile.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lukehaas/css-loaders.git"
+  },
   "author": "Luke Haas",
-  "license": "BSD",
+  "license": "MIT",
   "devDependencies": {
     "grunt": "~0.4.4",
-    "grunt-contrib-jade": "~0.11.0",
+    "grunt-contrib-clean": "^0.7.0",
     "grunt-contrib-less": "^0.11.0",
-    "grunt-contrib-watch": "^0.6.1"
+    "grunt-contrib-sass": "^0.9.2"
   }
 }