diff --git a/.gitignore b/.gitignore
index f556b6b..4e8faff 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,2 @@
-node_modules/
-css/
-images/me.jpeg
-index.html
-jade/
-script/
-less/main.less
+.sass-cache
+node_modules
diff --git a/Gruntfile.js b/Gruntfile.js
index 11a771f..0dd3b7c 100644
--- a/Gruntfile.js
+++ b/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']);
-
-};
\ No newline at end of file
+ grunt.registerTask('default', ['clean', 'less']);
+ grunt.registerTask('compile:sass', ['clean', 'sass']);
+};
diff --git a/README.md b/README.md
index 86234d2..76beff2 100644
--- a/README.md
+++ b/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
[](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)
-
diff --git a/demo/css/main.css b/demo/css/main.css
new file mode 100644
index 0000000..4587b63
--- /dev/null
+++ b/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);
+}
diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..6616fc2
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,50 @@
+
+
+
+
+ CSS Loader
+
+
+
+
+
+
+
+
+
Loading...
+
<![CDATA[<div class="load1">]]>
+
+
+
Loading...
+
<![CDATA[<div class="load2">]]>
+
+
+
Loading...
+
<![CDATA[<div class="load3">]]>
+
+
+
Loading...
+
<![CDATA[<div class="load4">]]>
+
+
+
Loading...
+
<![CDATA[<div class="load5">]]>
+
+
+
Loading...
+
<![CDATA[<div class="load6">]]>
+
+
+
Loading...
+
<![CDATA[<div class="load7">]]>
+
+
+
Loading...
+
<![CDATA[<div class="load8">]]>
+
+