colors.css - npm Package Compare versions

Comparing version 1.0.0 to 2.0.1

gulpfile.js

@@ -6,5 +6,2 @@ // Load plugins
     watch = require('gulp-watch'),
-    lr    = require('tiny-lr'),
-    server = lr(),
-    livereload = require('gulp-livereload'),
     prefix = require('gulp-autoprefixer'),
@@ -15,14 +12,9 @@ minifyCSS = require('gulp-minify-css'),
     stylus = require('gulp-stylus'),
-    csslint = require('gulp-csslint');
+    rename = require('gulp-rename'),
+    size = require('gulp-size'),
+    csslint = require('gulp-csslint')
+    browserSync = require('browser-sync'),
+    browserReload = browserSync.reload;
 
 
-// Task to minify all css files in the css directory
-
-gulp.task('minify', function(){
-  gulp.src('./css/*.css')
-    .pipe(minifyCSS({keepSpecialComments: 0}))
-    .pipe(gulp.dest('./css/'));
-});
-
-
 // Use csslint without box-sizing or compatible vendor prefixes (these
@@ -42,13 +34,23 @@ // don't seem to be kept up to date on what to yell about)
 // Task that compiles scss files down to good old css
-
 gulp.task('sass', function(){
-  gulp.src('./sass/*.scss')
+  gulp.src('./sass/colors.scss')
       .pipe(watch(function(files) {
-        return files.pipe(sass({includePaths: ['./sass/']}))
+        return files.pipe(sass())
           .pipe(prefix())
-          .pipe(gulp.dest('./css/'))
-          .pipe(livereload(server));
+          .pipe(size({gzip: true, showFiles: true, title:'unminified colors.css'}))
+          .pipe(gulp.dest('css'))
+          .pipe(browserSync.reload({stream:true}));
       }));
 });
 
+// Task to minify colors.css then rename as colors.min.css
+
+gulp.task('minify', function(){
+  gulp.src('./css/colors.css')
+    .pipe(minifyCSS())
+    .pipe(size({gzip: true, showFiles: true, title:'minified colors.css'}))
+    .pipe(rename('colors.min.css'))
+    .pipe(gulp.dest('./css/'));
+});
+
 // Task that compiles css using the myth processor
@@ -58,5 +60,7 @@
   gulp.src('./myth/*.css')
-      .pipe(myth())
+    .pipe(watch(function(files) {
+      return files.pipe(myth())
       .pipe(prefix())
       .pipe(gulp.dest('./css/'));
+    }));
 });
@@ -78,7 +82,20 @@
         .pipe(prefix())
-        .pipe(gulp.dest('./css/'))
-        .pipe(livereload(server));
+        .pipe(gulp.dest('./css/'));
       }));
 });
 
