sass-material-colors 0.0.4 → 0.0.4.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (11) hide show
  1. checksums.yaml +4 -4
  2. data/{LICENSE.txt → LICENSE.md} +1 -1
  3. data/README.md +44 -5
  4. data/Rakefile +27 -0
  5. data/bower.json +9 -6
  6. data/lib/sass-material-colors/version.rb +1 -1
  7. data/lib/templates/bower.json.template +42 -0
  8. data/lib/templates/package.json.template +31 -0
  9. data/package.json +14 -11
  10. data/sass/_sass-material-colors-function.scss +1 -1
  11. metadata +4 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 4cba80d391b4e7a2290b9ccd0017ee274d3bd709
4
- data.tar.gz: e8e63ad49e4ab0816bfa2d75d0d58645d32f3ee1
3
+ metadata.gz: db60ef48740be1ad255cd27d382b9d2310b72504
4
+ data.tar.gz: 1c54896164b0ab32c900c73df2b4ce0cd5666de6
5
5
  SHA512:
6
- metadata.gz: c567dcd51e03a447226236ded508143265393cbd8023557716dbfc61edd12dcfec7fe528e2b334bfc1e4188c3dfa7067e097ba3264c137ba1deb5500ac285923
7
- data.tar.gz: 1eccd676e0096712b65acd93a8251e69b90b4af323e77443290d818154fc387a341623f348cd57a11130e63b0c64ebb5ba69f23084512b76bf66e08fbbabfa77
6
+ metadata.gz: 054bec762875b726e7a1f5755e2db44fb7f7c32d30ac9ece819fe0081a3841d4d7d954f1c446fab5da995cb844edcc687184c6ab9d8536cc8bbc03956446b68b
7
+ data.tar.gz: a65cab0ccde8e8bed8cea96fc915afc15c6b556d49fcad1b3b402274f19a88d52304d71dd26ba4dfca72db0b89ea7a733c1495a89cd90d1fe12679681a1fd996
data/{LICENSE.txt → LICENSE.md} RENAMED
@@ -1,6 +1,6 @@
1
1
  Copyright (c) 2014 minusfive
2
2
 
