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