+// Initialize browser-sync which starts a static server also allows for 
+// browsers to reload on filesave
+gulp.task('browser-sync', function() {
+    browserSync.init(null, {
+        server: {
+            baseDir: "./"
+        }
+    });
+});
+
+gulp.task('bs-reload', function () {
+    browserSync.reload();
+});
+
 /*
@@ -96,8 +113,6 @@ DEFAULT TASK
 gulp.task('default', function(){
-  server.listen(35729, function (err) {
-    gulp.watch(['./sass/*.scss'], function(event) {
+    gulp.watch(['./sass/colors.scss'], function(event) {
       gulp.run('sass', 'lint');
     });
-  });
 });
 

js/colors.js

@@ -19,2 +19,9 @@ var colors = {
 	silver: "#ddd"
-};
+};
+
+if(
+	typeof modules !== "undefined" &&
+	typeof modules.exports !== "undefined"
+){
+	modules.exports = colors;
+}

package.json

 {
   "name": "colors.css",
-  "version": "1.0.0",
+  "version": "2.0.1",
+  "main": "js/colors.js",
   "homepage": "http://clrs.cc",
@@ -18,22 +19,22 @@ "description": "Better colors for the web. A collection of skin classes for faster prototyping and nicer looking sites.",
   "devDependencies": {
-    "gulp": "~3.5.5",
-    "gulp-livereload": "~0.2.0",
-    "gulp-minify-css": "~0.2.0",
-    "tiny-lr": "0.0.5",
-    "gulp-util": "~2.2.12",
-    "gulp-watch": "~0.5.0",
+    "browser-sync": "^1.1.2",
+    "gulp": "~3.8.2",
+    "gulp-autoprefixer": "0.0.7",
     "gulp-csslint": "~0.1.3",
-    "gulp-sass": "~0.4.1",
+    "gulp-minify-css": "~0.3.5",
+    "gulp-myth": "~0.1.1",
+    "gulp-rename": "^1.2.0",
+    "gulp-sass": "~0.7.2",
+    "gulp-size": "^0.4.0",
     "gulp-stylus": "0.0.11",
-    "gulp-myth": "~0.1.1",
-    "gulp-autoprefixer": "0.0.5"
+    "gulp-util": "~2.2.12",
+    "gulp-watch": "~0.6.8"
   },
-  "repository" :
-    {
-      "type" : "git",
-      "url" : "http://github.com/mrmrs/colors.git"
+  "repository": {
+    "type": "git",
+    "url": "http://github.com/mrmrs/colors.git"
   },
   "bugs": {
-    "url" : "http://github.com/mrmrs/colors/issues",
-    "email" : "[e-mail]"
+    "url": "http://github.com/mrmrs/colors/issues",
+    "email": "[e-mail]"
   },
@@ -46,9 +47,31 @@ "author": {
   "contributors": [
-    { "name": "@mrmrs", "email": "[e-mail]" },
-    { "name": "@ilanbiala"},
-    { "name": "@kdrdgn", "email": "[e-mail]", "url": "http://www.twitter.com/kdrdgn" },
-    { "name": "@tenmilestereo", "url": "http://www.lewiscowper.com" },
-    { "name": "@nschonni", "email": "[e-mail]", "url": "http://wet-boew.github.io/" },
-    { "name": "SiR-DanieL" },
-    { "name": "@enyo", "email": "[e-mail]", "url": "http://colorglare.com" }
+    {
+      "name": "@mrmrs",
+      "email": "[e-mail]"
+    },
+    {
+      "name": "@ilanbiala"
+    },
+    {
+      "name": "@kdrdgn",
+      "email": "[e-mail]",
+      "url": "http://www.twitter.com/kdrdgn"
+    },
+    {
+      "name": "@tenmilestereo",
+      "url": "http://www.lewiscowper.com"
+    },
+    {
+      "name": "@nschonni",
+      "email": "[e-mail]",
+      "url": "http://wet-boew.github.io/"
+    },
+    {
+      "name": "SiR-DanieL"
+    },
+    {
+      "name": "@enyo",
+      "email": "[e-mail]",
+      "url": "http://colorglare.com"
+    }
   ],
@@ -58,3 +81,3 @@ "engines": {
   },
-  "license" : "MIT"
+  "license": "MIT"
 }

README.md

@@ -10,4 +10,18 @@ # COLORS
 A simple color palette for the web. Let's be honest, out of the box, the color strings that css provides aren't... the tops.
-This is a set of sass/less/stylus/css variables and css classes that can help fix that.
+This is a set of sass/less/stylus/css variables and css classes that can help fix that with just 647B of minified and gzipped css.
 
+(Uncompressed is just 888B)
+
+colors.css provides utilities to apply backgrounds, text-color, border colors for both html and svg elements. 
+
+# Example
+
+```scss
+.blue {         color: $blue; }
+.bg-blue {      background-color: $blue; }
+.border--blue { border-color: $blue; }
+.fill-blue {    fill: $blue; }
+.stroke-blue {  stroke: $blue; }
+```
+
 ## Install colors.css
@@ -17,12 +31,15 @@
 
-* Download a zip from this page
-* Clone / fork the repo through git
+Download a zip from this page
+
+Clone / fork the repo through git
 ```bash
 git clone [e-mail]:mrmrs/colors.git
 ```
-* Install through npm
+
+Install [through npm](https://www.npmjs.org/package/colors.css)
 ```bash
-npm install colors.css
+npm install --save-dev colors.css
 ```
-* Install the ruby gem
+
+Install the [ruby gem](http://rubygems.org/gems/clrs)
 ```
@@ -32,4 +49,2 @@ gem install clrs
 
-
-
 ### Using the css
@@ -82,3 +97,3 @@ Simply copy colors.css to your css directory and include the file like so in the head of your html document
 
-If you would like to minify ./css/colors.css you can just run
+If you would like to minify ./css/colors.css to .css/colors.min.css you can just run
 ```bash
@@ -91,6 +106,2 @@ gulp minify
 
-If you are compiling less and want to run autoprefixer - you can run that on compiled css with
-```
-```
-
 ## Directory structure
@@ -112,3 +123,2 @@ ```
           ├── less
-          │   ├── _links.less
           │   ├── _skins.less
@@ -121,3 +131,2 @@ │   ├── _variables.less
           ├── sass
-          │   ├── _links.scss
           │   ├── _skins.scss
@@ -129,3 +138,2 @@ │   ├── _variables.scss
               ├── colors.styl
-              ├── links.styl
               ├── skins.styl
@@ -132,0 +140,0 @@ └── variables.styl

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 5 instances in 1 package

Improved metrics

Lines of code

451

increased by53.4%

Number of lines in readme file

164

increased by5.13%

Number of medium supply chain risk alerts

1

decreased by-80%

Worsened metrics

Total package byte prevSize

38121

decreased by-59.22%

Dev dependency count

12

increased by9.09%

Number of package files

22

decreased by-21.43%

No dependency changes