molecular 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/.gitignore +11 -0
- data/.overcommit.yml +37 -0
- data/.reek.yml +6 -0
- data/.rspec +3 -0
- data/.rubocop.yml +35 -0
- data/.travis.yml +7 -0
- data/Gemfile +6 -0
- data/Gemfile.lock +88 -0
- data/README.md +318 -0
- data/Rakefile +14 -0
- data/bin/console +14 -0
- data/bin/setup +8 -0
- data/lib/molecular.rb +34 -0
- data/lib/molecular/version.rb +3 -0
- data/molecular.gemspec +40 -0
- metadata +159 -0
checksums.yaml
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
---
|
|
2
|
+
SHA256:
|
|
3
|
+
metadata.gz: 3f14286322b3c3d9c072019e6632cbb916067adf7c51a51ece71aa4d54e110ea
|
|
4
|
+
data.tar.gz: 31dcea3c7cccc72a1f690dd2cdffdb2ba0704f4a469f31d12803cb526541d0e0
|
|
5
|
+
SHA512:
|
|
6
|
+
metadata.gz: c12cae07d216aff31ae3f07c7bb989920eff3900c5ad92691f835806a882a49639cf58740d6d065ef09b426dff7b3496be1269cfd8987049ec644a0e9a43e63e
|
|
7
|
+
data.tar.gz: 6c054541b4c89f0849d4d0df831407f802bae3cc48058feec11edea9d0e7a9b9de643a03dba609526ce51066a2554ec5718098ff39672e67fb8c3df64ff400d3
|
data/.gitignore
ADDED
data/.overcommit.yml
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
# Use this file to configure the Overcommit hooks you wish to use. This will
|
|
2
|
+
# extend the default configuration defined in:
|
|
3
|
+
# https://github.com/brigade/overcommit/blob/master/config/default.yml
|
|
4
|
+
#
|
|
5
|
+
# At the topmost level of this YAML file is a key representing type of hook
|
|
6
|
+
# being run (e.g. pre-commit, commit-msg, etc.). Within each type you can
|
|
7
|
+
# customize each hook, such as whether to only run it on certain files (via
|
|
8
|
+
# `include`), whether to only display output if it fails (via `quiet`), etc.
|
|
9
|
+
#
|
|
10
|
+
# For a complete list of hooks, see:
|
|
11
|
+
# https://github.com/brigade/overcommit/tree/master/lib/overcommit/hook
|
|
12
|
+
#
|
|
13
|
+
# For a complete list of options that you can use to customize hooks, see:
|
|
14
|
+
# https://github.com/brigade/overcommit#configuration
|
|
15
|
+
#
|
|
16
|
+
# Uncomment the following lines to make the configuration take effect.
|
|
17
|
+
|
|
18
|
+
PreCommit:
|
|
19
|
+
Rake:
|
|
20
|
+
enabled: true
|
|
21
|
+
command: ['bundle', 'exec', 'rake']
|
|
22
|
+
|
|
23
|
+
# RuboCop:
|
|
24
|
+
# enabled: true
|
|
25
|
+
# on_warn: fail # Treat all warnings as failures
|
|
26
|
+
#
|
|
27
|
+
# TrailingWhitespace:
|
|
28
|
+
# enabled: true
|
|
29
|
+
# exclude:
|
|
30
|
+
# - '**/db/structure.sql' # Ignore trailing whitespace in generated files
|
|
31
|
+
#
|
|
32
|
+
#PostCheckout:
|
|
33
|
+
# ALL: # Special hook name that customizes all hooks of this type
|
|
34
|
+
# quiet: true # Change all post-checkout hooks to only display output on failure
|
|
35
|
+
#
|
|
36
|
+
# IndexTags:
|
|
37
|
+
# enabled: true # Generate a tags file with `ctags` each time HEAD changes
|
data/.reek.yml
ADDED
data/.rspec
ADDED
data/.rubocop.yml
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
AllCops:
|
|
2
|
+
TargetRubyVersion: 2.5
|
|
3
|
+
Layout/LeadingCommentSpace:
|
|
4
|
+
Enabled: false
|
|
5
|
+
Metrics/BlockLength:
|
|
6
|
+
ExcludedMethods:
|
|
7
|
+
- change
|
|
8
|
+
- context
|
|
9
|
+
- define
|
|
10
|
+
- describe
|
|
11
|
+
- down
|
|
12
|
+
- feature
|
|
13
|
+
- migration
|
|
14
|
+
- namespace
|
|
15
|
+
- shared_context
|
|
16
|
+
- up
|
|
17
|
+
Style/FrozenStringLiteralComment:
|
|
18
|
+
EnforcedStyle: never
|
|
19
|
+
Style/AsciiComments:
|
|
20
|
+
Enabled: false
|
|
21
|
+
StyleGuide: http://relaxed.ruby.style/#styleasciicomments
|
|
22
|
+
Style/TrailingCommaInArguments:
|
|
23
|
+
Enabled: false
|
|
24
|
+
StyleGuide: http://relaxed.ruby.style/#styletrailingcommainarguments
|
|
25
|
+
EnforcedStyleForMultiline: consistent_comma
|
|
26
|
+
Style/TrailingCommaInArrayLiteral:
|
|
27
|
+
Enabled: false
|
|
28
|
+
StyleGuide: http://relaxed.ruby.style/#styletrailingcommainliteral
|
|
29
|
+
EnforcedStyleForMultiline: consistent_comma
|
|
30
|
+
Style/TrailingCommaInHashLiteral:
|
|
31
|
+
Enabled: false
|
|
32
|
+
StyleGuide: http://relaxed.ruby.style/#styletrailingcommainliteral
|
|
33
|
+
EnforcedStyleForMultiline: consistent_comma
|
|
34
|
+
Style/LambdaCall:
|
|
35
|
+
Enabled: false
|
data/.travis.yml
ADDED
data/Gemfile
ADDED
data/Gemfile.lock
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
PATH
|
|
2
|
+
remote: .
|
|
3
|
+
specs:
|
|
4
|
+
molecular (0.1.0)
|
|
5
|
+
|
|
6
|
+
GEM
|
|
7
|
+
remote: https://rubygems.org/
|
|
8
|
+
specs:
|
|
9
|
+
ast (2.4.0)
|
|
10
|
+
axiom-types (0.1.1)
|
|
11
|
+
descendants_tracker (~> 0.0.4)
|
|
12
|
+
ice_nine (~> 0.11.0)
|
|
13
|
+
thread_safe (~> 0.3, >= 0.3.1)
|
|
14
|
+
benchmark-ips (2.7.2)
|
|
15
|
+
childprocess (0.9.0)
|
|
16
|
+
ffi (~> 1.0, >= 1.0.11)
|
|
17
|
+
codeclimate-engine-rb (0.4.1)
|
|
18
|
+
virtus (~> 1.0)
|
|
19
|
+
coercible (1.0.0)
|
|
20
|
+
descendants_tracker (~> 0.0.1)
|
|
21
|
+
descendants_tracker (0.0.4)
|
|
22
|
+
thread_safe (~> 0.3, >= 0.3.1)
|
|
23
|
+
diff-lcs (1.3)
|
|
24
|
+
equalizer (0.0.11)
|
|
25
|
+
ffi (1.9.25)
|
|
26
|
+
ice_nine (0.11.2)
|
|
27
|
+
iniparse (1.4.4)
|
|
28
|
+
jaro_winkler (1.5.1)
|
|
29
|
+
kwalify (0.7.2)
|
|
30
|
+
overcommit (0.46.0)
|
|
31
|
+
childprocess (~> 0.6, >= 0.6.3)
|
|
32
|
+
iniparse (~> 1.4)
|
|
33
|
+
parallel (1.12.1)
|
|
34
|
+
parser (2.5.1.2)
|
|
35
|
+
ast (~> 2.4.0)
|
|
36
|
+
powerpack (0.1.2)
|
|
37
|
+
rainbow (3.0.0)
|
|
38
|
+
rake (10.5.0)
|
|
39
|
+
reek (5.1.0)
|
|
40
|
+
codeclimate-engine-rb (~> 0.4.0)
|
|
41
|
+
kwalify (~> 0.7.0)
|
|
42
|
+
parser (>= 2.5.0.0, < 2.6, != 2.5.1.1)
|
|
43
|
+
rainbow (>= 2.0, < 4.0)
|
|
44
|
+
rspec (3.8.0)
|
|
45
|
+
rspec-core (~> 3.8.0)
|
|
46
|
+
rspec-expectations (~> 3.8.0)
|
|
47
|
+
rspec-mocks (~> 3.8.0)
|
|
48
|
+
rspec-core (3.8.0)
|
|
49
|
+
rspec-support (~> 3.8.0)
|
|
50
|
+
rspec-expectations (3.8.1)
|
|
51
|
+
diff-lcs (>= 1.2.0, < 2.0)
|
|
52
|
+
rspec-support (~> 3.8.0)
|
|
53
|
+
rspec-mocks (3.8.0)
|
|
54
|
+
diff-lcs (>= 1.2.0, < 2.0)
|
|
55
|
+
rspec-support (~> 3.8.0)
|
|
56
|
+
rspec-support (3.8.0)
|
|
57
|
+
rubocop (0.59.2)
|
|
58
|
+
jaro_winkler (~> 1.5.1)
|
|
59
|
+
parallel (~> 1.10)
|
|
60
|
+
parser (>= 2.5, != 2.5.1.1)
|
|
61
|
+
powerpack (~> 0.1)
|
|
62
|
+
rainbow (>= 2.2.2, < 4.0)
|
|
63
|
+
ruby-progressbar (~> 1.7)
|
|
64
|
+
unicode-display_width (~> 1.0, >= 1.0.1)
|
|
65
|
+
ruby-progressbar (1.10.0)
|
|
66
|
+
thread_safe (0.3.6)
|
|
67
|
+
unicode-display_width (1.4.0)
|
|
68
|
+
virtus (1.0.5)
|
|
69
|
+
axiom-types (~> 0.1)
|
|
70
|
+
coercible (~> 1.0)
|
|
71
|
+
descendants_tracker (~> 0.0, >= 0.0.3)
|
|
72
|
+
equalizer (~> 0.0, >= 0.0.9)
|
|
73
|
+
|
|
74
|
+
PLATFORMS
|
|
75
|
+
ruby
|
|
76
|
+
|
|
77
|
+
DEPENDENCIES
|
|
78
|
+
benchmark-ips (~> 2.7)
|
|
79
|
+
bundler (~> 1.16)
|
|
80
|
+
molecular!
|
|
81
|
+
overcommit (~> 0)
|
|
82
|
+
rake (~> 10.0)
|
|
83
|
+
reek (~> 5)
|
|
84
|
+
rspec (~> 3.0)
|
|
85
|
+
rubocop (~> 0.59)
|
|
86
|
+
|
|
87
|
+
BUNDLED WITH
|
|
88
|
+
1.16.5
|
data/README.md
ADDED
|
@@ -0,0 +1,318 @@
|
|
|
1
|
+
# Molecular
|
|
2
|
+
|
|
3
|
+
`Molecular` abstracts long atomic CSS strings into reusable, tweakable Ruby
|
|
4
|
+
objects. You get all the benefits of working with atomic CSS, without the ugly
|
|
5
|
+
markup and verbose API.
|
|
6
|
+
|
|
7
|
+
Transform your app's views from this...
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<a class="f6 link dim ph3 pv2 mb2 dib white bg-black" href="#0">
|
|
11
|
+
A black button
|
|
12
|
+
</a>
|
|
13
|
+
|
|
14
|
+
<a class="f6 link dim ph3 pv2 mb2 dib red bg-black" href="#0">
|
|
15
|
+
A red button
|
|
16
|
+
</a>
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
...into this:
|
|
20
|
+
|
|
21
|
+
```erb
|
|
22
|
+
<a class="<%= ui_button %>">A black button</a>
|
|
23
|
+
|
|
24
|
+
<a class="<%= ui_button.(color: 'red') %>">A red button</a>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
* [Installation](#installation)
|
|
30
|
+
* [Usage (Generic)](#usage-generic)
|
|
31
|
+
* [Step 1: Create a Compound](#step-1-create-a-compound)
|
|
32
|
+
* [Step 2: Use your Compound in a view](#step-2-use-your-compound-in-a-view)
|
|
33
|
+
* [Step 3 (optional): Tweak your style keys](#step-3-optional-tweak-your-style-keys)
|
|
34
|
+
* [Usage (framework-specific)](#usage-framework-specific)
|
|
35
|
+
* [Rails](#rails)
|
|
36
|
+
* [Sinatra](#sinatra)
|
|
37
|
+
* [Roda](#roda)
|
|
38
|
+
* [Development](#development)
|
|
39
|
+
* [Contributing](#contributing)
|
|
40
|
+
* [Related Projects](#related-projects)
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## Installation
|
|
45
|
+
|
|
46
|
+
Add this line to your application's Gemfile:
|
|
47
|
+
|
|
48
|
+
```ruby
|
|
49
|
+
gem 'molecular'
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
And then execute:
|
|
53
|
+
|
|
54
|
+
$ bundle
|
|
55
|
+
|
|
56
|
+
Or install it yourself as:
|
|
57
|
+
|
|
58
|
+
$ gem install molecular
|
|
59
|
+
|
|
60
|
+
## Usage (Generic)
|
|
61
|
+
|
|
62
|
+
You can use Molecular with any CSS framework, in any Ruby app. In broad strokes,
|
|
63
|
+
here's how to style a button with Molecular, using example CSS classes from
|
|
64
|
+
[tachyons.css][button].
|
|
65
|
+
|
|
66
|
+
### Step 1: Create a Molecular::Compound
|
|
67
|
+
|
|
68
|
+
Somewhere in your app:
|
|
69
|
+
|
|
70
|
+
```ruby
|
|
71
|
+
Button = Molecular.compound(
|
|
72
|
+
color: 'white',
|
|
73
|
+
bg: 'bg-black',
|
|
74
|
+
base: 'f6 link dim ph3 pv2 mb2 dib',
|
|
75
|
+
)
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Step 2: Use your Compound in a view
|
|
79
|
+
|
|
80
|
+
Somewhere in an `erb` template:
|
|
81
|
+
|
|
82
|
+
```erb
|
|
83
|
+
<a class="<%= Button %>" href="#">
|
|
84
|
+
A styled button
|
|
85
|
+
</a>
|
|
86
|
+
<a class="<%= Button.(color: 'yellow', bg: 'bg-blue') %>" href="#">
|
|
87
|
+
A styled button that is yellow instead of white, with a blue background
|
|
88
|
+
</a>
|
|
89
|
+
|
|
90
|
+
<!-- renders as:
|
|
91
|
+
<a class="f6 link dim ph3 pv2 mb2 dib white bg-black" href="#">
|
|
92
|
+
A styled button
|
|
93
|
+
</a>
|
|
94
|
+
<a class="f6 link dim ph3 pv2 mb2 dib yellow bg-blue" href="#">
|
|
95
|
+
A styled button that is yellow instead of white, with a blue background
|
|
96
|
+
</a>
|
|
97
|
+
-->
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### Step 3 (optional): Tweak your style keys
|
|
101
|
+
|
|
102
|
+
The keys in the hash you pass to `Molecular.compound(styles)` determine which
|
|
103
|
+
CSS classes you can easily substitute later.
|
|
104
|
+
|
|
105
|
+
In the button from Step 2, it would be easy to swap `color` or `bg` for
|
|
106
|
+
different classes.
|
|
107
|
+
|
|
108
|
+
But if you wanted to replace any of the classes in the `base` key, you'd need to
|
|
109
|
+
rewrite the whole `base` key from scratch:
|
|
110
|
+
|
|
111
|
+
```erb
|
|
112
|
+
<a class="<%= Button.(base: 'f4 link dim ph3 pv2 mb2 dib') %>" href="#">
|
|
113
|
+
This was an awful lot of work just to change the font size :(
|
|
114
|
+
</a>
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
To make a more flexible Compound, use more granular styles hash:
|
|
118
|
+
|
|
119
|
+
```ruby
|
|
120
|
+
Button = Molecular.compound(
|
|
121
|
+
color: 'white',
|
|
122
|
+
bg: 'black',
|
|
123
|
+
size: 'f6',
|
|
124
|
+
hover: 'link dim',
|
|
125
|
+
padding: 'ph3 pv2',
|
|
126
|
+
margin: 'mb2'
|
|
127
|
+
display: 'dib',
|
|
128
|
+
)
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
```erb
|
|
132
|
+
<a class="<%= Button.(size: 'f3', padding: 'pa2', margin: nil) %>">
|
|
133
|
+
This button was easier to tweak
|
|
134
|
+
</a>
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
---
|
|
138
|
+
|
|
139
|
+
## Usage (framework-specific)
|
|
140
|
+
|
|
141
|
+
If you skipped straight to this section from the TOC, make sure to read the
|
|
142
|
+
[generic usage section](#usage-generic) first!
|
|
143
|
+
|
|
144
|
+
These examples use Molecular and [tachyons.css][button] to style a button in
|
|
145
|
+
Rails, Sinatra, and Roda.
|
|
146
|
+
|
|
147
|
+
* [Rails](#rails)
|
|
148
|
+
* [Sinatra](#sinatra)
|
|
149
|
+
* [Roda](#roda)
|
|
150
|
+
|
|
151
|
+
### Rails
|
|
152
|
+
|
|
153
|
+
**Step 1:**
|
|
154
|
+
|
|
155
|
+
Import tachyons.css into your asset pipeline, either directly or via the
|
|
156
|
+
[tachyons-rails gem][tachyons-gem]
|
|
157
|
+
|
|
158
|
+
**Step 2:**
|
|
159
|
+
|
|
160
|
+
Create a `StyleHelper` in `app/helpers/style_helper.rb` and build some
|
|
161
|
+
compounds:
|
|
162
|
+
|
|
163
|
+
```ruby
|
|
164
|
+
module StyleHelper
|
|
165
|
+
def ui_button
|
|
166
|
+
Molecular.compound(
|
|
167
|
+
color: 'white',
|
|
168
|
+
bg: 'black',
|
|
169
|
+
font_size: 'f6',
|
|
170
|
+
hover: 'link dim',
|
|
171
|
+
padding: 'ph3 pv2',
|
|
172
|
+
margin: 'mb2'
|
|
173
|
+
display: 'dib',
|
|
174
|
+
)
|
|
175
|
+
end
|
|
176
|
+
end
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
**Step 3:**
|
|
180
|
+
|
|
181
|
+
Use your StyleHelper methods in your views:
|
|
182
|
+
|
|
183
|
+
```erb
|
|
184
|
+
<!-- app/views/welcome/index.erb -->
|
|
185
|
+
<a class="<%= ui_button %>">A styled button</a>
|
|
186
|
+
<a class="<%= ui_button.(bg: 'bg-blue') %>">A blue button</a>
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
### Sinatra
|
|
190
|
+
|
|
191
|
+
**Step 1:**
|
|
192
|
+
|
|
193
|
+
Include the `tachyons.css` stylesheet somewhere in your app's layout.
|
|
194
|
+
|
|
195
|
+
**Step 2:**
|
|
196
|
+
|
|
197
|
+
Create a StyleHelper somewhere:
|
|
198
|
+
|
|
199
|
+
```ruby
|
|
200
|
+
module StyleHelper
|
|
201
|
+
def ui_button
|
|
202
|
+
Molecular.compound(
|
|
203
|
+
color: 'white',
|
|
204
|
+
bg: 'black',
|
|
205
|
+
font_size: 'f6',
|
|
206
|
+
hover: 'link dim',
|
|
207
|
+
padding: 'ph3 pv2',
|
|
208
|
+
margin: 'mb2'
|
|
209
|
+
display: 'dib',
|
|
210
|
+
)
|
|
211
|
+
end
|
|
212
|
+
end
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
**Step 3:**
|
|
216
|
+
|
|
217
|
+
Make your StyleHelper available to your app's helper methods:
|
|
218
|
+
|
|
219
|
+
```ruby
|
|
220
|
+
require_relative 'wherever_you_put_it/style_helper'
|
|
221
|
+
|
|
222
|
+
class MyApp < Sinatra::Application
|
|
223
|
+
helpers StyleHelper
|
|
224
|
+
|
|
225
|
+
get '/' do
|
|
226
|
+
erb :my_template
|
|
227
|
+
end
|
|
228
|
+
end
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
**Step 4:**
|
|
232
|
+
|
|
233
|
+
Use your StyleHelper methods in your views:
|
|
234
|
+
|
|
235
|
+
```erb
|
|
236
|
+
<!-- views/my_template.erb -->
|
|
237
|
+
<a class="<%= ui_button %>">A styled button</a>
|
|
238
|
+
<a class="<%= ui_button.(bg: 'bg-blue') %>">A blue button</a>
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
### Roda
|
|
242
|
+
|
|
243
|
+
**Step 1:**
|
|
244
|
+
|
|
245
|
+
Include the `tachyons.css` stylesheet somewhere in your app's layout.
|
|
246
|
+
|
|
247
|
+
**Step 2:**
|
|
248
|
+
|
|
249
|
+
Create a StyleHelper somewhere:
|
|
250
|
+
|
|
251
|
+
```ruby
|
|
252
|
+
module StyleHelper
|
|
253
|
+
def ui_button
|
|
254
|
+
Molecular.compound(
|
|
255
|
+
color: 'white',
|
|
256
|
+
bg: 'black',
|
|
257
|
+
font_size: 'f6',
|
|
258
|
+
hover: 'link dim',
|
|
259
|
+
padding: 'ph3 pv2',
|
|
260
|
+
margin: 'mb2'
|
|
261
|
+
display: 'dib',
|
|
262
|
+
)
|
|
263
|
+
end
|
|
264
|
+
end
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
**Step 3:**
|
|
268
|
+
|
|
269
|
+
Include StyleHelper in your app:
|
|
270
|
+
|
|
271
|
+
```ruby
|
|
272
|
+
require_relative 'wherever_you_put_it/style_helper'
|
|
273
|
+
|
|
274
|
+
class MyApp < Roda
|
|
275
|
+
plugin :render
|
|
276
|
+
include StyleHelper
|
|
277
|
+
|
|
278
|
+
route do |r|
|
|
279
|
+
get('/') { view('stylish') }
|
|
280
|
+
end
|
|
281
|
+
end
|
|
282
|
+
```
|
|
283
|
+
|
|
284
|
+
**Step 4:**
|
|
285
|
+
|
|
286
|
+
Use your StyleHelper methods in your views:
|
|
287
|
+
|
|
288
|
+
```erb
|
|
289
|
+
<!-- views/stylish.erb -->
|
|
290
|
+
<a class="<%= ui_button %>">A styled button</a>
|
|
291
|
+
<a class="<%= ui_button.(bg: 'bg-blue') %>">A blue button</a>
|
|
292
|
+
```
|
|
293
|
+
|
|
294
|
+
## Development
|
|
295
|
+
|
|
296
|
+
After checking out the repo, run `bin/setup` to install dependencies. Then, run
|
|
297
|
+
`rake spec` to run the tests. You can also run `bin/console` for an interactive
|
|
298
|
+
prompt that will allow you to experiment.
|
|
299
|
+
|
|
300
|
+
To install this gem onto your local machine, run `bundle exec rake install`. To
|
|
301
|
+
release a new version, update the version number in `version.rb`, and then run
|
|
302
|
+
`bundle exec rake release`, which will create a git tag for the version, push
|
|
303
|
+
git commits and tags, and push the `.gem` file to
|
|
304
|
+
[rubygems.org](https://rubygems.org).
|
|
305
|
+
|
|
306
|
+
## Contributing
|
|
307
|
+
|
|
308
|
+
Bug reports and pull requests are welcome on GitHub at
|
|
309
|
+
https://github.com/chrisfrank/molecular.
|
|
310
|
+
|
|
311
|
+
## Related Projects
|
|
312
|
+
|
|
313
|
+
* [Tachyons.css][tachyons]
|
|
314
|
+
* [Nanostyled (JS)](https://github.com/chrisfrank/nanostyled)
|
|
315
|
+
|
|
316
|
+
[tachyons]: http://tachyons.io/
|
|
317
|
+
[button]: http://tachyons.io/components/buttons/basic/index.html
|
|
318
|
+
[tachyons-rails]: https://github.com/maggy96/tachyons-rails
|
data/Rakefile
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
require "bundler/gem_tasks"
|
|
2
|
+
require "rspec/core/rake_task"
|
|
3
|
+
|
|
4
|
+
RSpec::Core::RakeTask.new(:spec)
|
|
5
|
+
|
|
6
|
+
task :rubocop do
|
|
7
|
+
system 'bundle exec rubocop lib spec'
|
|
8
|
+
end
|
|
9
|
+
|
|
10
|
+
task :reek do
|
|
11
|
+
system 'bundle exec reek'
|
|
12
|
+
end
|
|
13
|
+
|
|
14
|
+
task default: %i[rubocop reek spec]
|
data/bin/console
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
#!/usr/bin/env ruby
|
|
2
|
+
|
|
3
|
+
require "bundler/setup"
|
|
4
|
+
require "chemical"
|
|
5
|
+
|
|
6
|
+
# You can add fixtures and/or initialization code here to make experimenting
|
|
7
|
+
# with your gem easier. You can also use a different console, if you like.
|
|
8
|
+
|
|
9
|
+
# (If you use this, don't forget to add pry to your Gemfile!)
|
|
10
|
+
# require "pry"
|
|
11
|
+
# Pry.start
|
|
12
|
+
|
|
13
|
+
require "irb"
|
|
14
|
+
IRB.start(__FILE__)
|
data/bin/setup
ADDED
data/lib/molecular.rb
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
require_relative 'molecular/version'
|
|
2
|
+
require 'digest'
|
|
3
|
+
|
|
4
|
+
# Build reusable, tweakable UI elements out of atomic-CSS classes
|
|
5
|
+
module Molecular
|
|
6
|
+
module_function
|
|
7
|
+
# @example
|
|
8
|
+
# Button = Compound.new(bg: 'bg-blue', color: 'white')
|
|
9
|
+
# <button class="<%= Button %>">A blue button</button>
|
|
10
|
+
# <button class="<%= Button.(bg: 'bg-red') %>">A red button</button>
|
|
11
|
+
#
|
|
12
|
+
# @param [Hash] atoms:
|
|
13
|
+
# - values are the CSS class names that get chained
|
|
14
|
+
# - keys define the API you'll use to apply alternate classes
|
|
15
|
+
# @return [Molecular::Compound]
|
|
16
|
+
def compound(atoms)
|
|
17
|
+
Compound.new(atoms)
|
|
18
|
+
end
|
|
19
|
+
|
|
20
|
+
# Calling Molecular.compound returns an instance of Molecular::Compound
|
|
21
|
+
class Compound
|
|
22
|
+
def initialize(atoms)
|
|
23
|
+
@atoms = atoms
|
|
24
|
+
end
|
|
25
|
+
|
|
26
|
+
def to_s
|
|
27
|
+
@atoms.values.compact.join(' ')
|
|
28
|
+
end
|
|
29
|
+
|
|
30
|
+
def call(atoms)
|
|
31
|
+
self.class.new(@atoms.merge(atoms))
|
|
32
|
+
end
|
|
33
|
+
end
|
|
34
|
+
end
|
data/molecular.gemspec
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
lib = File.expand_path("../lib", __FILE__)
|
|
2
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
|
3
|
+
require "molecular/version"
|
|
4
|
+
|
|
5
|
+
Gem::Specification.new do |spec|
|
|
6
|
+
spec.name = "molecular"
|
|
7
|
+
spec.version = Molecular::VERSION
|
|
8
|
+
spec.authors = ["Chris Frank"]
|
|
9
|
+
spec.email = ["chris.frank@future.com"]
|
|
10
|
+
spec.licenses = ['MIT']
|
|
11
|
+
|
|
12
|
+
spec.summary = %q{Build reusable, tweakable UI elements out of atomic CSS classes, in any Ruby app.}
|
|
13
|
+
spec.homepage = "https://www.github.com/chrisfrank/molecular"
|
|
14
|
+
|
|
15
|
+
# Prevent pushing this gem to RubyGems.org. To allow pushes either set the 'allowed_push_host'
|
|
16
|
+
# to allow pushing to a single host or delete this section to allow pushing to any host.
|
|
17
|
+
if spec.respond_to?(:metadata)
|
|
18
|
+
spec.metadata["allowed_push_host"] = "https://rubygems.org"
|
|
19
|
+
else
|
|
20
|
+
raise "RubyGems 2.0 or newer is required to protect against " \
|
|
21
|
+
"public gem pushes."
|
|
22
|
+
end
|
|
23
|
+
|
|
24
|
+
# Specify which files should be added to the gem when it is released.
|
|
25
|
+
# The `git ls-files -z` loads the files in the RubyGem that have been added into git.
|
|
26
|
+
spec.files = Dir.chdir(File.expand_path('..', __FILE__)) do
|
|
27
|
+
`git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
|
|
28
|
+
end
|
|
29
|
+
spec.bindir = "exe"
|
|
30
|
+
spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
|
|
31
|
+
spec.require_paths = ["lib"]
|
|
32
|
+
|
|
33
|
+
spec.add_development_dependency "benchmark-ips", "~> 2.7"
|
|
34
|
+
spec.add_development_dependency "bundler", "~> 1.16"
|
|
35
|
+
spec.add_development_dependency "overcommit", "~> 0"
|
|
36
|
+
spec.add_development_dependency "rake", "~> 10.0"
|
|
37
|
+
spec.add_development_dependency "reek", "~> 5"
|
|
38
|
+
spec.add_development_dependency "rubocop", "~> 0.59"
|
|
39
|
+
spec.add_development_dependency "rspec", "~> 3.0"
|
|
40
|
+
end
|
metadata
ADDED
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: molecular
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: 0.1.0
|
|
5
|
+
platform: ruby
|
|
6
|
+
authors:
|
|
7
|
+
- Chris Frank
|
|
8
|
+
autorequire:
|
|
9
|
+
bindir: exe
|
|
10
|
+
cert_chain: []
|
|
11
|
+
date: 2018-10-10 00:00:00.000000000 Z
|
|
12
|
+
dependencies:
|
|
13
|
+
- !ruby/object:Gem::Dependency
|
|
14
|
+
name: benchmark-ips
|
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
|
16
|
+
requirements:
|
|
17
|
+
- - "~>"
|
|
18
|
+
- !ruby/object:Gem::Version
|
|
19
|
+
version: '2.7'
|
|
20
|
+
type: :development
|
|
21
|
+
prerelease: false
|
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
23
|
+
requirements:
|
|
24
|
+
- - "~>"
|
|
25
|
+
- !ruby/object:Gem::Version
|
|
26
|
+
version: '2.7'
|
|
27
|
+
- !ruby/object:Gem::Dependency
|
|
28
|
+
name: bundler
|
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
|
30
|
+
requirements:
|
|
31
|
+
- - "~>"
|
|
32
|
+
- !ruby/object:Gem::Version
|
|
33
|
+
version: '1.16'
|
|
34
|
+
type: :development
|
|
35
|
+
prerelease: false
|
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
37
|
+
requirements:
|
|
38
|
+
- - "~>"
|
|
39
|
+
- !ruby/object:Gem::Version
|
|
40
|
+
version: '1.16'
|
|
41
|
+
- !ruby/object:Gem::Dependency
|
|
42
|
+
name: overcommit
|
|
43
|
+
requirement: !ruby/object:Gem::Requirement
|
|
44
|
+
requirements:
|
|
45
|
+
- - "~>"
|
|
46
|
+
- !ruby/object:Gem::Version
|
|
47
|
+
version: '0'
|
|
48
|
+
type: :development
|
|
49
|
+
prerelease: false
|
|
50
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
51
|
+
requirements:
|
|
52
|
+
- - "~>"
|
|
53
|
+
- !ruby/object:Gem::Version
|
|
54
|
+
version: '0'
|
|
55
|
+
- !ruby/object:Gem::Dependency
|
|
56
|
+
name: rake
|
|
57
|
+
requirement: !ruby/object:Gem::Requirement
|
|
58
|
+
requirements:
|
|
59
|
+
- - "~>"
|
|
60
|
+
- !ruby/object:Gem::Version
|
|
61
|
+
version: '10.0'
|
|
62
|
+
type: :development
|
|
63
|
+
prerelease: false
|
|
64
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
65
|
+
requirements:
|
|
66
|
+
- - "~>"
|
|
67
|
+
- !ruby/object:Gem::Version
|
|
68
|
+
version: '10.0'
|
|
69
|
+
- !ruby/object:Gem::Dependency
|
|
70
|
+
name: reek
|
|
71
|
+
requirement: !ruby/object:Gem::Requirement
|
|
72
|
+
requirements:
|
|
73
|
+
- - "~>"
|
|
74
|
+
- !ruby/object:Gem::Version
|
|
75
|
+
version: '5'
|
|
76
|
+
type: :development
|
|
77
|
+
prerelease: false
|
|
78
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
79
|
+
requirements:
|
|
80
|
+
- - "~>"
|
|
81
|
+
- !ruby/object:Gem::Version
|
|
82
|
+
version: '5'
|
|
83
|
+
- !ruby/object:Gem::Dependency
|
|
84
|
+
name: rubocop
|
|
85
|
+
requirement: !ruby/object:Gem::Requirement
|
|
86
|
+
requirements:
|
|
87
|
+
- - "~>"
|
|
88
|
+
- !ruby/object:Gem::Version
|
|
89
|
+
version: '0.59'
|
|
90
|
+
type: :development
|
|
91
|
+
prerelease: false
|
|
92
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
93
|
+
requirements:
|
|
94
|
+
- - "~>"
|
|
95
|
+
- !ruby/object:Gem::Version
|
|
96
|
+
version: '0.59'
|
|
97
|
+
- !ruby/object:Gem::Dependency
|
|
98
|
+
name: rspec
|
|
99
|
+
requirement: !ruby/object:Gem::Requirement
|
|
100
|
+
requirements:
|
|
101
|
+
- - "~>"
|
|
102
|
+
- !ruby/object:Gem::Version
|
|
103
|
+
version: '3.0'
|
|
104
|
+
type: :development
|
|
105
|
+
prerelease: false
|
|
106
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
107
|
+
requirements:
|
|
108
|
+
- - "~>"
|
|
109
|
+
- !ruby/object:Gem::Version
|
|
110
|
+
version: '3.0'
|
|
111
|
+
description:
|
|
112
|
+
email:
|
|
113
|
+
- chris.frank@future.com
|
|
114
|
+
executables: []
|
|
115
|
+
extensions: []
|
|
116
|
+
extra_rdoc_files: []
|
|
117
|
+
files:
|
|
118
|
+
- ".gitignore"
|
|
119
|
+
- ".overcommit.yml"
|
|
120
|
+
- ".reek.yml"
|
|
121
|
+
- ".rspec"
|
|
122
|
+
- ".rubocop.yml"
|
|
123
|
+
- ".travis.yml"
|
|
124
|
+
- Gemfile
|
|
125
|
+
- Gemfile.lock
|
|
126
|
+
- README.md
|
|
127
|
+
- Rakefile
|
|
128
|
+
- bin/console
|
|
129
|
+
- bin/setup
|
|
130
|
+
- lib/molecular.rb
|
|
131
|
+
- lib/molecular/version.rb
|
|
132
|
+
- molecular.gemspec
|
|
133
|
+
homepage: https://www.github.com/chrisfrank/molecular
|
|
134
|
+
licenses:
|
|
135
|
+
- MIT
|
|
136
|
+
metadata:
|
|
137
|
+
allowed_push_host: https://rubygems.org
|
|
138
|
+
post_install_message:
|
|
139
|
+
rdoc_options: []
|
|
140
|
+
require_paths:
|
|
141
|
+
- lib
|
|
142
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
143
|
+
requirements:
|
|
144
|
+
- - ">="
|
|
145
|
+
- !ruby/object:Gem::Version
|
|
146
|
+
version: '0'
|
|
147
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
148
|
+
requirements:
|
|
149
|
+
- - ">="
|
|
150
|
+
- !ruby/object:Gem::Version
|
|
151
|
+
version: '0'
|
|
152
|
+
requirements: []
|
|
153
|
+
rubyforge_project:
|
|
154
|
+
rubygems_version: 2.7.6
|
|
155
|
+
signing_key:
|
|
156
|
+
specification_version: 4
|
|
157
|
+
summary: Build reusable, tweakable UI elements out of atomic CSS classes, in any Ruby
|
|
158
|
+
app.
|
|
159
|
+
test_files: []
|