3
- MIT License
3
+ # MIT License
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining
6
6
  a copy of this software and associated documentation files (the
data/README.md CHANGED
@@ -1,9 +1,13 @@
1
1
  # Sass Material Colors [![Gem Version](https://badge.fury.io/rb/sass-material-colors.svg)](http://badge.fury.io/rb/sass-material-colors)
2
2
 
3
- This gem makes it easy to use Google's [Material Design color palette](http://www.google.com/design/spec/style/color.html#color-color-palette) on your project.
3
+ An easy way to use Google's [Material Design color palette](http://www.google.com/design/spec/style/color.html#color-color-palette) on your Sass project.
4
4
 
5
5
  ## Installation
6
6
 
7
+ Sass Material Colors can be included as a [Ruby Gem](#ruby-gem), a [Bower component](#bower-component), or a [Node Packaged Module (npm)](#npm).
8
+
9
+ ### Ruby Gem
10
+
7
11
  Add this line to your application's Gemfile:
8
12
 
9
13
  ```bash
@@ -22,6 +26,22 @@ Or install it yourself as:
22
26
  $ gem install sass-material-colors
23
27
  ```
24
28
 
29
+ ### Bower Component
30
+
31
+ Install `sass-material-colors` as a development dependency:
32
+
33
+ ```bash
34
+ $ bower install --save-dev sass-material-colors
35
+ ```
36
+
37
+ ### Node Packaged Module (npm)
38
+
39
+ Install `sass-material-colors` as a development dependency:
40
+
41
+ ```bash
42
+ $ npm install --save-dev sass-material-colors
43
+ ```
44
+
25
45
  ## Usage
26
46
 
27
47
  Import the colors map + function to your project:
@@ -31,9 +51,21 @@ Import the colors map + function to your project:
31
51
  @import 'sass-material-colors'
32
52
  ```
33
53
 
34
- This will automatically import a `$material-colors` [Sass map](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#maps) containing all the color names and values found in Google's [palette](http://www.google.com/design/spec/style/color.html#color-color-palette), and the handy [`material-color` function](#the-material-color-function), which allows you to easily reference any color in the `$material-colors` map from your Sass or Scss stylesheets.
54
+ If you're using Bower or npm, you may need to use the relative path to the main file, e.g.:
55
+
56
+ ```sass
57
+ // Sass
58
+
59
+ // Bower
60
+ @import 'bower_components/sass-material-colors/sass/sass-material-colors'
61
+
62
+ // npm
63
+ @import 'node_modules/sass-material-colors/sass/sass-material-colors'
64
+ ```
65
+
66
+ By importing this file, a `$material-colors` [Sass map](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#maps) will be added to your Sass project, with all the colors from Google's [palette](http://www.google.com/design/spec/style/color.html#color-color-palette), as well as a [`material-color` function](#the-material-color-function), making it easy for you to reference any color in the spec from your stylesheets.
35
67
 
36
- Optionally, you can import a list of predefined [placeholder selectors](#predefined-sass-placeholder-selectors) and/or [classes](#predefined-classes) to your stylesheets.
68
+ Optionally, you can import a list of [placeholder selectors](#predefined-sass-placeholder-selectors) and/or [classes](#predefined-classes).
37
69
 
38
70
  ### The `material-color` Function
39
71
 
@@ -46,7 +78,7 @@ The `material-color` function allows you to easily reference any color in the `_
46
78
  background: material-color('blue-grey', '600')
47
79
  ```
48
80
 
49
- The `material-color` function takes 2 arguments:
81
+ The `material-color` function takes 2 parameters:
50
82
 
51
83
  ##### `$color-name` String (quoted), Required
52
84
  > Lower-case, dasherized color name from Google's [palette](http://www.google.com/design/spec/style/color.html#color-color-palette) (e.g. `'pink'`, `'amber'`, `'blue-grey'`, `'deep-orange'`, etc.)
@@ -54,6 +86,8 @@ The `material-color` function takes 2 arguments:
54
86
  ##### `$color-variant` String (quoted), Optional [Default value: `500`]
55
87
  > Lower-case color variant number/code from Google's [palette](http://www.google.com/design/spec/style/color.html#color-color-palette) (e.g. `'300'`, `'200'`, `'a100'`, `'a400'`, etc.)
56
88
 
89
+ It's important for these parameters to be quoted strings, in order to maintain compatibility with [Libsass](https://github.com/sass/libsass).
90
+
57
91
  ### Predefined Sass Placeholder Selectors
58
92
 
59
93
  You can include a list of [extendable](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend) Sass [placeholder selectors](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholder_selectors_) in your project by importing the `sass-material-colors-placeholders` [file](sass/_sass-material-colors-placeholders.scss) into your Sass/Scss:
@@ -89,8 +123,13 @@ This will add a `.color-...` and `.bg-color-...` class for each color name and v
89
123
  ```
90
124
 
91
125
  ## TO-DO
126
+ - [x] ~~Make it bower friendly~~
127
+ - [x] ~~Make it npm friendly~~
128
+ - [ ] Create ember-cli addon
129
+ - [ ] Pre-compile `-placeholders` and `-classes` files
130
+ - [ ] Separate color (text) and background classes
92
131
  - [ ] Add tests
93
- - [ ] Make it bower friendly
132
+ - [ ] Add changelog
94
133
 
95
134
  ## Contributing
96
135
 
data/Rakefile CHANGED
@@ -1,2 +1,29 @@
1
1
  require "bundler/gem_tasks"
2
2
 
3
+ namespace :sass_material_colors do
4
+
5
+ desc "Updates version number in bower and package json files"
6
+ task :update_version do
7
+ require_relative "lib/sass-material-colors/version"
8
+ version = ::SassMaterialColors::VERSION
9
+ Dir.glob('lib/templates/*.template').each do |template|
10
+ content = File.read(template).gsub(/VERSION_PLACEHOLDER/, version)
11
+ output_file = File.basename template, '.template'
12
+ File.write output_file, content
13
+ end
14
+ system "git add lib/sass-material-colors/version.rb bower.json package.json"
15
+ system "git commit -m \"Version bumped to #{version}\""
16
+ end
17
+
18
+ desc "Publishes new version to bower + npm registries"
19
+ task :npm_publish do
20
+ system 'npm publish .'
21
+ end
22
+
23
+ end
24
+
25
+ # Make the sass_material_colors:update_version a pre-requisite
26
+ # for :release, and publish to npm after :release
27
+ task :release => "sass_material_colors:update_version" do
28
+ Rake::Task['sass_material_colors:npm_publish']
29
+ end
data/bower.json CHANGED
@@ -1,23 +1,25 @@
1
1
  {
2
2
  "name": "sass-material-colors",
3
+ "description": "Google's Material Design colors for Sass/Scss",
3
4
  "version": "0.0.4",
4
5
  "homepage": "https://github.com/minusfive/sass-material-colors",
5
- "repository": "https://github.com/minusfive/sass-material-colors",
6
+ "repository": "https://github.com/minusfive/sass-material-colors.git",
6
7
  "authors": [
7
8
  "minusfive <mail@minusfive.com>"
8
9
  ],
9
- "description": "Google's Material Design colors for Sass/Scss",
10
10
  "main": "sass/_sass-material-colors.scss",
11
11
  "keywords": [
12
12
  "sass",
13
13
  "scss",
14
14
  "material",
15
+ "design",
15
16
  "colors",
16
- "functions",
17
+ "palette",
18
+ "function",
17
19
  "placeholders",
18
- "extensions"
20
+ "extensions",
21
+ "classes"
19
22
  ],
20
- "license": "MIT",
21
23
  "ignore": [
22
24
  "**/.*",
23
25
  "node_modules",
@@ -35,5 +37,6 @@
35
37
  "Gemfile.lock",
36
38
  "package.json",
37
39
  "Rakefile"
38
- ]
40
+ ],
41
+ "license": "MIT"
39
42
  }
data/lib/sass-material-colors/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module SassMaterialColors
2
- VERSION = "0.0.4"
2
+ VERSION = "0.0.4.1"
3
3
  end
data/lib/templates/bower.json.template ADDED
@@ -0,0 +1,42 @@
1
+ {
2
+ "name": "sass-material-colors",
3
+ "description": "Google's Material Design colors for Sass/Scss",
4
+ "version": "VERSION_PLACEHOLDER",
5
+ "homepage": "https://github.com/minusfive/sass-material-colors",
6
+ "repository": "https://github.com/minusfive/sass-material-colors.git",
7
+ "authors": [
8
+ "minusfive <mail@minusfive.com>"
9
+ ],
10
+ "main": "sass/_sass-material-colors.scss",
11
+ "keywords": [
12
+ "sass",
13
+ "scss",
14
+ "material",
15
+ "design",
16
+ "colors",
17
+ "palette",
18
+ "function",
19
+ "placeholders",
20
+ "extensions",
21
+ "classes"
22
+ ],
23
+ "ignore": [
24
+ "**/.*",
25
+ "node_modules",
26
+ "bower_components",
27
+ "test",
28
+ "tests",
29
+ "bin",
30
+ "pkg",
31
+ "sass-material-colors.gemspec",
32
+ "CONTRIBUTING.md",
33
+ "features",
34
+ "LICENSE.txt",
35
+ "lib",
36
+ "Gemfile",
37
+ "Gemfile.lock",
38
+ "package.json",
39
+ "Rakefile"
40
+ ],
41
+ "license": "MIT"
42
+ }
data/lib/templates/package.json.template ADDED
@@ -0,0 +1,31 @@
1
+ {
2
+ "name": "sass-material-colors",
3
+ "version": "VERSION_PLACEHOLDER",
4
+ "description": "Google's Material Design colors for Sass/Scss",
5
+ "author": "minusfive <mail@minusfive.com>",
6
+ "main": "sass/_sass-material-colors.scss",
7
+ "homepage": "https://github.com/minusfive/sass-material-colors",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "https://github.com/minusfive/sass-material-colors.git"
11
+ },
12
+ "bugs": {
13
+ "url": "https://github.com/minusfive/sass-material-colors/issues"
14
+ },
15
+ "keywords": [
16
+ "sass",
17
+ "scss",
18
+ "material",
19
+ "design",
20
+ "colors",
21
+ "palette",
22
+ "function",
23
+ "placeholders",
24
+ "extensions",
25
+ "classes"
26
+ ],
27
+ "scripts": {
28
+ "test": "echo \"Error: no test specified\" && exit 1"
29
+ },
30
+ "license": "MIT"
31
+ }
data/package.json CHANGED
@@ -2,27 +2,30 @@
2
2
  "name": "sass-material-colors",
