diff --git a/README.md b/README.md
index 8449f8a..c07b519 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@ Details can be found on the [google design specs website](http://www.google.com/
> 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, A100, A200, A400, A700
-## Getting started
+## Usage
### Stylus
@@ -43,12 +43,14 @@ Import [palette.styl](http://danlevan.github.io/google-material-color/dist/palet
`example.styl`
- @import 'palette'
- ...
+```stylus
+@import 'palette'
+...
- .my-div
- background-color palette('Light Blue', '700')
- color palette('Red') // default shade is 500
+.my-div
+ background-color palette('Light Blue', '700')
+ color palette('Red') // default shade is 500
+```
> If you need direct access to the variables, you can access it like `$palette['Light Blue']['500']`
@@ -60,13 +62,15 @@ Import [palette.scss](http://danlevan.github.io/google-material-color/dist/palet
`example.scss`
- @import 'palette';
- ...
+```scss
+@import 'palette';
+...
- .my-div {
- background-color: palette(Light Blue, 700);
- color: palette(Red); // default shade is 500
- }
+.my-div {
+ background-color: palette(Light Blue, 700);
+ color: palette(Red); // default shade is 500
+}
+```
> If you need direct access to the variables, you can access it through a map like `$colorMap: map-get($palette, Light Blue); $color: map-get($colorMap, 700);`.
@@ -78,16 +82,18 @@ Import [palette.less](http://danlevan.github.io/google-material-color/dist/palet
`example.scss`
- @import 'palette';
- ...
+```less
+@import 'palette';
+...
- .my-div {
- .palette('Light Blue', '700');
- background-color: @palette;
+.my-div {
+ .palette('Light Blue', '700');
+ background-color: @palette;
- .palette('Red'); // default shade is 500
- color: @palette;
- }
+ .palette('Red'); // default shade is 500
+ color: @palette;
+}
+```
If you need access to the variables, you can access it through variablec like `@palette-Light-Blue-500`
@@ -102,16 +108,18 @@ The CSS provides colors for the background and text
`example.html`
-
- ...
+```html
+
+...
-
- The background is Light Blue
-
+
+ The background is Light Blue
+
-
- The text is Light Blue
-
+
+ The text is Light Blue
+
+```
### JS
@@ -119,13 +127,15 @@ You can import the [palette.js](http://danlevan.github.io/google-material-color/
`example.html`
-
- ...
+```javascript
+
+...
-
+
+```
## Issues
diff --git a/bower.json b/bower.json
index 0b95477..d5b5417 100644
--- a/bower.json
+++ b/bower.json
@@ -1,14 +1,19 @@
{
"name": "google-material-color",
- "version": "0.0.1",
+ "version": "0.0.2",
+ "description": "Google material color (http://www.google.com/design/spec/style/color.html) implementation for Sass, Less, Stylus, CSS and JS.",
"homepage": "https://github.com/danlevan/google-material-color",
"authors": [
- "Dan Le Van "
+ "Dan Le Van"
],
- "description": "Google material color (http://www.google.com/design/spec/style/color.html) implementation for Sass, Less, Stylus, CSS and JS.",
"main": "dist",
+ "moduleType": [
+ "amd",
+ "node"
+ ],
"keywords": [
"google",
+ "material",
"color",
"sass",
"less",
@@ -22,7 +27,5 @@
"bower_components",
"test",
"tests"
- ],
- "dependencies": {
- }
-}
+ ]
+}
\ No newline at end of file
diff --git a/dist/palette.css b/dist/palette.css
index 0b6ffc1..15c31a0 100644
--- a/dist/palette.css
+++ b/dist/palette.css
@@ -1,3 +1,7 @@
+/**
+ * google-material-color v0.0.2
+ * https://github.com/danlevan/google-material-color
+ */
.palette-Red.bg {
background-color: #e51c23;
}
diff --git a/dist/palette.js b/dist/palette.js
index aa314d8..97d2776 100644
--- a/dist/palette.js
+++ b/dist/palette.js
@@ -1,3 +1,7 @@
+/**
+ * google-material-color v0.0.2
+ * https://github.com/danlevan/google-material-color
+ */
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
define([], factory);
diff --git a/dist/palette.less b/dist/palette.less
index 19979d1..d3f1a57 100644
--- a/dist/palette.less
+++ b/dist/palette.less
@@ -1,3 +1,7 @@
+/**
+ * google-material-color v0.0.2
+ * https://github.com/danlevan/google-material-color
+ */
@palette-Red-50: #fde0dc;
@palette-Red-100: #f9bdbb;
@palette-Red-200: #f69988;
diff --git a/dist/palette.scss b/dist/palette.scss
index 863c5fc..aed431b 100644
--- a/dist/palette.scss
+++ b/dist/palette.scss
@@ -1,3 +1,7 @@
+/**
+ * google-material-color v0.0.2
+ * https://github.com/danlevan/google-material-color
+ */
$palette: (
Red: (
50: #fde0dc,
diff --git a/dist/palette.styl b/dist/palette.styl
index de47014..9b2dc50 100644
--- a/dist/palette.styl
+++ b/dist/palette.styl
@@ -1,3 +1,7 @@
+/**
+ * google-material-color v0.0.2
+ * https://github.com/danlevan/google-material-color
+ */
$palette = {
'Red': {
'50': #fde0dc,
diff --git a/gulpfile.js b/gulpfile.js
index 8cc6a8b..127587b 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -3,12 +3,16 @@ var clean = require('gulp-clean');
var colors = require('./src/colors');
var compass = require('gulp-compass')
var gulp = require('gulp');
+var header = require('gulp-header');
var less = require('gulp-less');
var path = require('path');
+var packageConfig = require('./package.json');
var rename = require('gulp-rename');
var sass = require('gulp-ruby-sass');
var stylus = require('gulp-stylus');
+var sync = require('gulp-config-sync');
var template = require('gulp-template');
+var util = require('util');
var paths = {
destination: 'dist',
@@ -21,10 +25,16 @@ var paths = {
js: 'palette.js',
};
+var banner = '' +
+ '/**\n' +
+ ' * <%= name %> v<%= version %>\n' +
+ ' * <%= homepage %>\n' +
+ ' */\n';
+
/**
* Generates all the plugins
*/
-gulp.task('default', ['clean-dist', 'stylus', 'sass', 'less', 'css', 'js']);
+gulp.task('default', ['sync', 'clean-dist', 'stylus', 'sass', 'less', 'css', 'js']);
/**
* Generates the test files: compile lib to css
@@ -42,6 +52,7 @@ gulp.task('css', function() {
return gulp.src('src/templates/css')
.pipe(template({ colors: colors, }))
.pipe(rename(paths.css))
+ .pipe(header(banner, packageConfig))
.pipe(gulp.dest(paths.destination));
});
@@ -50,12 +61,13 @@ gulp.task('css', function() {
////////////////////////////////////////////////////////////////////////////////
/**
- * Generates the json files
+ * Generates the js files
*/
gulp.task('js', function() {
return gulp.src('src/templates/js')
.pipe(template({ colors: colors, }))
.pipe(rename(paths.js))
+ .pipe(header(banner, packageConfig))
.pipe(gulp.dest(paths.destination));
});
@@ -70,6 +82,7 @@ gulp.task('stylus', function() {
return gulp.src('src/templates/stylus')
.pipe(template({ colors: colors, }))
.pipe(rename(paths.stylus))
+ .pipe(header(banner, packageConfig))
.pipe(gulp.dest(paths.destination));
});
@@ -98,6 +111,7 @@ gulp.task('sass', function() {
return gulp.src('src/templates/scss')
.pipe(template({ colors: colors, }))
.pipe(rename(paths.sass))
+ .pipe(header(banner, packageConfig))
.pipe(gulp.dest(paths.destination));
});
@@ -107,6 +121,7 @@ gulp.task('sass', function() {
gulp.task('test-sass', ['sass', 'test-sass-template'], function() {
gulp.src(path.join(paths.test, '*.scss'))
.pipe(compass({
+ css: paths.test,
sass: paths.test,
import_path: paths.destination,
}))
@@ -134,6 +149,7 @@ gulp.task('less', function() {
return gulp.src('src/templates/less')
.pipe(template({ colors: colors, }))
.pipe(rename(paths.less))
+ .pipe(header(banner, packageConfig))
.pipe(gulp.dest(paths.destination));
});
@@ -196,6 +212,19 @@ gulp.task('clean-test', function() {
.pipe(clean());
});
+////////////////////////////////////////////////////////////////////////////////
+// VERSIONING
+////////////////////////////////////////////////////////////////////////////////
+
+gulp.task('sync', function() {
+ return gulp.src('bower.json')
+ .pipe(sync())
+ .pipe(gulp.dest('.'));
+});
+
+////////////////////////////////////////////////////////////////////////////////
+// CLEAN
+////////////////////////////////////////////////////////////////////////////////
/**
* Watch dev
diff --git a/package.json b/package.json
index 78bcf26..0ad155b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "google-material-color",
- "version": "0.0.1",
+ "version": "0.0.2",
"description": "Google material color (http://www.google.com/design/spec/style/color.html) implementation for Sass, Less, Stylus, CSS and JS.",
"main": "src/index.js",
"scripts": {
@@ -12,13 +12,14 @@
},
"keywords": [
"google",
+ "material",
"color",
"sass",
"less",
"stylus",
"css"
],
- "author": "color",
+ "author": "Dan Le Van",
"license": "MIT",
"bugs": {
"url": "https://github.com/danlevan/google-material-color/issues"
@@ -28,6 +29,8 @@
"gulp": "^3.8.10",
"gulp-clean": "^0.3.1",
"gulp-compass": "^2.0.1",
+ "gulp-config-sync": "0.0.1",
+ "gulp-header": "^1.2.2",
"gulp-less": "^1.3.6",
"gulp-rename": "^1.2.0",
"gulp-stylus": "^1.3.4",
diff --git a/test/less.css b/test/less.css
index 2465e42..c9b02b2 100644
--- a/test/less.css
+++ b/test/less.css
@@ -1,3 +1,7 @@
+/**
+ * google-material-color v0.0.2
+ * https://github.com/danlevan/google-material-color
+ */
.less.Red {
background-color: #e51c23;
}
diff --git a/test/sass.css b/test/sass.css
index dd8e68c..7ca05a7 100644
--- a/test/sass.css
+++ b/test/sass.css
@@ -1,3 +1,7 @@
+/**
+ * google-material-color v0.0.2
+ * https://github.com/danlevan/google-material-color
+ */
.sass.Red {
background-color: #e51c23;
}