molecular 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- 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: []
|