clrs 1.0.0 → 1.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (6) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +39 -5
  3. data/app/assets/stylesheets/clrs.scss +145 -52
  4. data/clrs-1.0.0.gem +0 -0
  5. data/lib/clrs/version.rb +1 -1
  6. metadata +12 -10
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: dd79ddc7a1b8e692feb08941a1800d221dbbb537
4
- data.tar.gz: eb4d6a7fde68ab1b9a86e2803e6d1d9272a74efb
3
+ metadata.gz: 811d344ed09f748d0d1144382f2c5765493ad6a5
4
+ data.tar.gz: 8b3b6d2fe37c28a32452dcf7cbbe18d4ab553f53
5
5
  SHA512:
6
- metadata.gz: 928a698aec0e4483fe663af75c3a1f2044efbb5cf860e976c55e786230008c728493641a8d9f9cbc918d67c31c4e71e4247935760e8c0551a447c2b98c22ec6d
7
- data.tar.gz: 71ce4051f92bd1ac3639e4c4b02bfc50d28ad97a609d807bc411152064dc474384d8e5945fa4ca854e6f1ef7f82df2dadc73619eb9f43c87e8fc3b227b3db100
6
+ metadata.gz: ba89863d5d28b2997e3ea3ea35c1330bfff2cf9d24031418d857146f4d0ab2472b6d57e27cb8324be196f2b3eb65ac845b299b247ab185472d2c639cb48c80b6
7
+ data.tar.gz: 7610a24ba27ee1e138577373679626af35aa117e483ad33d842f779ef220f51c65a13c1907428a4287178a60d2a3510e9614a49bb28473967d62a2dfd2e2c74f
data/README.md CHANGED
@@ -1,27 +1,43 @@
1
1
  # Clrs
2
2
 
3
- Easily include the <http://www.clrs.cc> palette as scss variables in your Rails apps.
3
+ Include the <http://www.clrs.cc> palette as scss variables in your Rails apps.
4
+
5
+ Repackaged from: <https://github.com/mrmrs/colors>.
4
6
 
5
7
  ## Installation
6
8
 
7
9
  Add this line to your application's Gemfile:
8
10
 
9
- gem 'clrs'
11
+ ```ruby
12
+ gem 'clrs'
13
+ ```
10
14
 
11
15
  And then execute:
12
16
 
13
- $ bundle
17
+ ```
18
+ $ bundle
19
+ ```
14
20
 
15
21
  Or install it yourself as:
16
22
 
17
- $ gem install clrs
23
+ ```
24
+ $ gem install clrs
25
+ ```
18
26
 
19
- You will then need to require the stylesheet in your application.css:
27
+ You will then need to require the stylesheet in your application.scss:
20
28
 
29
+ ```scss
30
+ @import "clrs";
21
31
  ```
32
+
33
+ Or, in your application.css:
34
+
35
+ ```css
22
36
  *= require clrs;
23
37
  ```
24
38
 
39
+
40
+
25
41
  ## Usage
26
42
 
27
43
  Now you have access to the following variables:
@@ -46,6 +62,24 @@ $gray: #aaaaaa;
46
62
  $black: #111111;