3
3
  "version": "0.0.4",
4
4
  "description": "Google's Material Design colors for Sass/Scss",
5
+ "author": "minusfive <mail@minusfive.com>",
5
6
  "main": "sass/_sass-material-colors.scss",
6
- "scripts": {
7
- "test": "echo \"Error: no test specified\" && exit 1"
8
- },
7
+ "homepage": "https://github.com/minusfive/sass-material-colors",
9
8
  "repository": {
10
9
  "type": "git",
11
10
  "url": "https://github.com/minusfive/sass-material-colors.git"
12
11
  },
12
+ "bugs": {
13
+ "url": "https://github.com/minusfive/sass-material-colors/issues"
14
+ },
13
15
  "keywords": [
14
16
  "sass",
15
17
  "scss",
16
18
  "material",
19
+ "design",
17
20
  "colors",
18
- "functions",
19
- "placeholder",
20
- "extensions"
21
+ "palette",
22
+ "function",
23
+ "placeholders",
24
+ "extensions",
25
+ "classes"
21
26
  ],
22
- "author": "minusfive <mail@minusfive.com>",
23
- "license": "MIT",
24
- "bugs": {
25
- "url": "https://github.com/minusfive/sass-material-colors/issues"
27
+ "scripts": {
28
+ "test": "echo \"Error: no test specified\" && exit 1"
26
29
  },
27
- "homepage": "https://github.com/minusfive/sass-material-colors"
30
+ "license": "MIT"
28
31
  }
data/sass/_sass-material-colors-function.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @import 'sass-material-colors-map';
2
- // Inspired by https://github.com/nilskaspersson/Google-Material-UI-Color-Palette/
3
2
  /**
4
3
  * Retrieves a color value from the $material-colors Sass map
4
+ * Inspired by https://github.com/nilskaspersson/Google-Material-UI-Color-Palette/
5
5
  *
6
6
  * @function
7
7
  * @param {string} color-name - quoted, lower-case, dasherized color
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: sass-material-colors
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.4
4
+ version: 0.0.4.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - minusfive
@@ -50,12 +50,14 @@ files:
50
50
  - ".npmignore"
51
51
  - CONTRIBUTING.md
52
52
  - Gemfile
53
- - LICENSE.txt
53
+ - LICENSE.md
54
54
  - README.md
55
55
  - Rakefile
56
56
  - bower.json
57
57
  - lib/sass-material-colors.rb
58
58
  - lib/sass-material-colors/version.rb
59
+ - lib/templates/bower.json.template
60
+ - lib/templates/package.json.template
59
61
  - package.json
60
62
  - sass-material-colors.gemspec
61
63
  - sass/_sass-material-colors-classes.scss