blot 1.0.0 → 1.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 +4 -4
- data/README.md +721 -2
- data/lib/blot/helpers.rb +2 -0
- data/lib/blot/helpers/grid.rb +12 -5
- data/lib/blot/helpers/layout.rb +43 -0
- data/lib/blot/version.rb +1 -1
- data/spec/blot/helpers/layout_spec.rb +59 -0
- data/spec/blot/helpers_spec.rb +1 -0
- metadata +5 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 5608258c3420bbbd5481fa9530555413c9d94eea
|
|
4
|
+
data.tar.gz: 306d4d0b80889f35f324d33a60637a3b7edfb51d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 90d56001fa4efdfec6abab4c8bc0ff321cdcf91ec3ef1beeb998a0ba2610571aca933b84f61b0eacb976fa3a735a256c6ea3712528ae5390b1d7798bd4873616
|
|
7
|
+
data.tar.gz: c50196381ec5957b5d10360642c8f25248d9e1eb7e9b9ae07f0d8e98c63d3786266f2616785384600cb126fcd2e9fb0cd9443002a7bdf01fbb78144587ca8bac
|
data/README.md
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
# Blot
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Tired of all those tables in those emails?
|
|
4
|
+
Blot is a DSL that lets you create them with ease and optimize with the Ink email framework.
|
|
4
5
|
|
|
5
6
|
## Installation
|
|
6
7
|
|
|
@@ -18,7 +19,725 @@ Or install it yourself as:
|
|
|
18
19
|
|
|
19
20
|
## Usage
|
|
20
21
|
|
|
21
|
-
|
|
22
|
+
### Layout
|
|
23
|
+
|
|
24
|
+
The layout is used to set up a boilerplate for you. Styles can be added to the header to make even more powerful.
|
|
25
|
+
|
|
26
|
+
#### Boilerplate Layout
|
|
27
|
+
|
|
28
|
+
This is the simpliest layout that you can create. Notice that it has no styles inside of it. Its just a raw boilerplate for you to work with.
|
|
29
|
+
|
|
30
|
+
```ruby
|
|
31
|
+
layout { '<!-- Email Content -->' }
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
36
|
+
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
37
|
+
<head>
|
|
38
|
+
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
|
|
39
|
+
<meta content="width=device-width" name="viewport" />
|
|
40
|
+
</head>
|
|
41
|
+
<body>
|
|
42
|
+
<table class="body">
|
|
43
|
+
<tr>
|
|
44
|
+
<td align="center" class="center" valign="top">
|
|
45
|
+
<center>
|
|
46
|
+
|
|
47
|
+
<!-- Email Content -->
|
|
48
|
+
|
|
49
|
+
</center>
|
|
50
|
+
</td>
|
|
51
|
+
</tr>
|
|
52
|
+
</table>
|
|
53
|
+
</body>
|
|
54
|
+
</html>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
#### Styled Layout
|
|
58
|
+
|
|
59
|
+
Most developers want to style their emails. The `ink` option is used to specify where your `ink.css` file is located. This is usually in the vendor folder, but Rails will search for it for you. The `styles` option is used for you identify the custom styles that you use to modify Ink.
|
|
60
|
+
|
|
61
|
+
```ruby
|
|
62
|
+
layout(ink: 'ink.css', styles: ['typography.css', 'colors.css'])
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
```html
|
|
66
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
67
|
+
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
68
|
+
<head>
|
|
69
|
+
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
|
|
70
|
+
<meta content="width=device-width" name="viewport" />
|
|
71
|
+
<style rel="text/css">
|
|
72
|
+
Ink Styles!
|
|
73
|
+
</style>
|
|
74
|
+
<style rel="text/css">
|
|
75
|
+
Typography Styles!
|
|
76
|
+
Color Styles!
|
|
77
|
+
</style>
|
|
78
|
+
</head>
|
|
79
|
+
<body>
|
|
80
|
+
<table class="body">
|
|
81
|
+
<tr>
|
|
82
|
+
<td align="center" class="center" valign="top">
|
|
83
|
+
<center></center>
|
|
84
|
+
</td>
|
|
85
|
+
</tr>
|
|
86
|
+
</table>
|
|
87
|
+
</body>
|
|
88
|
+
</html>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### Grid
|
|
92
|
+
|
|
93
|
+
The grid in Blot matches Ink very well. It is able to produce rows, sub-grids, columns, block-grids, and panels. Here's some examples to learn from:
|
|
94
|
+
|
|
95
|
+
#### Rendering Two Rows: Twelve and Six by Six
|
|
96
|
+
|
|
97
|
+
```ruby
|
|
98
|
+
container do
|
|
99
|
+
row do
|
|
100
|
+
wrapper(class: 'wrapper last') do
|
|
101
|
+
columns(:twelve, class: 'panel') { '.twelve.columns' }
|
|
102
|
+
end
|
|
103
|
+
end
|
|
104
|
+
row do
|
|
105
|
+
wrapper(class: 'wrapper') do
|
|
106
|
+
columns(:six, class: 'panel') { '.six.columns' }
|
|
107
|
+
end
|
|
108
|
+
wrapper(class: 'wrapper last') do
|
|
109
|
+
columns(:six, class: 'panel') { '.six.columns' }
|
|
110
|
+
end
|
|
111
|
+
end
|
|
112
|
+
end
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
```html
|
|
116
|
+
<table class="container">
|
|
117
|
+
<tr>
|
|
118
|
+
<td>
|
|
119
|
+
|
|
120
|
+
<table class="row">
|
|
121
|
+
<tr>
|
|
122
|
+
<td class="wrapper last">
|
|
123
|
+
|
|
124
|
+
<table class="twelve columns">
|
|
125
|
+
<tr>
|
|
126
|
+
<td class="panel">.twelve.columns</td>
|
|
127
|
+
<td class="expander"></td>
|
|
128
|
+
</tr>
|
|
129
|
+
</table>
|
|
130
|
+
|
|
131
|
+
</td>
|
|
132
|
+
</tr>
|
|
133
|
+
</table>
|
|
134
|
+
|
|
135
|
+
<table class="row">
|
|
136
|
+
<tr>
|
|
137
|
+
<td class="wrapper">
|
|
138
|
+
|
|
139
|
+
<table class="six columns">
|
|
140
|
+
<tr>
|
|
141
|
+
<td class="panel">.six.columns</td>
|
|
142
|
+
<td class="expander"></td>
|
|
143
|
+
</tr>
|
|
144
|
+
</table>
|
|
145
|
+
|
|
146
|
+
</td>
|
|
147
|
+
<td class="wrapper last">
|
|
148
|
+
|
|
149
|
+
<table class="six columns">
|
|
150
|
+
<tr>
|
|
151
|
+
<td class="panel">.six.columns</td>
|
|
152
|
+
<td class="expander"></td>
|
|
153
|
+
</tr>
|
|
154
|
+
</table>
|
|
155
|
+
|
|
156
|
+
</td>
|
|
157
|
+
</tr>
|
|
158
|
+
</table>
|
|
159
|
+
|
|
160
|
+
</td>
|
|
161
|
+
</tr>
|
|
162
|
+
</table>
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
#### Render Centered Content
|
|
166
|
+
|
|
167
|
+
```ruby
|
|
168
|
+
row do
|
|
169
|
+
wrapper(class: 'wrapper') do
|
|
170
|
+
columns(:six, class: 'center panel') { 'Centered content' }
|
|
171
|
+
end
|
|
172
|
+
wrapper(class: 'wrapper last') do
|
|
173
|
+
columns(:six, class: 'center panel') do
|
|
174
|
+
image_tag 'http://placehold.it/125x125&text=Centered%20Image', class: 'center', alt: 'centered image'
|
|
175
|
+
end
|
|
176
|
+
end
|
|
177
|
+
end
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
```html
|
|
181
|
+
<table class="row">
|
|
182
|
+
<tr>
|
|
183
|
+
<td class="wrapper">
|
|
184
|
+
|
|
185
|
+
<table class="six columns">
|
|
186
|
+
<tr>
|
|
187
|
+
<td class="center panel">
|
|
188
|
+
<center>Centered content</center>
|
|
189
|
+
</td>
|
|
190
|
+
<td class="expander"></td>
|
|
191
|
+
</tr>
|
|
192
|
+
</table>
|
|
193
|
+
|
|
194
|
+
</td>
|
|
195
|
+
<td class="wrapper last">
|
|
196
|
+
|
|
197
|
+
<table class="six columns">
|
|
198
|
+
<tr>
|
|
199
|
+
<td class="center panel">
|
|
200
|
+
<center><img alt="centered image" class="center" src="http://placehold.it/125x125&text=Centered%20Image" /></center>
|
|
201
|
+
</td>
|
|
202
|
+
<td class="expander"></td>
|
|
203
|
+
</tr>
|
|
204
|
+
</table>
|
|
205
|
+
|
|
206
|
+
</td>
|
|
207
|
+
</tr>
|
|
208
|
+
</table>
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
#### Render Offset Content
|
|
212
|
+
|
|
213
|
+
```ruby
|
|
214
|
+
row do
|
|
215
|
+
wrapper(class: 'wrapper offset-by-four') do
|
|
216
|
+
columns(:eight, class: 'panel') { 'Offset Content' }
|
|
217
|
+
end
|
|
218
|
+
end
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
```html
|
|
222
|
+
<table class="row">
|
|
223
|
+
<tr>
|
|
224
|
+
<td class="wrapper offset-by-four">
|
|
225
|
+
|
|
226
|
+
<table class="eight columns">
|
|
227
|
+
<tr>
|
|
228
|
+
<td class="panel">Offset Content</td>
|
|
229
|
+
<td class="expander"></td>
|
|
230
|
+
</tr>
|
|
231
|
+
</table>
|
|
232
|
+
|
|
233
|
+
</td>
|
|
234
|
+
</tr>
|
|
235
|
+
</table>
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
#### Render Text-Padding
|
|
239
|
+
|
|
240
|
+
```ruby
|
|
241
|
+
row do
|
|
242
|
+
wrapper(class: 'wrapper') do
|
|
243
|
+
columns(:four, class: 'left-text-pad') { 'Text' }
|
|
244
|
+
end
|
|
245
|
+
wrapper(class: 'wrapper') do
|
|
246
|
+
columns(:four) { 'Text' }
|
|
247
|
+
end
|
|
248
|
+
wrapper(class: 'wrapper last') do
|
|
249
|
+
columns(:four, class: 'right-text-pad') { 'Text' }
|
|
250
|
+
end
|
|
251
|
+
end
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
```html
|
|
255
|
+
<table class="row">
|
|
256
|
+
<tr>
|
|
257
|
+
<td class="wrapper">
|
|
258
|
+
|
|
259
|
+
<table class="four columns">
|
|
260
|
+
<tr>
|
|
261
|
+
<td class="left-text-pad">Text</td>
|
|
262
|
+
<td class="expander"></td>
|
|
263
|
+
</tr>
|
|
264
|
+
</table>
|
|
265
|
+
|
|
266
|
+
</td>
|
|
267
|
+
<td class="wrapper">
|
|
268
|
+
|
|
269
|
+
<table class="four columns">
|
|
270
|
+
<tr>
|
|
271
|
+
<td>Text</td>
|
|
272
|
+
<td class="expander"></td>
|
|
273
|
+
</tr>
|
|
274
|
+
</table>
|
|
275
|
+
|
|
276
|
+
</td>
|
|
277
|
+
<td class="wrapper last">
|
|
278
|
+
|
|
279
|
+
<table class="four columns">
|
|
280
|
+
<tr>
|
|
281
|
+
<td class="right-text-pad">Text</td>
|
|
282
|
+
<td class="expander"></td>
|
|
283
|
+
</tr>
|
|
284
|
+
</table>
|
|
285
|
+
|
|
286
|
+
</td>
|
|
287
|
+
</tr>
|
|
288
|
+
</table>
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
#### Render Full-Width Rows
|
|
292
|
+
|
|
293
|
+
```ruby
|
|
294
|
+
row do
|
|
295
|
+
wrapper(class: 'center', align: 'center') do
|
|
296
|
+
container(class: 'wrapper last') do
|
|
297
|
+
columns(:twelve) { 'Content' }
|
|
298
|
+
end
|
|
299
|
+
end
|
|
300
|
+
end
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
```html
|
|
304
|
+
<table class="row">
|
|
305
|
+
<tr>
|
|
306
|
+
<td align="center" class="center">
|
|
307
|
+
<center>
|
|
308
|
+
|
|
309
|
+
<table class="container">
|
|
310
|
+
<tr>
|
|
311
|
+
<td class="wrapper last">
|
|
312
|
+
|
|
313
|
+
<table class="twelve columns">
|
|
314
|
+
<tr>
|
|
315
|
+
<td>Content</td>
|
|
316
|
+
<td class="expander"></td>
|
|
317
|
+
</tr>
|
|
318
|
+
</table>
|
|
319
|
+
|
|
320
|
+
</td>
|
|
321
|
+
</tr>
|
|
322
|
+
</table>
|
|
323
|
+
|
|
324
|
+
</center>
|
|
325
|
+
</td>
|
|
326
|
+
</tr>
|
|
327
|
+
</table>
|
|
328
|
+
```
|
|
329
|
+
|
|
330
|
+
#### Render a Sub-Grid
|
|
331
|
+
|
|
332
|
+
```ruby
|
|
333
|
+
row do
|
|
334
|
+
wrapper(class: 'wrapper') do
|
|
335
|
+
columns(:eight, sub_columns: true) do
|
|
336
|
+
sub_columns(:eight) { '.eight.sub-columns' } +
|
|
337
|
+
sub_columns(:four, class: 'last') { '.four.sub-columns' }
|
|
338
|
+
end
|
|
339
|
+
end
|
|
340
|
+
wrapper(class: 'wrapper last') do
|
|
341
|
+
columns(:four) { '.four.columns' }
|
|
342
|
+
end
|
|
343
|
+
end
|
|
344
|
+
```
|
|
345
|
+
|
|
346
|
+
```html
|
|
347
|
+
<table class="row">
|
|
348
|
+
<tr>
|
|
349
|
+
<td class="wrapper">
|
|
350
|
+
|
|
351
|
+
<table class="eight columns">
|
|
352
|
+
<tr>
|
|
353
|
+
<td class="eight sub-columns">.eight.sub-columns</td>
|
|
354
|
+
<td class="four sub-columns last">.four.sub-columns</td>
|
|
355
|
+
<td class="expander"></td>
|
|
356
|
+
</tr>
|
|
357
|
+
</table>
|
|
358
|
+
|
|
359
|
+
</td>
|
|
360
|
+
<td class="wrapper last">
|
|
361
|
+
|
|
362
|
+
<table class="four columns">
|
|
363
|
+
<tr>
|
|
364
|
+
<td>.four.columns</td>
|
|
365
|
+
<td class="expander"></td>
|
|
366
|
+
</tr>
|
|
367
|
+
</table>
|
|
368
|
+
|
|
369
|
+
</td>
|
|
370
|
+
</tr>
|
|
371
|
+
</table>
|
|
372
|
+
```
|
|
373
|
+
|
|
374
|
+
#### Render a Block-Grid
|
|
375
|
+
|
|
376
|
+
```ruby
|
|
377
|
+
container do
|
|
378
|
+
block_grid(up: :two) do
|
|
379
|
+
wrapper { 'Column #1' }
|
|
380
|
+
wrapper { 'Column #2' }
|
|
381
|
+
end
|
|
382
|
+
end
|
|
383
|
+
```
|
|
384
|
+
|
|
385
|
+
```html
|
|
386
|
+
<table class="container">
|
|
387
|
+
<tr>
|
|
388
|
+
<td>
|
|
389
|
+
|
|
390
|
+
<table class="block-grid two-up">
|
|
391
|
+
<tr>
|
|
392
|
+
<td>Column #1</td>
|
|
393
|
+
<td>Column #2</td>
|
|
394
|
+
</tr>
|
|
395
|
+
</table>
|
|
396
|
+
|
|
397
|
+
</td>
|
|
398
|
+
</tr>
|
|
399
|
+
</table>
|
|
400
|
+
```
|
|
401
|
+
|
|
402
|
+
#### Render a Sidebar
|
|
403
|
+
|
|
404
|
+
```ruby
|
|
405
|
+
row do
|
|
406
|
+
wrapper(class: 'wrapper') do
|
|
407
|
+
columns(:eight) { 'Main content' }
|
|
408
|
+
end
|
|
409
|
+
wrapper(class: 'wrapper last') do
|
|
410
|
+
columns(:four, class: 'panel') { 'Panel content' }
|
|
411
|
+
end
|
|
412
|
+
end
|
|
413
|
+
```
|
|
414
|
+
|
|
415
|
+
```html
|
|
416
|
+
<table class="row">
|
|
417
|
+
<tr>
|
|
418
|
+
<td class="wrapper">
|
|
419
|
+
|
|
420
|
+
<table class="eight columns">
|
|
421
|
+
<tr>
|
|
422
|
+
<td>Main content</td>
|
|
423
|
+
<td class="expander"></td>
|
|
424
|
+
</tr>
|
|
425
|
+
</table>
|
|
426
|
+
|
|
427
|
+
</td>
|
|
428
|
+
<td class="wrapper last">
|
|
429
|
+
|
|
430
|
+
<table class="four columns">
|
|
431
|
+
<tr>
|
|
432
|
+
<td class="panel">Panel content</td>
|
|
433
|
+
<td class="expander"></td>
|
|
434
|
+
</tr>
|
|
435
|
+
</table>
|
|
436
|
+
|
|
437
|
+
</td>
|
|
438
|
+
</tr>
|
|
439
|
+
</table>
|
|
440
|
+
```
|
|
441
|
+
|
|
442
|
+
#### Render a Panel with a Sub-Grid
|
|
443
|
+
|
|
444
|
+
```ruby
|
|
445
|
+
columns(:twelve, class: 'panel sub-grid', sub_columns: true) do
|
|
446
|
+
panel_sub_grid do
|
|
447
|
+
sub_columns(:six) { 'Left Sub-Column' }
|
|
448
|
+
sub_columns(:six) { 'Right Sub-Column' }
|
|
449
|
+
end
|
|
450
|
+
end
|
|
451
|
+
```
|
|
452
|
+
|
|
453
|
+
```html
|
|
454
|
+
<table class="twelve columns">
|
|
455
|
+
<tr>
|
|
456
|
+
<td class="panel sub-grid">
|
|
457
|
+
|
|
458
|
+
<table>
|
|
459
|
+
<tr>
|
|
460
|
+
<td class="six sub-columns">Left Sub-Column</td>
|
|
461
|
+
<td class="six sub-columns">Right Sub-Column</td>
|
|
462
|
+
</tr>
|
|
463
|
+
</table>
|
|
464
|
+
|
|
465
|
+
</td>
|
|
466
|
+
<td class="expander"></td>
|
|
467
|
+
</tr>
|
|
468
|
+
</table>
|
|
469
|
+
```
|
|
470
|
+
|
|
471
|
+
### Visibility
|
|
472
|
+
|
|
473
|
+
The visibility mimics Ink's vocabulary for showing and hiding tags on small devises.
|
|
474
|
+
|
|
475
|
+
#### Show for Small
|
|
476
|
+
|
|
477
|
+
```ruby
|
|
478
|
+
show_for_small
|
|
479
|
+
```
|
|
480
|
+
|
|
481
|
+
```html
|
|
482
|
+
<!--[if !mso]><!-- -->
|
|
483
|
+
<table class="show-for-small">
|
|
484
|
+
<tr>
|
|
485
|
+
<td></td>
|
|
486
|
+
</tr>
|
|
487
|
+
</table>
|
|
488
|
+
<!--<![endif]-->
|
|
489
|
+
```
|
|
490
|
+
|
|
491
|
+
#### Hide for Small
|
|
492
|
+
|
|
493
|
+
```ruby
|
|
494
|
+
hide_for_small
|
|
495
|
+
```
|
|
496
|
+
|
|
497
|
+
```html
|
|
498
|
+
<table class="hide-for-small">
|
|
499
|
+
<tr>
|
|
500
|
+
<td></td>
|
|
501
|
+
</tr>
|
|
502
|
+
</table>
|
|
503
|
+
```
|
|
504
|
+
|
|
505
|
+
#### Render Visibility for Columns
|
|
506
|
+
|
|
507
|
+
```ruby
|
|
508
|
+
row do
|
|
509
|
+
wrapper(class: 'wrapper last') do
|
|
510
|
+
show_for_small do
|
|
511
|
+
columns(:twelve, class: 'panel') { '.show-for-small' }
|
|
512
|
+
end
|
|
513
|
+
hide_for_small do
|
|
514
|
+
columns(:twelve, class: 'panel') { '.hide-for-small' }
|
|
515
|
+
end
|
|
516
|
+
end
|
|
517
|
+
end
|
|
518
|
+
```
|
|
519
|
+
|
|
520
|
+
```html
|
|
521
|
+
<table class="row">
|
|
522
|
+
<tr>
|
|
523
|
+
<td class="wrapper last">
|
|
524
|
+
|
|
525
|
+
<!--[if !mso]><!-- -->
|
|
526
|
+
<table class="show-for-small">
|
|
527
|
+
<tr>
|
|
528
|
+
<td>
|
|
529
|
+
|
|
530
|
+
<table class="twelve columns">
|
|
531
|
+
<tr>
|
|
532
|
+
<td class="panel">.show-for-small</td>
|
|
533
|
+
<td class="expander"></td>
|
|
534
|
+
</tr>
|
|
535
|
+
</table>
|
|
536
|
+
|
|
537
|
+
</td>
|
|
538
|
+
</tr>
|
|
539
|
+
</table>
|
|
540
|
+
<!--<![endif]-->
|
|
541
|
+
|
|
542
|
+
<table class="hide-for-small">
|
|
543
|
+
<tr>
|
|
544
|
+
<td>
|
|
545
|
+
|
|
546
|
+
<table class="twelve columns">
|
|
547
|
+
<tr>
|
|
548
|
+
<td class="panel">.hide-for-small</td>
|
|
549
|
+
<td class="expander"></td>
|
|
550
|
+
</tr>
|
|
551
|
+
</table>
|
|
552
|
+
|
|
553
|
+
</td>
|
|
554
|
+
</tr>
|
|
555
|
+
</table>
|
|
556
|
+
|
|
557
|
+
</td>
|
|
558
|
+
</tr>
|
|
559
|
+
</table>
|
|
560
|
+
```
|
|
561
|
+
|
|
562
|
+
### Buttons
|
|
563
|
+
|
|
564
|
+
The buttons in Blot are rendered through the simple `button` method. Examples below:
|
|
565
|
+
|
|
566
|
+
#### Simple Button
|
|
567
|
+
|
|
568
|
+
```ruby
|
|
569
|
+
button 'Button Label', '#', size: :button
|
|
570
|
+
```
|
|
571
|
+
|
|
572
|
+
```html
|
|
573
|
+
<table class="button">
|
|
574
|
+
<tr>
|
|
575
|
+
<td>
|
|
576
|
+
<a href="#">Button Label</a>
|
|
577
|
+
</td>
|
|
578
|
+
</tr>
|
|
579
|
+
</table>
|
|
580
|
+
```
|
|
581
|
+
|
|
582
|
+
#### Tiny Button
|
|
583
|
+
|
|
584
|
+
```ruby
|
|
585
|
+
button 'Button Label', '#', size: :tiny
|
|
586
|
+
```
|
|
587
|
+
|
|
588
|
+
```html
|
|
589
|
+
<table class="tiny-button">
|
|
590
|
+
<tr>
|
|
591
|
+
<td>
|
|
592
|
+
<a href="#">Button Label</a>
|
|
593
|
+
</td>
|
|
594
|
+
</tr>
|
|
595
|
+
</table>
|
|
596
|
+
```
|
|
597
|
+
|
|
598
|
+
#### Small Button
|
|
599
|
+
|
|
600
|
+
```ruby
|
|
601
|
+
button 'Button Label', '#', size: :small
|
|
602
|
+
```
|
|
603
|
+
|
|
604
|
+
```html
|
|
605
|
+
<table class="small-button">
|
|
606
|
+
<tr>
|
|
607
|
+
<td>
|
|
608
|
+
<a href="#">Button Label</a>
|
|
609
|
+
</td>
|
|
610
|
+
</tr>
|
|
611
|
+
</table>
|
|
612
|
+
```
|
|
613
|
+
|
|
614
|
+
#### Medium Button
|
|
615
|
+
|
|
616
|
+
```ruby
|
|
617
|
+
button 'Button Label', '#', size: :medium
|
|
618
|
+
```
|
|
619
|
+
|
|
620
|
+
```html
|
|
621
|
+
<table class="medium-button">
|
|
622
|
+
<tr>
|
|
623
|
+
<td>
|
|
624
|
+
<a href="#">Button Label</a>
|
|
625
|
+
</td>
|
|
626
|
+
</tr>
|
|
627
|
+
</table>
|
|
628
|
+
```
|
|
629
|
+
|
|
630
|
+
#### Large Button
|
|
631
|
+
|
|
632
|
+
```ruby
|
|
633
|
+
button 'Button Label', '#', size: :large
|
|
634
|
+
```
|
|
635
|
+
|
|
636
|
+
```html
|
|
637
|
+
<table class="large-button">
|
|
638
|
+
<tr>
|
|
639
|
+
<td>
|
|
640
|
+
<a href="#">Button Label</a>
|
|
641
|
+
</td>
|
|
642
|
+
</tr>
|
|
643
|
+
</table>
|
|
644
|
+
```
|
|
645
|
+
|
|
646
|
+
#### Primary Button
|
|
647
|
+
|
|
648
|
+
```ruby
|
|
649
|
+
button 'Button Label', '#', size: :button, color: :primary
|
|
650
|
+
```
|
|
651
|
+
|
|
652
|
+
```html
|
|
653
|
+
<table class="button primary">
|
|
654
|
+
<tr>
|
|
655
|
+
<td>
|
|
656
|
+
<a href="#">Button Label</a>
|
|
657
|
+
</td>
|
|
658
|
+
</tr>
|
|
659
|
+
</table>
|
|
660
|
+
```
|
|
661
|
+
|
|
662
|
+
#### Secondary Button
|
|
663
|
+
|
|
664
|
+
```ruby
|
|
665
|
+
button 'Button Label', '#', size: :button, color: :secondary
|
|
666
|
+
```
|
|
667
|
+
|
|
668
|
+
```html
|
|
669
|
+
<table class="button secondary">
|
|
670
|
+
<tr>
|
|
671
|
+
<td>
|
|
672
|
+
<a href="#">Button Label</a>
|
|
673
|
+
</td>
|
|
674
|
+
</tr>
|
|
675
|
+
</table>
|
|
676
|
+
```
|
|
677
|
+
|
|
678
|
+
#### Alert Button
|
|
679
|
+
|
|
680
|
+
```ruby
|
|
681
|
+
button 'Button Label', '#', size: :button, color: :alert
|
|
682
|
+
```
|
|
683
|
+
|
|
684
|
+
```html
|
|
685
|
+
<table class="button alert">
|
|
686
|
+
<tr>
|
|
687
|
+
<td>
|
|
688
|
+
<a href="#">Button Label</a>
|
|
689
|
+
</td>
|
|
690
|
+
</tr>
|
|
691
|
+
</table>
|
|
692
|
+
```
|
|
693
|
+
|
|
694
|
+
#### Success Button
|
|
695
|
+
|
|
696
|
+
```ruby
|
|
697
|
+
button 'Button Label', '#', size: :button, color: :success
|
|
698
|
+
```
|
|
699
|
+
|
|
700
|
+
```html
|
|
701
|
+
<table class="button success">
|
|
702
|
+
<tr>
|
|
703
|
+
<td>
|
|
704
|
+
<a href="#">Button Label</a>
|
|
705
|
+
</td>
|
|
706
|
+
</tr>
|
|
707
|
+
</table>
|
|
708
|
+
```
|
|
709
|
+
|
|
710
|
+
#### Radius Button
|
|
711
|
+
|
|
712
|
+
```ruby
|
|
713
|
+
button 'Button Label', '#', size: :button, radius: :radius
|
|
714
|
+
```
|
|
715
|
+
|
|
716
|
+
```html
|
|
717
|
+
<table class="button radius">
|
|
718
|
+
<tr>
|
|
719
|
+
<td>
|
|
720
|
+
<a href="#">Button Label</a>
|
|
721
|
+
</td>
|
|
722
|
+
</tr>
|
|
723
|
+
</table>
|
|
724
|
+
```
|
|
725
|
+
|
|
726
|
+
#### Round Button
|
|
727
|
+
|
|
728
|
+
```ruby
|
|
729
|
+
button 'Button Label', '#', size: :button, radius: :round
|
|
730
|
+
```
|
|
731
|
+
|
|
732
|
+
```html
|
|
733
|
+
<table class="button round">
|
|
734
|
+
<tr>
|
|
735
|
+
<td>
|
|
736
|
+
<a href="#">Button Label</a>
|
|
737
|
+
</td>
|
|
738
|
+
</tr>
|
|
739
|
+
</table>
|
|
740
|
+
```
|
|
22
741
|
|
|
23
742
|
## Contributing
|
|
24
743
|
|
data/lib/blot/helpers.rb
CHANGED
data/lib/blot/helpers/grid.rb
CHANGED
|
@@ -39,12 +39,15 @@ module Blot
|
|
|
39
39
|
def columns(width, options={})
|
|
40
40
|
content_tag :table, class: "#{width} columns" do
|
|
41
41
|
content_tag :tr do
|
|
42
|
-
if options[:sub_columns]
|
|
43
|
-
|
|
42
|
+
content = if options[:sub_columns]
|
|
43
|
+
block_given? ? yield : nil
|
|
44
|
+
elsif !options.empty? || block_given?
|
|
45
|
+
wrapper(options) { yield if block_given? }
|
|
44
46
|
else
|
|
45
|
-
|
|
46
|
-
end
|
|
47
|
-
|
|
47
|
+
nil
|
|
48
|
+
end
|
|
49
|
+
|
|
50
|
+
[content, expander].join('').html_safe
|
|
48
51
|
end
|
|
49
52
|
end
|
|
50
53
|
end
|
|
@@ -64,6 +67,10 @@ module Blot
|
|
|
64
67
|
|
|
65
68
|
private
|
|
66
69
|
|
|
70
|
+
def expander
|
|
71
|
+
content_tag :td, nil, class: 'expander'
|
|
72
|
+
end
|
|
73
|
+
|
|
67
74
|
def optional_content(options={}, &block)
|
|
68
75
|
if options[:class] && options[:class].split(' ').include?('center')
|
|
69
76
|
content_tag :center, block.call
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
module Blot
|
|
2
|
+
module Helpers
|
|
3
|
+
module Layout
|
|
4
|
+
def layout(options={})
|
|
5
|
+
doctype = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'
|
|
6
|
+
html = content_tag :html, xmlns: 'http://www.w3.org/1999/xhtml' do
|
|
7
|
+
head = content_tag :head do
|
|
8
|
+
content_type = tag :meta, 'http-equiv' => 'Content-Type', content: 'text/html; charset=utf-8'
|
|
9
|
+
viewport = tag :meta, name: 'viewport', content: 'width=device-width'
|
|
10
|
+
ink = content_tag :style, rel: 'text/css' do
|
|
11
|
+
Rails.application.assets[options[:ink]].to_s.html_safe
|
|
12
|
+
end if options[:ink]
|
|
13
|
+
styles = content_tag :style, rel: 'text/css' do
|
|
14
|
+
app_styles = []
|
|
15
|
+
options[:styles].each do |style|
|
|
16
|
+
app_styles << Rails.application.assets[style].to_s.html_safe
|
|
17
|
+
end
|
|
18
|
+
app_styles.join(' ').html_safe
|
|
19
|
+
end if options[:styles]
|
|
20
|
+
|
|
21
|
+
[content_type, viewport, ink, styles].join.html_safe
|
|
22
|
+
end
|
|
23
|
+
|
|
24
|
+
body = content_tag :body do
|
|
25
|
+
content_tag :table, class: 'body' do
|
|
26
|
+
content_tag :tr do
|
|
27
|
+
content_tag :td, class: 'center', align: 'center', valign: 'top' do
|
|
28
|
+
content_tag :center do
|
|
29
|
+
yield.html_safe if block_given?
|
|
30
|
+
end
|
|
31
|
+
end
|
|
32
|
+
end
|
|
33
|
+
end
|
|
34
|
+
end
|
|
35
|
+
|
|
36
|
+
[head, body].join.html_safe
|
|
37
|
+
end
|
|
38
|
+
|
|
39
|
+
[doctype, html].join
|
|
40
|
+
end
|
|
41
|
+
end
|
|
42
|
+
end
|
|
43
|
+
end
|
data/lib/blot/version.rb
CHANGED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
require 'spec_helper'
|
|
2
|
+
|
|
3
|
+
describe Blot::Helpers::Layout do
|
|
4
|
+
let(:view) { ActionView::Base.new.extend subject }
|
|
5
|
+
|
|
6
|
+
it 'can render a boilerplate' do
|
|
7
|
+
example = view.layout { '<!-- Email Content -->' }
|
|
8
|
+
|
|
9
|
+
expect(example).to eql <<-HTML.compress
|
|
10
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
11
|
+
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
12
|
+
<head>
|
|
13
|
+
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
|
|
14
|
+
<meta content="width=device-width" name="viewport" />
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
<table class="body">
|
|
18
|
+
<tr>
|
|
19
|
+
<td align="center" class="center" valign="top">
|
|
20
|
+
<center>
|
|
21
|
+
|
|
22
|
+
<!-- Email Content -->
|
|
23
|
+
|
|
24
|
+
</center>
|
|
25
|
+
</td>
|
|
26
|
+
</tr>
|
|
27
|
+
</table>
|
|
28
|
+
</body>
|
|
29
|
+
</html>
|
|
30
|
+
HTML
|
|
31
|
+
end
|
|
32
|
+
|
|
33
|
+
it 'can render styles' do
|
|
34
|
+
assets = { assets: { 'ink.css' => 'Ink Styles!', 'typography.css' => 'Typography Styles!', 'colors.css' => 'Color Styles!' } }
|
|
35
|
+
allow(Rails).to receive_messages(application: OpenStruct.new(assets))
|
|
36
|
+
example = view.layout(ink: 'ink.css', styles: ['typography.css', 'colors.css'])
|
|
37
|
+
|
|
38
|
+
expect(example).to eql <<-HTML.compress
|
|
39
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
40
|
+
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
41
|
+
<head>
|
|
42
|
+
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
|
|
43
|
+
<meta content="width=device-width" name="viewport" />
|
|
44
|
+
<style rel="text/css">Ink Styles!</style>
|
|
45
|
+
<style rel="text/css">Typography Styles! Color Styles!</style>
|
|
46
|
+
</head>
|
|
47
|
+
<body>
|
|
48
|
+
<table class="body">
|
|
49
|
+
<tr>
|
|
50
|
+
<td align="center" class="center" valign="top">
|
|
51
|
+
<center></center>
|
|
52
|
+
</td>
|
|
53
|
+
</tr>
|
|
54
|
+
</table>
|
|
55
|
+
</body>
|
|
56
|
+
</html>
|
|
57
|
+
HTML
|
|
58
|
+
end
|
|
59
|
+
end
|
data/spec/blot/helpers_spec.rb
CHANGED
|
@@ -3,6 +3,7 @@ require 'spec_helper'
|
|
|
3
3
|
describe Blot::Helpers do
|
|
4
4
|
subject { Class.new.include Blot::Helpers }
|
|
5
5
|
|
|
6
|
+
it { should include Blot::Helpers::Layout }
|
|
6
7
|
it { should include Blot::Helpers::Grid }
|
|
7
8
|
it { should include Blot::Helpers::Visibility }
|
|
8
9
|
it { should include Blot::Helpers::Button }
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: blot
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.
|
|
4
|
+
version: 1.1.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Ben A Morgan
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2014-11-
|
|
11
|
+
date: 2014-11-09 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -128,11 +128,13 @@ files:
|
|
|
128
128
|
- lib/blot/helpers.rb
|
|
129
129
|
- lib/blot/helpers/button.rb
|
|
130
130
|
- lib/blot/helpers/grid.rb
|
|
131
|
+
- lib/blot/helpers/layout.rb
|
|
131
132
|
- lib/blot/helpers/visibility.rb
|
|
132
133
|
- lib/blot/railtie.rb
|
|
133
134
|
- lib/blot/version.rb
|
|
134
135
|
- spec/blot/helpers/button_spec.rb
|
|
135
136
|
- spec/blot/helpers/grid_spec.rb
|
|
137
|
+
- spec/blot/helpers/layout_spec.rb
|
|
136
138
|
- spec/blot/helpers/visibility_spec.rb
|
|
137
139
|
- spec/blot/helpers_spec.rb
|
|
138
140
|
- spec/blot/railtie_spec.rb
|
|
@@ -166,10 +168,10 @@ summary: Blot, a DSL for Ink emails.
|
|
|
166
168
|
test_files:
|
|
167
169
|
- spec/blot/helpers/button_spec.rb
|
|
168
170
|
- spec/blot/helpers/grid_spec.rb
|
|
171
|
+
- spec/blot/helpers/layout_spec.rb
|
|
169
172
|
- spec/blot/helpers/visibility_spec.rb
|
|
170
173
|
- spec/blot/helpers_spec.rb
|
|
171
174
|
- spec/blot/railtie_spec.rb
|
|
172
175
|
- spec/blot/version_spec.rb
|
|
173
176
|
- spec/spec_helper.rb
|
|
174
177
|
- spec/support/string.rb
|
|
175
|
-
has_rdoc:
|