47
63
  ```
48
64
 
65
+ Additionally, there are `background-color` and `color` classes:
66
+
67
+ ```scss
68
+ /* Backgrounds */
69
+
70
+ .bg-navy { background-color: $navy; }
71
+ .bg-blue { background-color: $blue; }
72
+ .bg-aqua { background-color: $aqua; }
73
+ /* ... */
74
+
75
+ /* Colors */
76
+
77
+ .navy { color: $navy; }
78
+ .blue { color: $blue; }
79
+ .aqua { color: $aqua; }
80
+ /* ... */
81
+ ```
82
+
49
83
  __NOTE:__ You must require the clrs stylesheet before other stylesheets using the above scss variables.
50
84
 
51
85
  ## Contributing
data/app/assets/stylesheets/clrs.scss CHANGED
@@ -1,65 +1,158 @@
1
1
  /* Courtesy of clrs.cc by @mrmrs_ */
2
2
 
3
- /* Variables */
4
-
5
- $navy: #001f3f;
6
- $blue: #0074d9;
7
- $aqua: #7fdbff;
8
- $teal: #39cccc;
9
- $olive: #3d9970;
10
- $green: #2ecc40;
11
- $lime: #01ff70;
12
- $yellow: #ffdc00;
13
- $orange: #ff851b;
14
- $red: #ff4136;
15
- $maroon: #85144b;
16
- $fuchsia: #f012be;
17
- $purple: #b10dc9;
18
- $white: #ffffff;
19
- $silver: #dddddd;
20
- $gray: #aaaaaa;
21
- $black: #111111;
3
+ //
4
+ // COLOR VARIABLES
5
+ //
6
+ // - Cool
7
+ // - Warm
8
+ // - Gray Scale
9
+ //
10
+
11
+ // Cool
12
+
13
+ $aqua: #7FDBFF;
14
+ $blue: #0074D9;
15
+ $navy: #001F3F;
16
+ $teal: #39CCCC;
17
+ $green: #2ECC40;
18
+ $olive: #3D9970;
19
+ $lime: #01FF70;
20
+
21
+ // Warm
22
+
23
+ $yellow: #FFDC00;
24
+ $orange: #FF851B;
25
+ $red: #FF4136;
26
+ $fuchsia: #F012BE;
27
+ $purple: #B10DC9;
28
+ $maroon: #85144B;
29
+
30
+ // Gray Scale
31
+
32
+ $white: #fff;
33
+ $silver: #ddd;
34
+ $gray: #aaa;
35
+ $black: #111;
36
+
37
+
38
+ /*
39
+
40
+ SKINS
41
+ - Backgrounds
42
+ - Colors
43
+ - Border colors
44
+ - SVG fills
45
+ - SVG Strokes
46
+
47
+ */
48
+
22
49
 
23
50
  /* Backgrounds */
24
51
 
25
- .bg-navy { background-color: $navy; }
26
- .bg-blue { background-color: $blue; }
27
- .bg-aqua { background-color: $aqua; }
28
- .bg-teal { background-color: $teal; }
29
- .bg-olive { background-color: $olive; }
30
- .bg-green { background-color: $green; }
31
- .bg-lime { background-color: $lime; }
32
- .bg-yellow { background-color: $yellow; }
33
- .bg-orange { background-color: $orange; }
34
- .bg-red { background-color: $red; }
52
+ .bg-navy { background-color: $navy; }
53
+ .bg-blue { background-color: $blue; }
54
+ .bg-aqua { background-color: $aqua; }
55
+ .bg-teal { background-color: $teal; }
56
+ .bg-olive { background-color: $olive; }
57
+ .bg-green { background-color: $green; }
58
+ .bg-lime { background-color: $lime; }
59
+ .bg-yellow { background-color: $yellow; }
60
+ .bg-orange { background-color: $orange; }
61
+ .bg-red { background-color: $red; }
35
62
  .bg-fuchsia { background-color: $fuchsia; }
36
- .bg-purple { background-color: $purple; }
37
- .bg-maroon { background-color: $maroon; }
38
- .bg-white { background-color: $white; }
39
- .bg-gray { background-color: $gray; }
40
- .bg-silver { background-color: $silver; }
41
- .bg-black { background-color: $black; }
63
+ .bg-purple { background-color: $purple; }
64
+ .bg-maroon { background-color: $maroon; }
65
+ .bg-white { background-color: $white; }
66
+ .bg-gray { background-color: $gray; }
67
+ .bg-silver { background-color: $silver; }
68
+ .bg-black { background-color: $black; }
42
69
 
43
70
 
44
71
  /* Colors */
45
72
 
46
- .navy { color: $navy; }
47
- .blue { color: $blue; }
48
- .aqua { color: $aqua; }
49
- .teal { color: $teal; }
50
- .olive { color: $olive; }
51
- .green { color: $green; }
52
- .lime { color: $lime; }
53
- .yellow { color: $yellow; }
54
- .orange { color: $orange; }
55
- .red { color: $red; }
56
- .fuchsia { color: $fuchsia; }
57
- .purple { color: $purple; }
58
- .maroon { color: $maroon; }
59
- .white { color: $white; }
60
- .silver { color: $silver; }
61
- .gray { color: $gray; }
62
- .black { color: $black; }
73
+ .navy { color: $navy; }
74
+ .blue { color: $blue; }
75
+ .aqua { color: $aqua; }
76
+ .teal { color: $teal; }
77
+ .olive { color: $olive; }
78
+ .green { color: $green; }
79
+ .lime { color: $lime; }
80
+ .yellow { color: $yellow; }
81
+ .orange { color: $orange; }
82
+ .red { color: $red; }
83
+ .fuchsia { color: $fuchsia; }
84
+ .purple { color: $purple; }
85
+ .maroon { color: $maroon; }
86
+ .white { color: $white; }
87
+ .silver { color: $silver; }
88
+ .gray { color: $gray; }
89
+ .black { color: $black; }
90
+
91
+
92
+ /* Border colors
93
+
94
+ Use with another border utility that sets border-width and style
95
+ i.e .border { border-width: 1px; border-style: solid; }
96
+ */
97
+
98
+ .border--navy { border-color: $navy; }
99
+ .border--blue { border-color: $blue; }
100
+ .border--aqua { border-color: $aqua; }
101
+ .border--teal { border-color: $teal; }
102
+ .border--olive { border-color: $olive; }
103
+ .border--green { border-color: $green; }
104
+ .border--lime { border-color: $lime; }
105
+ .border--yellow { border-color: $yellow; }
106
+ .border--orange { border-color: $orange; }
107
+ .border--red { border-color: $red; }
108
+ .border--fuchsia { border-color: $fuchsia; }
109
+ .border--purple { border-color: $purple; }
110
+ .border--maroon { border-color: $maroon; }
111
+ .border--white { border-color: $white; }
112
+ .border--gray { border-color: $gray; }
113
+ .border--silver { border-color: $silver; }
114
+ .border--black { border-color: $black; }
115
+
116
+
117
+ /* Fills for SVG */
118
+
119
+ .fill-navy { fill: $navy; }
120
+ .fill-blue { fill: $blue; }
121
+ .fill-aqua { fill: $aqua; }
122
+ .fill-teal { fill: $teal; }
123
+ .fill-olive { fill: $olive; }
124
+ .fill-green { fill: $green; }
125
+ .fill-lime { fill: $lime; }
126
+ .fill-yellow { fill: $yellow; }
127
+ .fill-orange { fill: $orange; }
128
+ .fill-red { fill: $red; }
129
+ .fill-fuchsia { fill: $fuchsia; }
130
+ .fill-purple { fill: $purple; }
131
+ .fill-maroon { fill: $maroon; }
132
+ .fill-white { fill: $white; }
133
+ .fill-gray { fill: $gray; }
134
+ .fill-silver { fill: $silver; }
135
+ .fill-black { fill: $black; }
136
+
137
+ /* Strokes for SVG */
138
+
139
+ .stroke-navy { stroke: $navy; }
140
+ .stroke-blue { stroke: $blue; }
141
+ .stroke-aqua { stroke: $aqua; }
142
+ .stroke-teal { stroke: $teal; }
143
+ .stroke-olive { stroke: $olive; }
144
+ .stroke-green { stroke: $green; }
145
+ .stroke-lime { stroke: $lime; }
146
+ .stroke-yellow { stroke: $yellow; }
147
+ .stroke-orange { stroke: $orange; }
148
+ .stroke-red { stroke: $red; }
149
+ .stroke-fuchsia { stroke: $fuchsia; }
150
+ .stroke-purple { stroke: $purple; }
151
+ .stroke-maroon { stroke: $maroon; }
152
+ .stroke-white { stroke: $white; }
153
+ .stroke-gray { stroke: $gray; }
154
+ .stroke-silver { stroke: $silver; }
155
+ .stroke-black { stroke: $black; }
63
156
 
64
157
  /* Prettier Links */
65
158
 
data/clrs-1.0.0.gem ADDED
Binary file
data/lib/clrs/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Clrs
2
- VERSION = "1.0.0"
2
+ VERSION = "1.1.0"
3
3
  end
metadata CHANGED
@@ -1,41 +1,41 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: clrs
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.0.0
4
+ version: 1.1.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - John Otander
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2014-02-19 00:00:00.000000000 Z
11
+ date: 2014-07-09 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler
15
15
  requirement: !ruby/object:Gem::Requirement
16
16
  requirements:
17
- - - ~>
17
+ - - "~>"
18
18
  - !ruby/object:Gem::Version
19
19
  version: '1.3'
20
20
  type: :development
21
21
  prerelease: false
22
22
  version_requirements: !ruby/object:Gem::Requirement
23
23
  requirements:
24
- - - ~>
24
+ - - "~>"
25
25
  - !ruby/object:Gem::Version
26
26
  version: '1.3'
27
27
  - !ruby/object:Gem::Dependency
28
28
  name: rake
29
29
  requirement: !ruby/object:Gem::Requirement
30
30
  requirements:
31
- - - '>='
31
+ - - ">="
32
32
  - !ruby/object:Gem::Version
33
33
  version: '0'
34
34
  type: :development
35
35
  prerelease: false
36
36
  version_requirements: !ruby/object:Gem::Requirement
37
37
  requirements:
38
- - - '>='
38
+ - - ">="
39
39
  - !ruby/object:Gem::Version
40
40
  version: '0'
41
41
  description: Include clrs.cc in your Rails apps.
@@ -45,13 +45,14 @@ executables: []
45
45
  extensions: []
46
46
  extra_rdoc_files: []
47
47
  files:
48
- - .gitignore
48
+ - ".gitignore"
49
49
  - Gemfile
50
50
  - LICENSE
51
51
  - README.md
52
52
  - Rakefile
53
53
  - app/assets/stylesheets/clrs.scss
54
54
  - clrs-0.0.2.gem
55
+ - clrs-1.0.0.gem
55
56
  - clrs.gemspec
56
57
  - lib/clrs.rb
57
58
  - lib/clrs/engine.rb
@@ -66,18 +67,19 @@ require_paths:
66
67
  - lib
67
68
  required_ruby_version: !ruby/object:Gem::Requirement
68
69
  requirements:
69
- - - '>='
70
+ - - ">="
70
71
  - !ruby/object:Gem::Version
71
72
  version: '0'
72
73
  required_rubygems_version: !ruby/object:Gem::Requirement
73
74
  requirements:
74
- - - '>='
75
+ - - ">="
75
76
  - !ruby/object:Gem::Version
76
77
  version: '0'
77
78
  requirements: []
78
79
  rubyforge_project:
79
- rubygems_version: 2.1.11
80
+ rubygems_version: 2.2.2
80
81
  signing_key:
81
82
  specification_version: 4
82
83
  summary: A gem for a nicer color palette for the web, chosen by clrs.cc
83
84
  test_files: []
85
+ has_rdoc: