Add the header to the files

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,30 +108,34 @@ The CSS provides colors for the background and text
 
 `example.html`
 
- <link href='palette.css' rel='stylesheet' type='text/css'>
- ...
+```html
+<link href='palette.css' rel='stylesheet' type='text/css'>
+...
 
- <div class="palette-Light-Blue-700 bg">
-   The background is Light Blue
- </div>
+<div class="palette-Light-Blue-700 bg">
+ The background is Light Blue
+</div>
 
- <div class="palette-Light-Blue-700 text">
-  The text is Light Blue
- </div>
+<div class="palette-Light-Blue-700 text">
+ The text is Light Blue
+</div>
+```
 
 ### JS
 
 You can import the [palette.js](http://danlevan.github.io/google-material-color/dist/palette.js) file in Node.js, and AMD module or the browser.
 
 `example.html`
 
- <script src='../dist/palette.js'></script>
- ...
+```javascript
+<script src='../dist/palette.js'></script>
+...
 
- <script>
-  document.getElementById('my-div')
-  .style['background-color'] = palette.get('Light Blue', '700');
- </script>
+<script>
+ document.getElementById('my-div')
+ .style['background-color'] = palette.get('Light Blue', '700');
+</script>
+```
 
 
 ## Issues

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 <danlevan@gmail.com>"
+ "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": {
- }
-}
+ ]
+}

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;
 }

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);

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;

dist/palette.scss

@@ -1,3 +1,7 @@
+/**
+ * google-material-color v0.0.2
+ * https://github.com/danlevan/google-material-color
+ */
 $palette: (
  Red: (
  50: #fde0dc,

dist/palette.styl

@@ -1,3 +1,7 @@
+/**
+ * google-material-color v0.0.2
+ * https://github.com/danlevan/google-material-color
+ */
 $palette = {
  'Red': {
  '50': #fde0dc,

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

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",

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;
 }

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;
 }