sass-color-extractor 0.1.2 → 0.1.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.ruby-version +1 -0
- data/README.md +74 -2
- data/lib/sass_color_extractor/base.rb +2 -1
- data/lib/sass_color_extractor/version.rb +1 -1
- data/sass_color_extractor.gemspec +1 -0
- data/spec/spec_helper.rb +1 -1
- metadata +18 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 1d1e465ce36fb12a7cfcf89bfb95a5db10bbc94e
|
4
|
+
data.tar.gz: 4fe02dbea81341f2280dbbdedc189e9b65c8df94
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 7d68b4aecd2bff878c41b44750a6cfedb3e91a1d18237bccd221daabe8c414d735e88e1a43323b069cf287e870f64b2d087de81f170bd5fbb93f10d2f7c8cacf
|
7
|
+
data.tar.gz: b80976f53d9a90f848427f44e4054fb4c2d9303d750aca3934e64092473ba1dd72550376600e76e472a90c25d3448f2cd9c981482f3bd0f620d65b6b67a4a2a8
|
data/.ruby-version
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
2.3.3
|
data/README.md
CHANGED
@@ -4,12 +4,15 @@ This dirt simple Gem uses the Sass ruby library to read your `colors.scss` file
|
|
4
4
|
a list of color names and their actual colors which can be used to generate a nice color palette page in a
|
5
5
|
Rails app.
|
6
6
|
|
7
|
+
[![Gem Version](https://badge.fury.io/rb/sass-color-extractor.png)](http://badge.fury.io/rb/sass_color_extractor)
|
8
|
+
[![Build Status](https://circleci.com/gh/rcode5/sass_color_extractor.svg?style=shield&circle-token=485f42e03b961bb2ac17e9ee814fe963bd58954c)]()
|
9
|
+
|
7
10
|
## Installation
|
8
11
|
|
9
12
|
Add this line to your application's Gemfile:
|
10
13
|
|
11
14
|
```ruby
|
12
|
-
gem '
|
15
|
+
gem 'sass-color-extractor'
|
13
16
|
```
|
14
17
|
|
15
18
|
And then execute:
|
@@ -18,10 +21,11 @@ And then execute:
|
|
18
21
|
|
19
22
|
Or install it yourself as:
|
20
23
|
|
21
|
-
$ gem install
|
24
|
+
$ gem install sass-color-extractor
|
22
25
|
|
23
26
|
## Usage
|
24
27
|
|
28
|
+
### Basic Usage
|
25
29
|
You should extract your color variables into their own file (which you would then `@import` as necessary
|
26
30
|
in your scss/sass files. Once you have that, you can get a map of color names to their hex color like so:
|
27
31
|
|
@@ -53,6 +57,74 @@ You'd get a hash in ruby like this:
|
|
53
57
|
}
|
54
58
|
```
|
55
59
|
|
60
|
+
### Add Palette page to a Rails app
|
61
|
+
|
62
|
+
To add a page in your Rails app that shows all the colors defined in the palette with their corresponding hex value,
|
63
|
+
add a route, controller and view:
|
64
|
+
|
65
|
+
```
|
66
|
+
# config/routes.rb
|
67
|
+
|
68
|
+
MyApp::Application.routes.draw do
|
69
|
+
...
|
70
|
+
resource :palette, only: [:show]
|
71
|
+
end
|
72
|
+
```
|
73
|
+
|
74
|
+
```
|
75
|
+
# app/controllers/palettes_controller.rb
|
76
|
+
class PalettesController < ApplicationController
|
77
|
+
def show
|
78
|
+
f = File.expand_path('app/assets/stylesheets/_colors.scss')
|
79
|
+
@colors = SassColorExtractor::Base.parse_colors(f)
|
80
|
+
end
|
81
|
+
add
|
82
|
+
```
|
83
|
+
|
84
|
+
```
|
85
|
+
# app/views/palettes/show.html.slim
|
86
|
+
.palette-colors
|
87
|
+
- @colors.each do |name, hexval|
|
88
|
+
.palette-colors__color(style="background-color: ##{hexval}")
|
89
|
+
.palette-colors__color-info
|
90
|
+
.palette-colors__color-info__name = name
|
91
|
+
.palette-colors__color-info__hexval = "##{hexval}"
|
92
|
+
```
|
93
|
+
|
94
|
+
With a little CSS:
|
95
|
+
```
|
96
|
+
// app/assets/stylesheets/palette.scss
|
97
|
+
.palette-colors {
|
98
|
+
display: flex;
|
99
|
+
flex-flow: row wrap;
|
100
|
+
justify-content: center;
|
101
|
+
}
|
102
|
+
.palette-colors__color {
|
103
|
+
border-radius: 4px;
|
104
|
+
border: 1px solid #ddd;
|
105
|
+
margin: 7px;
|
106
|
+
width: 120px;
|
107
|
+
height: 120px;
|
108
|
+
position: relative;
|
109
|
+
}
|
110
|
+
.palette-colors__color-info {
|
111
|
+
position: absolute;
|
112
|
+
bottom: 0px;
|
113
|
+
width: 100%;
|
114
|
+
padding: 4px;
|
115
|
+
text-align:center;
|
116
|
+
background-color: rgba(200,200,200,0.7);
|
117
|
+
font-size: 0.8rem;
|
118
|
+
border-radius: 4px;
|
119
|
+
color: #000;
|
120
|
+
}
|
121
|
+
```
|
122
|
+
|
123
|
+
You should get a nice little palette.
|
124
|
+
|
125
|
+
|
126
|
+
|
127
|
+
|
56
128
|
## Contributing
|
57
129
|
|
58
130
|
1. Fork it ( https://github.com/rcode5/sass_color_extractor/fork )
|
@@ -1,3 +1,4 @@
|
|
1
|
+
require 'byebug'
|
1
2
|
module SassColorExtractor
|
2
3
|
class Base
|
3
4
|
DEFAULT_SYNTAX = :scss
|
@@ -12,7 +13,7 @@ module SassColorExtractor
|
|
12
13
|
class << self
|
13
14
|
private
|
14
15
|
def guess_syntax(file)
|
15
|
-
guess = File.extname(file)[
|
16
|
+
guess = File.extname(file)[1..-1].to_sym
|
16
17
|
[:sass, :scss].include?(guess) ? guess : DEFAULT_SYNTAX
|
17
18
|
end
|
18
19
|
end
|
data/spec/spec_helper.rb
CHANGED
@@ -1,2 +1,2 @@
|
|
1
1
|
require 'rspec'
|
2
|
-
require_relative "../lib/
|
2
|
+
require_relative "../lib/sass-color-extractor.rb"
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: sass-color-extractor
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.3
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Mr Rogers
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2017-01-
|
11
|
+
date: 2017-01-07 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: sass
|
@@ -66,6 +66,20 @@ dependencies:
|
|
66
66
|
- - "~>"
|
67
67
|
- !ruby/object:Gem::Version
|
68
68
|
version: '3.5'
|
69
|
+
- !ruby/object:Gem::Dependency
|
70
|
+
name: byebug
|
71
|
+
requirement: !ruby/object:Gem::Requirement
|
72
|
+
requirements:
|
73
|
+
- - "~>"
|
74
|
+
- !ruby/object:Gem::Version
|
75
|
+
version: '3.5'
|
76
|
+
type: :development
|
77
|
+
prerelease: false
|
78
|
+
version_requirements: !ruby/object:Gem::Requirement
|
79
|
+
requirements:
|
80
|
+
- - "~>"
|
81
|
+
- !ruby/object:Gem::Version
|
82
|
+
version: '3.5'
|
69
83
|
description:
|
70
84
|
email:
|
71
85
|
- jon@rcode5.com
|
@@ -74,6 +88,7 @@ extensions: []
|
|
74
88
|
extra_rdoc_files: []
|
75
89
|
files:
|
76
90
|
- ".gitignore"
|
91
|
+
- ".ruby-version"
|
77
92
|
- Gemfile
|
78
93
|
- LICENSE.txt
|
79
94
|
- README.md
|
@@ -108,7 +123,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
108
123
|
version: '0'
|
109
124
|
requirements: []
|
110
125
|
rubyforge_project:
|
111
|
-
rubygems_version: 2.
|
126
|
+
rubygems_version: 2.5.2
|
112
127
|
signing_key:
|
113
128
|
specification_version: 4
|
114
129
|
summary: Extract colors from Sass/Scss in ruby - can be used to generate a nice palette
|