http://www.g-r-a-y-s-c-a-l-e.com
Try out different grays while prototyping with the switch of a variable.
You can install via bower:
$ bower install --save grayscale
Or, you can install via npm:
$ npm install --save gray
Or, you can clone the source:
$ git clone https://github.com/johnotander/gray.git
Gray integrates with rework, requiring only the rework-npm and rework-vars plugins:
It provides an index.css file, so you can do the following (assuming the gray npm module is installed).
@import "gray";
/* ... */
var gulp = require('gulp'),
rework = require('gulp-rework'),
reworkVars = require('gulp-rework-vars'),
reworkNPM = require('rework-npm');
gulp.task('css', function() {
return gulp.src('your-css-file.css')
.pipe(rework(reworkNPM(), reworkVars()))
.pipe(gulp.dest('dist'));
});
In your Scss file, you can import furtive:
@import "/path/to/gray/scss/all"; // For rgba variables.
@import "/path/to/gray/scss/all-hex"; // For hex variables.
Or, if you like, you can just import the variables, they're located in the
scss directory, like so:
@import "/path/to/gray/scss/variables";
Furtive provides four CSS files: gray.css, gray-hex.css, and their minified versions. In
order to use one, you can add a <link> in your <head>.
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<link rel="stylesheet" href="/path/to/gray/css/gray.min.css">
<!-- ... -->
</head>
<body>
<!-- ... -->
</body>
</html>
Detailed color examples available at http://www.g-r-a-y-s-c-a-l-e.com.
If using SCSS, you know have access to the following variables:
$gray-light-0: #a0a0a0 !default;
$gray-light-1: #a8a8a8 !default;
$gray-light-2: #b0b0b0 !default;
$gray-light-3: #b8b8b8 !default;
$gray-light-4: #c0c0c0 !default;
$gray-light-5: #d8d8d8 !default;
$gray-light-6: #e0e0e0 !default;
$gray-light-7: #e8e8e8 !default;
$gray-light-8: #fafafa !default;
$gray-light-9: #fff !default;
$gray-mid-0: #606060 !default;
$gray-mid-1: #666 !default;
$gray-mid-2: #707070 !default;
$gray-mid-3: #777 !default;
$gray-mid-4: #808080 !default;
$gray-mid-5: #888 !default;
$gray-mid-6: #909090 !default;
$gray-mid-7: #999 !default;
$gray-mid-8: #a0a0a0 !default;
$gray-mid-9: #a8a8a8 !default;
$gray-dark-0: #080808 !default;
$gray-dark-1: #101010 !default;
$gray-dark-2: #1a1a1a !default;
$gray-dark-3: #202020 !default;
$gray-dark-4: #222 !default;
$gray-dark-5: #282828 !default;
$gray-dark-6: #333 !default;
$gray-dark-7: #383838 !default;
$gray-dark-8: #444 !default;
$gray-dark-9: #484848 !default;
The utility classes for backround color:
.bg-gray-light-0 { background-color: $gray-light-0; }
.bg-gray-light-1 { background-color: $gray-light-1; }
.bg-gray-light-2 { background-color: $gray-light-2; }
.bg-gray-light-3 { background-color: $gray-light-3; }
.bg-gray-light-4 { background-color: $gray-light-4; }
.bg-gray-light-5 { background-color: $gray-light-5; }
.bg-gray-light-6 { background-color: $gray-light-6; }
.bg-gray-light-7 { background-color: $gray-light-7; }
.bg-gray-light-8 { background-color: $gray-light-8; }
.bg-gray-light-9 { background-color: $gray-light-9; }
.bg-gray-mid-0 { background-color: $gray-mid-0; }
.bg-gray-mid-1 { background-color: $gray-mid-1; }
.bg-gray-mid-2 { background-color: $gray-mid-2; }
.bg-gray-mid-3 { background-color: $gray-mid-3; }
.bg-gray-mid-4 { background-color: $gray-mid-4; }
.bg-gray-mid-5 { background-color: $gray-mid-5; }
.bg-gray-mid-6 { background-color: $gray-mid-6; }
.bg-gray-mid-7 { background-color: $gray-mid-7; }
.bg-gray-mid-8 { background-color: $gray-mid-8; }
.bg-gray-mid-9 { background-color: $gray-mid-9; }
.bg-gray-dark-0 { background-color: $gray-dark-0; }
.bg-gray-dark-1 { background-color: $gray-dark-1; }
.bg-gray-dark-2 { background-color: $gray-dark-2; }
.bg-gray-dark-3 { background-color: $gray-dark-3; }
.bg-gray-dark-4 { background-color: $gray-dark-4; }
.bg-gray-dark-5 { background-color: $gray-dark-5; }
.bg-gray-dark-6 { background-color: $gray-dark-6; }
.bg-gray-dark-7 { background-color: $gray-dark-7; }
.bg-gray-dark-8 { background-color: $gray-dark-8; }
.bg-gray-dark-9 { background-color: $gray-dark-9; }
The utility classes for text color:
.gray-light-0 { color: $gray-light-0; }
.gray-light-1 { color: $gray-light-1; }
.gray-light-2 { color: $gray-light-2; }
.gray-light-3 { color: $gray-light-3; }
.gray-light-4 { color: $gray-light-4; }
.gray-light-5 { color: $gray-light-5; }
.gray-light-6 { color: $gray-light-6; }
.gray-light-7 { color: $gray-light-7; }
.gray-light-8 { color: $gray-light-8; }
.gray-light-9 { color: $gray-light-9; }
.gray-mid-0 { color: $gray-mid-0; }
.gray-mid-1 { color: $gray-mid-1; }
.gray-mid-2 { color: $gray-mid-2; }
.gray-mid-3 { color: $gray-mid-3; }
.gray-mid-4 { color: $gray-mid-4; }
.gray-mid-5 { color: $gray-mid-5; }
.gray-mid-6 { color: $gray-mid-6; }
.gray-mid-7 { color: $gray-mid-7; }
.gray-mid-8 { color: $gray-mid-8; }
.gray-mid-9 { color: $gray-mid-9; }
.gray-dark-0 { color: $gray-dark-0; }
.gray-dark-1 { color: $gray-dark-1; }
.gray-dark-2 { color: $gray-dark-2; }
.gray-dark-3 { color: $gray-dark-3; }
.gray-dark-4 { color: $gray-dark-4; }
.gray-dark-5 { color: $gray-dark-5; }
.gray-dark-6 { color: $gray-dark-6; }
.gray-dark-7 { color: $gray-dark-7; }
.gray-dark-8 { color: $gray-dark-8; }
.gray-dark-9 { color: $gray-dark-9; }
MIT
git checkout -b my-new-feature)git commit -am 'Add some feature')git push origin my-new-feature)Inspired by http://clrs.cc
Crafted with <3 by John Otander(@4lpine).
FAQs
Collection of grayscale variables for prototyping.
The npm package gray receives a total of 12 weekly downloads. As such, gray popularity was classified as not popular.
We found that gray demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.