markdown-ui 0.1.2 → 0.1.3

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.
Files changed (8) hide show
  1. checksums.yaml +4 -4
  2. data/Changelog +4 -0
  3. data/exe/markdown-ui +1 -1
  4. data/lib/markdown-ui/version.rb +1 -1
  5. data/markdown-ui.gemspec +2 -2
  6. data/website/index.html +421 -420
  7. data/website/index.md +482 -481
  8. metadata +20 -14
data/website/index.md CHANGED
@@ -1,598 +1,599 @@
1
- > Inverted Blue Segment Container:
2
- > > Inverted Blue Menu:
3
- > > [Markdown UI](#home "basic")
4
- > > > Inverted Blue Right Menu:
5
- > > > [Docs](#docs "disabled")
6
- > > > [About](#about "disabled")
7
- > > > [Github](#github)
8
- > > > [Install](#install "disabled")
9
-
10
- <!-- -->
11
-
12
- > Container:
1
+ > Center Aligned Container:
2
+ > > Inverted Blue Segment Container:
3
+ > > > Inverted Blue Menu:
4
+ > > > [Markdown UI](#home "basic")
5
+ > > > > Inverted Blue Right Menu:
6
+ > > > > [Docs](#docs "disabled")
7
+ > > > > [About](#about "disabled")
8
+ > > > > [Github](#github)
9
+ > > > > [Install](#install "disabled")
13
10
  >
14
11
  > <!-- -->
15
12
  >
16
- > > Inverted Attached Blue Very Padded Segment:
17
- > > # Markdown UI
18
- > > ### Responsive User Interfaces in Markdown
19
- >
20
- > <!-- -->
21
- >
22
- > > Attached Segment:
13
+ > > Left Aligned Container:
14
+ > >
15
+ > > <!-- -->
16
+ > >
17
+ > > > Inverted Attached Blue Very Padded Segment:
18
+ > > > # Markdown UI
19
+ > > > ### Responsive User Interfaces in Markdown
23
20
  > >
24
21
  > > <!-- -->
25
22
  > >
26
- > > > Equal Width Grid:
27
- > > > > Column:
28
- > > > > "A framework for creating responsive UI's for mobile and web using Markdown Syntax. It is a tool for Rapid Prototyping UI's for Single-page and Multiple-page apps, and allows to write UI's only once and then translate it to Semantic UI 2.0, BootStrap 3 (coming soon), Foundation (coming soon), etc."
29
- > > > > "It helps the developer to focus on the big picture on paper or text-editors, and with few details it lessen the cognitive load which means having meaningful productivity which equates to happiness!"
23
+ > > > Attached Segment:
30
24
  > > >
31
25
  > > > <!-- -->
32
26
  > > >
33
- > > > > Column:
34
- > > > > > Inverted Very Padded Segment:
35
- > > > > > ```> Pointing Menu：``` <br />
36
- > > > > > ```> [Home](#root "active")``` <br />
37
- > > > > > ```> [Messages](#messages)``` <br />
38
- > > > > > ```> [Friends](#friends)``` <br />
39
- > > > > > ```> > Right Menu：``` <br />
40
- > > > > > ```> > [Logout](#logout)``` <br />
41
- > > > > > <br />
42
- > > > > > ```__Button|Add Friend__```
43
-
44
-
27
+ > > > > Equal Width Grid:
28
+ > > > > > Column:
29
+ > > > > > "A framework for creating responsive UI's for mobile and web using Markdown Syntax. It is a tool for Rapid Prototyping UI's for Single-page and Multiple-page apps, and allows to write UI's only once and then translate it to Semantic UI 2.0, BootStrap 3 (coming soon), Foundation (coming soon), etc."
30
+ > > > > > "It helps the developer to focus on the big picture on paper or text-editors, and with few details it lessen the cognitive load which means having meaningful productivity which equates to happiness!"
31
+ > > > >
32
+ > > > > <!-- -->
33
+ > > > >
34
+ > > > > > Column:
35
+ > > > > > > Inverted Very Padded Segment:
36
+ > > > > > > ```> Pointing Menu：``` <br />
37
+ > > > > > > ```> [Home](#root "active")``` <br />
38
+ > > > > > > ```> [Messages](#messages)``` <br />
39
+ > > > > > > ```> [Friends](#friends)``` <br />
40
+ > > > > > > ```> > Right Menu：``` <br />
41
+ > > > > > > ```> > [Logout](#logout)``` <br />
42
+ > > > > > > <br />
43
+ > > > > > > ```__Button|Add Friend__```
45
44
  >
46
- > <!-- -->
47
45
  >
48
- > > Attached Segment:
49
- > > ##Installation
50
- > > ```gem install markdown-ui```
51
- > > ##Usage
52
- > > ```markdown-ui index.md > index.html```
53
-
54
-
55
- >
56
- > <!-- -->
57
- >
58
- > > Segment:
59
- > > # Buttons:Center Aligned
60
-
61
-
62
- >
63
- > <!-- -->
64
- >
65
- > > Segment:
66
- > > ### Button
67
- > > "Standard Button"
68
- >
69
- > <!-- -->
70
- >
71
- > > Divided Segment Grid:
72
- > > > HTML Top Attached Segment:
73
- > > > > Top Attached Label:
74
- > > > > Standard Button
75
- > >
76
- > > <!-- -->
77
- > >
78
- > > > Center Aligned Six Wide Column:
79
- > > > ##### Preview
80
- > > > __Button|Follow__
81
- > >
82
- > > <!-- -->
83
- > >
84
- > > > Left Aligned Ten Wide Column:
85
- > > > ##### Markdown Syntax
86
- > > > > Inverted Very Padded Segment:
87
- > > > > ```
88
- > > > > __Button|Follow__
89
- > > > > ```
90
46
  > >
91
47
  > > <!-- -->
92
48
  > >
49
+ > > > Attached Segment:
50
+ > > > ##Installation
51
+ > > > ```gem install markdown-ui```
52
+ > > > ##Usage
53
+ > > > ```markdown-ui index.md > index.html```
93
54
  >
94
- > <!-- -->
95
55
  >
96
- > > Divided Segment Grid:
97
- > > > HTML Top Attached Segment:
98
- > > > > Top Attached Label:
99
- > > > > Standard Button with Custom Class
100
- > >
101
- > > <!-- -->
102
- > >
103
- > > > Center Aligned Six Wide Column:
104
- > > > ##### Preview
105
- > > > __Follow-Button-Class Button|Follow|Follow-Button-ID__
106
- > >
107
- > > <!-- -->
108
- > >
109
- > > > Left Aligned Ten Wide Column:
110
- > > > ##### Markdown Syntax
111
- > > > > Inverted Very Padded Segment:
112
- > > > > ```__Follow-Button-Class Button|Follow|Follow-Button-ID__```
113
56
  > >
114
57
  > > <!-- -->
115
58
  > >
59
+ > > > Segment:
60
+ > > > # Buttons:Center Aligned
116
61
  >
117
- > <!-- -->
118
62
  >
119
- > > Divided Segment Grid:
120
- > > > HTML Top Attached Segment:
121
- > > > > Top Attached Label:
122
- > > > > Focusable Button
123
63
  > >
124
64
  > > <!-- -->
125
65
  > >
126
- > > > Center Aligned Six Wide Column:
127
- > > > ##### Preview
128
- > > > __Focusable Button|Follow|My-Focusable-Button__
66
+ > > > Segment:
67
+ > > > ### Button
68
+ > > > "Standard Button"
129
69
  > >
130
70
  > > <!-- -->
131
71
  > >
132
- > > > Left Aligned Ten Wide Column:
133
- > > > ##### Markdown Syntax
134
- > > > > Inverted Very Padded Segment:
135
- > > > > ```
136
- > > > > __Focusable Button|Follow|My-Focusable-Button__
137
- > > > > ```
138
- > >
139
- > > <!-- -->
140
- > >
141
-
142
-
143
- >
144
- > <!-- -->
145
- >
146
- > > Attached Segment:
147
- > > ### Emphasis
148
- > > "A button can be formatted to show different levels of emphasis"
149
- >
150
- > <!-- -->
151
- >
152
- > > Divided Segment Grid:
153
- > > > HTML Top Attached Segment:
154
- > > > > Top Attached Label:
155
- > > > > Emphasis
156
- > >
157
- > > <!-- -->
158
- > >
159
- > > > Center Aligned Six Wide Column:
160
- > > > ##### Preview
161
- > > > __Primary Button|Save__ __Button|Discard__
162
- > > > " "
163
- > > > __Secondary Button|Save__ __Button|Discard__
72
+ > > > Divided Segment Grid:
73
+ > > > > HTML Top Attached Segment:
74
+ > > > > > Top Attached Label:
75
+ > > > > > Standard Button
76
+ > > >
77
+ > > > <!-- -->
78
+ > > >
79
+ > > > > Center Aligned Six Wide Column:
80
+ > > > > ##### Preview
81
+ > > > > __Button|Follow__
82
+ > > >
83
+ > > > <!-- -->
84
+ > > >
85
+ > > > > Left Aligned Ten Wide Column:
86
+ > > > > ##### Markdown Syntax
87
+ > > > > > Inverted Very Padded Segment:
88
+ > > > > > ```
89
+ > > > > > __Button|Follow__
90
+ > > > > > ```
91
+ > > >
92
+ > > > <!-- -->
93
+ > > >
164
94
  > >
165
95
  > > <!-- -->
166
96
  > >
167
- > > > Left Aligned Ten Wide Column:
168
- > > > ##### Markdown Syntax
169
- > > > > Inverted Very Padded Segment:
170
- > > > > ```
171
- > > > > __Primary Button|Save__
172
- > > > > __Button|Discard__
173
- > > > > __Secondary Button|Save__
174
- > > > > __Button|Discard__
175
- > > > > ```
97
+ > > > Divided Segment Grid:
98
+ > > > > HTML Top Attached Segment:
99
+ > > > > > Top Attached Label:
100
+ > > > > > Standard Button with Custom Class And ID
101
+ > > >
102
+ > > > <!-- -->
103
+ > > >
104
+ > > > > Center Aligned Six Wide Column:
105
+ > > > > ##### Preview
106
+ > > > > __Follow-Button-Class Button|Follow|Fancy-Follow-Button-ID__
107
+ > > >
108
+ > > > <!-- -->
109
+ > > >
110
+ > > > > Left Aligned Ten Wide Column:
111
+ > > > > ##### Markdown Syntax
112
+ > > > > > Inverted Very Padded Segment:
113
+ > > > > > ```__Follow-Button-Class Button|Follow|Follow-Button-ID__```
114
+ > > >
115
+ > > > <!-- -->
116
+ > > >
176
117
  > >
177
118
  > > <!-- -->
178
119
  > >
179
-
180
-
181
- >
182
- > <!-- -->
183
- >
184
- > > Attached Segment:
185
- > > ### Animated
186
- > > "A button can animate to show hidden content"
120
+ > > > Divided Segment Grid:
121
+ > > > > HTML Top Attached Segment:
122
+ > > > > > Top Attached Label:
123
+ > > > > > Focusable Button
124
+ > > >
125
+ > > > <!-- -->
126
+ > > >
127
+ > > > > Center Aligned Six Wide Column:
128
+ > > > > ##### Preview
129
+ > > > > __Focusable Button|Follow|My-Focusable-Button__
130
+ > > >
131
+ > > > <!-- -->
132
+ > > >
133
+ > > > > Left Aligned Ten Wide Column:
134
+ > > > > ##### Markdown Syntax
135
+ > > > > > Inverted Very Padded Segment:
136
+ > > > > > ```
137
+ > > > > > __Focusable Button|Follow|My-Focusable-Button__
138
+ > > > > > ```
139
+ > > >
140
+ > > > <!-- -->
141
+ > > >
187
142
  >
188
- > <!-- -->
189
143
  >
190
- > > Divided Segment Grid:
191
- > > > HTML Top Attached Segment:
192
- > > > > Top Attached Label:
193
- > > > > Animated
194
144
  > >
195
145
  > > <!-- -->
196
146
  > >
197
- > > > Center Aligned Six Wide Column:
198
- > > > ##### Preview
199
- > > > __Animated Button|Next;Icon:Right Arrow__
200
- > >
201
- > > <!-- -->
202
- > >
203
- > > > Left Aligned Ten Wide Column:
204
- > > > ##### Markdown Syntax
205
- > > > > Inverted Very Padded Segment:
206
- > > > > ```
207
- > > > > __Animated Button|Next;Icon：Right Arrow__
208
- > > > > ```
147
+ > > > Attached Segment:
148
+ > > > ### Emphasis
149
+ > > > "A button can be formatted to show different levels of emphasis"
209
150
  > >
210
151
  > > <!-- -->
211
152
  > >
153
+ > > > Divided Segment Grid:
154
+ > > > > HTML Top Attached Segment:
155
+ > > > > > Top Attached Label:
156
+ > > > > > Emphasis
157
+ > > >
158
+ > > > <!-- -->
159
+ > > >
160
+ > > > > Center Aligned Six Wide Column:
161
+ > > > > ##### Preview
162
+ > > > > __Primary Button|Save__ __Button|Discard__
163
+ > > > > " "
164
+ > > > > __Secondary Button|Save__ __Button|Discard__
165
+ > > >
166
+ > > > <!-- -->
167
+ > > >
168
+ > > > > Left Aligned Ten Wide Column:
169
+ > > > > ##### Markdown Syntax
170
+ > > > > > Inverted Very Padded Segment:
171
+ > > > > > ```
172
+ > > > > > __Primary Button|Save__
173
+ > > > > > __Button|Discard__
174
+ > > > > > __Secondary Button|Save__
175
+ > > > > > __Button|Discard__
176
+ > > > > > ```
177
+ > > >
178
+ > > > <!-- -->
179
+ > > >
212
180
  >
213
- > <!-- -->
214
181
  >
215
- > > Divided Segment Grid:
216
- > > > HTML Top Attached Segment:
217
- > > > > Top Attached Label:
218
- > > > > Vertical Animated
219
182
  > >
220
183
  > > <!-- -->
221
184
  > >
222
- > > > Center Aligned Six Wide Column:
223
- > > > ##### Preview
224
- > > > __Vertical Animated Button|Icon:Shop;Shop__
185
+ > > > Attached Segment:
186
+ > > > ### Animated
187
+ > > > "A button can animate to show hidden content"
225
188
  > >
226
189
  > > <!-- -->
227
190
  > >
228
- > > > Left Aligned Ten Wide Column:
229
- > > > ##### Markdown Syntax
230
- > > > > Inverted Very Padded Segment:
231
- > > > > ```
232
- > > > > __Vertical Animated Button|Icon：Shop;Shop__
233
- > > > > ```
234
- > >
235
- > > <!-- -->
236
- > >
237
- >
238
- > <!-- -->
239
- >
240
- > > Divided Segment Grid:
241
- > > > HTML Top Attached Segment:
242
- > > > > Top Attached Label:
243
- > > > > Fade Animated
244
- > >
245
- > > <!-- -->
246
- > >
247
- > > > Center Aligned Six Wide Column:
248
- > > > ##### Preview
249
- > > > __Fade Animated Button|Sign-up for a Pro account;$12.99 a month__
191
+ > > > Divided Segment Grid:
192
+ > > > > HTML Top Attached Segment:
193
+ > > > > > Top Attached Label:
194
+ > > > > > Animated
195
+ > > >
196
+ > > > <!-- -->
197
+ > > >
198
+ > > > > Center Aligned Six Wide Column:
199
+ > > > > ##### Preview
200
+ > > > > __Animated Button|Next;Icon:Right Arrow__
201
+ > > >
202
+ > > > <!-- -->
203
+ > > >
204
+ > > > > Left Aligned Ten Wide Column:
205
+ > > > > ##### Markdown Syntax
206
+ > > > > > Inverted Very Padded Segment:
207
+ > > > > > ```
208
+ > > > > > __Animated Button|Next;Icon：Right Arrow__
209
+ > > > > > ```
210
+ > > >
211
+ > > > <!-- -->
212
+ > > >
250
213
  > >
251
214
  > > <!-- -->
252
215
  > >
253
- > > > Left Aligned Ten Wide Column:
254
- > > > ##### Markdown Syntax
255
- > > > > Inverted Very Padded Segment:
256
- > > > > ```__Fade Animated Button|Sign-up for a Pro account;$12.99 a month__```
257
- > > > > <br /> or <br />
258
- > > > > ```__Fade Animated Button|Sign-up for a Pro account;$12.99 a month__```
216
+ > > > Divided Segment Grid:
217
+ > > > > HTML Top Attached Segment:
218
+ > > > > > Top Attached Label:
219
+ > > > > > Vertical Animated
220
+ > > >
221
+ > > > <!-- -->
222
+ > > >
223
+ > > > > Center Aligned Six Wide Column:
224
+ > > > > ##### Preview
225
+ > > > > __Vertical Animated Button|Icon:Shop;Shop__
226
+ > > >
227
+ > > > <!-- -->
228
+ > > >
229
+ > > > > Left Aligned Ten Wide Column:
230
+ > > > > ##### Markdown Syntax
231
+ > > > > > Inverted Very Padded Segment:
232
+ > > > > > ```
233
+ > > > > > __Vertical Animated Button|Icon：Shop;Shop__
234
+ > > > > > ```
235
+ > > >
236
+ > > > <!-- -->
237
+ > > >
259
238
  > >
260
239
  > > <!-- -->
261
240
  > >
262
-
263
-
264
- >
265
- > <!-- -->
266
- >
267
- > > Attached Segment:
268
- > > ### Icon
269
- > > "A button can have only an icon"
241
+ > > > Divided Segment Grid:
242
+ > > > > HTML Top Attached Segment:
243
+ > > > > > Top Attached Label:
244
+ > > > > > Fade Animated
245
+ > > >
246
+ > > > <!-- -->
247
+ > > >
248
+ > > > > Center Aligned Six Wide Column:
249
+ > > > > ##### Preview
250
+ > > > > __Fade Animated Button|Sign-up for a Pro account;$12.99 a month__
251
+ > > >
252
+ > > > <!-- -->
253
+ > > >
254
+ > > > > Left Aligned Ten Wide Column:
255
+ > > > > ##### Markdown Syntax
256
+ > > > > > Inverted Very Padded Segment:
257
+ > > > > > ```__Fade Animated Button|Sign-up for a Pro account;$12.99 a month__```
258
+ > > > > > <br /> or <br />
259
+ > > > > > ```__Fade Animated Button|Sign-up for a Pro account;$12.99 a month__```
260
+ > > >
261
+ > > > <!-- -->
262
+ > > >
270
263
  >
271
- > <!-- -->
272
264
  >
273
- > > Divided Segment Grid:
274
- > > > HTML Top Attached Segment:
275
- > > > > Top Attached Label:
276
- > > > > Icon Button
277
265
  > >
278
266
  > > <!-- -->
279
267
  > >
280
- > > > Center Aligned Six Wide Column:
281
- > > > ##### Preview
282
- > > > __Icon Button|Icon:Cloud__
268
+ > > > Attached Segment:
269
+ > > > ### Icon
270
+ > > > "A button can have only an icon"
283
271
  > >
284
272
  > > <!-- -->
285
273
  > >
286
- > > > Left Aligned Ten Wide Column:
287
- > > > ##### Markdown Syntax
288
- > > > > Inverted Very Padded Segment:
289
- > > > > ```
290
- > > > > __Icon Button|Icon：Cloud__
291
- > > > > ```
292
- > >
293
- > > <!-- -->
294
- > >
295
-
296
-
297
- >
298
- > <!-- -->
299
- >
300
- > > Attached Segment:
301
- > > ### Labeled Icon
302
- > > "A button can have an icon and a label"
274
+ > > > Divided Segment Grid:
275
+ > > > > HTML Top Attached Segment:
276
+ > > > > > Top Attached Label:
277
+ > > > > > Icon Button
278
+ > > >
279
+ > > > <!-- -->
280
+ > > >
281
+ > > > > Center Aligned Six Wide Column:
282
+ > > > > ##### Preview
283
+ > > > > __Icon Button|Icon:Cloud__
284
+ > > >
285
+ > > > <!-- -->
286
+ > > >
287
+ > > > > Left Aligned Ten Wide Column:
288
+ > > > > ##### Markdown Syntax
289
+ > > > > > Inverted Very Padded Segment:
290
+ > > > > > ```
291
+ > > > > > __Icon Button|Icon：Cloud__
292
+ > > > > > ```
293
+ > > >
294
+ > > > <!-- -->
295
+ > > >
303
296
  >
304
- > <!-- -->
305
297
  >
306
- > > Divided Segment Grid:
307
- > > > HTML Top Attached Segment:
308
- > > > > Top Attached Label:
309
- > > > > Labeled Icon
310
- > >
311
- > > <!-- -->
312
- > >
313
- > > > Center Aligned Six Wide Column:
314
- > > > ##### Preview
315
- > > > __Labeled Icon Button|Icon:Pause,Pause__
316
298
  > >
317
299
  > > <!-- -->
318
300
  > >
319
- > > > Left Aligned Ten Wide Column:
320
- > > > ##### Markdown Syntax
321
- > > > > Inverted Very Padded Segment:
322
- > > > > ```
323
- > > > > __Labeled Icon Button|Icon：Pause,Pause__
324
- > > > > ```
301
+ > > > Attached Segment:
302
+ > > > ### Labeled Icon
303
+ > > > "A button can have an icon and a label"
325
304
  > >
326
305
  > > <!-- -->
327
306
  > >
328
-
329
-
330
- >
331
- > <!-- -->
332
- >
333
- > > Attached Segment:
334
- > > ### Basic Button
335
- > > "A basic button is less pronounced"
307
+ > > > Divided Segment Grid:
308
+ > > > > HTML Top Attached Segment:
309
+ > > > > > Top Attached Label:
310
+ > > > > > Labeled Icon
311
+ > > >
312
+ > > > <!-- -->
313
+ > > >
314
+ > > > > Center Aligned Six Wide Column:
315
+ > > > > ##### Preview
316
+ > > > > __Labeled Icon Button|Icon:Pause,Pause__
317
+ > > >
318
+ > > > <!-- -->
319
+ > > >
320
+ > > > > Left Aligned Ten Wide Column:
321
+ > > > > ##### Markdown Syntax
322
+ > > > > > Inverted Very Padded Segment:
323
+ > > > > > ```
324
+ > > > > > __Labeled Icon Button|Icon：Pause,Pause__
325
+ > > > > > ```
326
+ > > >
327
+ > > > <!-- -->
328
+ > > >
336
329
  >
337
- > <!-- -->
338
330
  >
339
- > > Divided Segment Grid:
340
- > > > HTML Top Attached Segment:
341
- > > > > Top Attached Label:
342
- > > > > Basic Button
343
331
  > >
344
332
  > > <!-- -->
345
333
  > >
346
- > > > Center Aligned Six Wide Column:
347
- > > > ##### Preview
348
- > > > __Basic Button|Icon:User,Add Friend__
334
+ > > > Attached Segment:
335
+ > > > ### Basic Button
336
+ > > > "A basic button is less pronounced"
349
337
  > >
350
338
  > > <!-- -->
351
339
  > >
352
- > > > Left Aligned Ten Wide Column:
353
- > > > ##### Markdown Syntax
354
- > > > > Inverted Very Padded Segment:
355
- > > > > ```
356
- > > > > __Basic Button|Icon：User,Add Friend__
357
- > > > > ```
340
+ > > > Divided Segment Grid:
341
+ > > > > HTML Top Attached Segment:
342
+ > > > > > Top Attached Label:
343
+ > > > > > Basic Button
344
+ > > >
345
+ > > > <!-- -->
346
+ > > >
347
+ > > > > Center Aligned Six Wide Column:
348
+ > > > > ##### Preview
349
+ > > > > __Basic Button|Icon:User,Add Friend__
350
+ > > >
351
+ > > > <!-- -->
352
+ > > >
353
+ > > > > Left Aligned Ten Wide Column:
354
+ > > > > ##### Markdown Syntax
355
+ > > > > > Inverted Very Padded Segment:
356
+ > > > > > ```
357
+ > > > > > __Basic Button|Icon：User,Add Friend__
358
+ > > > > > ```
359
+ > > >
360
+ > > > <!-- -->
361
+ > > >
358
362
  > >
359
363
  > > <!-- -->
360
364
  > >
365
+ > > > Divided Segment Grid:
366
+ > > > > HTML Top Attached Segment:
367
+ > > > > > Top Attached Label:
368
+ > > > > > Basic Button
369
+ > > >
370
+ > > > <!-- -->
371
+ > > >
372
+ > > > > Center Aligned Six Wide Column:
373
+ > > > > ##### Preview
374
+ > > > > __Basic Black Button|Black__
375
+ > > > > __Basic Yellow Button|Yellow__
376
+ > > > > __Basic Green Button|Green__
377
+ > > > > __Basic Blue Button|Blue__
378
+ > > > > __Basic Orange Button|Orange__
379
+ > > > > __Basic Purple Button|Purple__
380
+ > > > > __Basic Pink Button|Pink__
381
+ > > > > __Basic Red Button|Red__
382
+ > > > > __Basic Teal Button|Teal__
383
+ > > >
384
+ > > > <!-- -->
385
+ > > >
386
+ > > > > Left Aligned Ten Wide Column:
387
+ > > > > ##### Markdown Syntax
388
+ > > > > > Inverted Very Padded Segment:
389
+ > > > > > ```
390
+ > > > > __Basic Black Button|Black__
391
+ > > > > __Basic Yellow Button|Yellow__
392
+ > > > > __Basic Green Button|Green__
393
+ > > > > __Basic Blue Button|Blue__
394
+ > > > > __Basic Orange Button|Orange__
395
+ > > > > __Basic Purple Button|Purple__
396
+ > > > > __Basic Pink Button|Pink__
397
+ > > > > __Basic Red Button|Red__
398
+ > > > > __Basic Teal Button|Teal__
399
+ > > > > ```
400
+ > > >
401
+ > > > <!-- -->
402
+ > > >
361
403
  >
362
- > <!-- -->
363
404
  >
364
- > > Divided Segment Grid:
365
- > > > HTML Top Attached Segment:
366
- > > > > Top Attached Label:
367
- > > > > Basic Button
368
405
  > >
369
406
  > > <!-- -->
370
407
  > >
371
- > > > Center Aligned Six Wide Column:
372
- > > > ##### Preview
373
- > > > __Basic Black Button|Black__
374
- > > > __Basic Yellow Button|Yellow__
375
- > > > __Basic Green Button|Green__
376
- > > > __Basic Blue Button|Blue__
377
- > > > __Basic Orange Button|Orange__
378
- > > > __Basic Purple Button|Purple__
379
- > > > __Basic Pink Button|Pink__
380
- > > > __Basic Red Button|Red__
381
- > > > __Basic Teal Button|Teal__
408
+ > > > Attached Segment:
409
+ > > > ### Inverted
410
+ > > > "A button can be formatted to appear on dark backgrounds"
382
411
  > >
383
412
  > > <!-- -->
384
413
  > >
385
- > > > Left Aligned Ten Wide Column:
386
- > > > ##### Markdown Syntax
387
- > > > > Inverted Very Padded Segment:
388
- > > > > ```
389
- > > > __Basic Black Button|Black__
390
- > > > __Basic Yellow Button|Yellow__
391
- > > > __Basic Green Button|Green__
392
- > > > __Basic Blue Button|Blue__
393
- > > > __Basic Orange Button|Orange__
394
- > > > __Basic Purple Button|Purple__
395
- > > > __Basic Pink Button|Pink__
396
- > > > __Basic Red Button|Red__
397
- > > > __Basic Teal Button|Teal__
398
- > > > ```
399
- > >
400
- > > <!-- -->
401
- > >
402
-
403
-
404
- >
405
- > <!-- -->
406
- >
407
- > > Attached Segment:
408
- > > ### Inverted
409
- > > "A button can be formatted to appear on dark backgrounds"
414
+ > > > Divided Segment Grid:
415
+ > > > > HTML Top Attached Segment:
416
+ > > > > > Top Attached Label:
417
+ > > > > > Inverted
418
+ > > >
419
+ > > > <!-- -->
420
+ > > >
421
+ > > > > Center Aligned Six Wide Column:
422
+ > > > > ##### Preview
423
+ > > > > > Inverted Very Padded Segment:
424
+ > > > > __Inverted Standard Button|Standard__
425
+ > > > > __Inverted Black Button|Black__
426
+ > > > > __Inverted Yellow Button|Yellow__
427
+ > > > > __Inverted Green Button|Green__
428
+ > > > > __Inverted Blue Button|Blue__
429
+ > > > > __Inverted Orange Button|Orange__
430
+ > > > > __Inverted Purple Button|Purple__
431
+ > > > > __Inverted Pink Button|Pink__
432
+ > > > > __Inverted Red Button|Red__
433
+ > > > > __Inverted Teal Button|Teal__
434
+ > > >
435
+ > > > <!-- -->
436
+ > > >
437
+ > > > > Left Aligned Ten Wide Column:
438
+ > > > > ##### Markdown Syntax
439
+ > > > > > Inverted Very Padded Segment:
440
+ > > > > > ```> Inverted Segment：``` <br />
441
+ > > > > > ```> __Inverted Standard Button|Standard__``` <br />
442
+ > > > > > ```> __Inverted Black Button|Black__``` <br />
443
+ > > > > > ```> __Inverted Yellow Button|Yellow__``` <br />
444
+ > > > > > ```> __Inverted Green Button|Green__``` <br />
445
+ > > > > > ```> __Inverted Blue Button|Blue__``` <br />
446
+ > > > > > ```> __Inverted Orange Button|Orange__``` <br />
447
+ > > > > > ```> __Inverted Purple Button|Purple__``` <br />
448
+ > > > > > ```> __Inverted Pink Button|Pink__``` <br />
449
+ > > > > > ```> __Inverted Red Button|Red__``` <br />
450
+ > > > > > ```> __Inverted Teal Button|Teal__```
451
+ > > >
452
+ > > > <!-- -->
453
+ > > >
410
454
  >
411
- > <!-- -->
412
455
  >
413
- > > Divided Segment Grid:
414
- > > > HTML Top Attached Segment:
415
- > > > > Top Attached Label:
416
- > > > > Inverted
417
- > >
418
- > > <!-- -->
419
- > >
420
- > > > Center Aligned Six Wide Column:
421
- > > > ##### Preview
422
- > > > > Inverted Very Padded Segment:
423
- > > > __Inverted Standard Button|Standard__
424
- > > > __Inverted Black Button|Black__
425
- > > > __Inverted Yellow Button|Yellow__
426
- > > > __Inverted Green Button|Green__
427
- > > > __Inverted Blue Button|Blue__
428
- > > > __Inverted Orange Button|Orange__
429
- > > > __Inverted Purple Button|Purple__
430
- > > > __Inverted Pink Button|Pink__
431
- > > > __Inverted Red Button|Red__
432
- > > > __Inverted Teal Button|Teal__
433
456
  > >
434
457
  > > <!-- -->
435
458
  > >
436
- > > > Left Aligned Ten Wide Column:
437
- > > > ##### Markdown Syntax
438
- > > > > Inverted Very Padded Segment:
439
- > > > > ```> Inverted Segment：``` <br />
440
- > > > > ```> __Button|Standard|Inverted__``` <br />
441
- > > > > ```> __Button|Black|Inverted Black__``` <br />
442
- > > > > ```> __Button|Yellow|Inverted Yellow__``` <br />
443
- > > > > ```> __Button|Green|Inverted Green__``` <br />
444
- > > > > ```> __Button|Blue|Inverted Blue__``` <br />
445
- > > > > ```> __Button|Orange|Inverted Orange__``` <br />
446
- > > > > ```> __Button|Purple|Inverted Purple__``` <br />
447
- > > > > ```> __Button|Pink|Inverted Pink__``` <br />
448
- > > > > ```> __Button|Red|Inverted Red__``` <br />
449
- > > > > ```> __Button|Teal|Inverted Teal__```
459
+ > > > Attached Segment:
460
+ > > > ### Groups
461
+ > > > "Buttons can exist together as a group"
450
462
  > >
451
463
  > > <!-- -->
452
464
  > >
453
-
454
-
455
- >
456
- > <!-- -->
457
- >
458
- > > Attached Segment:
459
- > > ### Groups
460
- > > "Buttons can exist together as a group"
465
+ > > > Divided Segment Grid:
466
+ > > > > HTML Top Attached Segment:
467
+ > > > > > Top Attached Label:
468
+ > > > > > Buttons
469
+ > > >
470
+ > > > <!-- -->
471
+ > > >
472
+ > > > > Center Aligned Six Wide Column:
473
+ > > > > ##### Preview
474
+ > > > > > Buttons:
475
+ > > > > > __Button|One|Standard__
476
+ > > > > > __Button|Two|Standard__
477
+ > > > > > __Button|Three|Standard__
478
+ > > >
479
+ > > > <!-- -->
480
+ > > >
481
+ > > > > Left Aligned Ten Wide Column:
482
+ > > > > ##### Markdown Syntax
483
+ > > > > > Inverted Very Padded Segment:
484
+ > > > > > ```> Buttons：``` <br />
485
+ > > > > > ```> __Standard Button|One__``` <br />
486
+ > > > > > ```> __Standard Button|Two__``` <br />
487
+ > > > > > ```> __Standard Button|Three__```
488
+ > > >
489
+ > > > <!-- -->
490
+ > > >
461
491
  >
462
- > <!-- -->
463
492
  >
464
- > > Divided Segment Grid:
465
- > > > HTML Top Attached Segment:
466
- > > > > Top Attached Label:
467
- > > > > Buttons
468
- > >
469
- > > <!-- -->
470
- > >
471
- > > > Center Aligned Six Wide Column:
472
- > > > ##### Preview
473
- > > > > Buttons:
474
- > > > > __Button|One|Standard__
475
- > > > > __Button|Two|Standard__
476
- > > > > __Button|Three|Standard__
477
493
  > >
478
494
  > > <!-- -->
479
495
  > >
480
- > > > Left Aligned Ten Wide Column:
481
- > > > ##### Markdown Syntax
482
- > > > > Inverted Very Padded Segment:
483
- > > > > ```> Buttons：``` <br />
484
- > > > > ```> __Standard Button|One__``` <br />
485
- > > > > ```> __Standard Button|Two__``` <br />
486
- > > > > ```> __Standard Button|Three__```
487
- > >
488
- > > <!-- -->
489
- > >
490
-
491
-
492
- >
493
- > <!-- -->
494
- >
495
- > > Attached Segment:
496
- > > ### Icon Buttons
497
- > > "Buttons can exist together as a group"
498
- >
499
- > <!-- -->
500
- >
501
- > > Divided Segment Grid:
502
- > > > HTML Top Attached Segment:
503
- > > > > Top Attached Label:
504
- > > > > Buttons
496
+ > > > Attached Segment:
497
+ > > > ### Icon Buttons
498
+ > > > "Buttons can exist together as a group"
505
499
  > >
506
500
  > > <!-- -->
507
501
  > >
508
- > > > Center Aligned Six Wide Column:
509
- > > > ##### Preview
510
- > > > > Icon Buttons:
511
- > > > > __Button|Icon: Align Left__
512
- > > > > __Button|Icon: Align Center__
513
- > > > > __Button|Icon: Align Right__
514
- > > > > __Button|Icon: Align Justify__
502
+ > > > Divided Segment Grid:
503
+ > > > > HTML Top Attached Segment:
504
+ > > > > > Top Attached Label:
505
+ > > > > > Buttons
506
+ > > >
507
+ > > > <!-- -->
508
+ > > >
509
+ > > > > Center Aligned Six Wide Column:
510
+ > > > > ##### Preview
511
+ > > > > > Icon Buttons:
512
+ > > > > > __Button|Icon: Align Left__
513
+ > > > > > __Button|Icon: Align Center__
514
+ > > > > > __Button|Icon: Align Right__
515
+ > > > > > __Button|Icon: Align Justify__
516
+ > > > >
517
+ > > > > <!-- -->
518
+ > > > >
519
+ > > > > > Icon Buttons:
520
+ > > > > > __Button|Icon: Bold__
521
+ > > > > > __Button|Icon: Underline__
522
+ > > > > > __Button|Icon: Text Width__
523
+ > > >
524
+ > > > <!-- -->
525
+ > > >
526
+ > > > > Left Aligned Ten Wide Column:
527
+ > > > > ##### Markdown Syntax
528
+ > > > > > Inverted Very Padded Segment:
529
+ > > > > > ```> Icon Buttons：``` <br />
530
+ > > > > > ```> __Button|Icon：Align Left__``` <br />
531
+ > > > > > ```> __Button|Icon：Align Center__``` <br />
532
+ > > > > > ```> __Button|Icon：Align Right__``` <br />
533
+ > > > > > ```> __Button|Icon：Align Justify__``` <br />
534
+ > > > > <br />
535
+ > > > > ``` <!-- A separator is required in between two spaces -->``` <br />
536
+ > > > > <br />
537
+ > > > > > ```> Icon Buttons：``` <br />
538
+ > > > > > ```> __Button|Icon：Bold__``` <br />
539
+ > > > > > ```> __Button|Icon：Underline__``` <br />
540
+ > > > > > ```> __Button|Icon：Text Width__```
515
541
  > > >
516
542
  > > > <!-- -->
517
543
  > > >
518
- > > > > Icon Buttons:
519
- > > > > __Button|Icon: Bold__
520
- > > > > __Button|Icon: Underline__
521
- > > > > __Button|Icon: Text Width__
522
- > >
523
- > > <!-- -->
524
- > >
525
- > > > Left Aligned Ten Wide Column:
526
- > > > ##### Markdown Syntax
527
- > > > > Inverted Very Padded Segment:
528
- > > > > ```> Icon Buttons：``` <br />
529
- > > > > ```> __Button|Icon：Align Left__``` <br />
530
- > > > > ```> __Button|Icon：Align Center__``` <br />
531
- > > > > ```> __Button|Icon：Align Right__``` <br />
532
- > > > > ```> __Button|Icon：Align Justify__``` <br />
533
- > > > <br />
534
- > > > ``` <!-- A separator is required in between two spaces -->``` <br />
535
- > > > <br />
536
- > > > > ```> Icon Buttons：``` <br />
537
- > > > > ```> __Button|Icon：Bold__``` <br />
538
- > > > > ```> __Button|Icon：Underline__``` <br />
539
- > > > > ```> __Button|Icon：Text Width__```
540
- > >
541
- > > <!-- -->
542
- > >
543
-
544
-
545
- >
546
- > <!-- -->
547
- >
548
- > > Attached Segment:
549
- > > ### Conditionals
550
- > > "Button groups can contain conditionals"
551
544
  >
552
- > <!-- -->
553
545
  >
554
- > > Divided Segment Grid:
555
- > > > HTML Top Attached Segment:
556
- > > > > Top Attached Label:
557
- > > > > Conditionals
558
- > >
559
- > > <!-- -->
560
- > >
561
- > > > Center Aligned Six Wide Column:
562
- > > > ##### Preview
563
- > > > > Icon Buttons:
564
- > > > > __Button|Cancel__
565
- > > > > __Div Tag||Or__
566
- > > > > __Positive Button|Save__
567
- > >
568
- > > <!-- -->
569
- > >
570
- > > > Left Aligned Ten Wide Column:
571
- > > > ##### Markdown Syntax
572
- > > > > Inverted Very Padded Segment:
573
- > > > > ```> Icon Buttons：``` <br />
574
- > > > > ```> __Button|Cancel__``` <br />
575
- > > > > ```> __Div Tag||Or__``` <br />
576
- > > > > ```> __Positive Button|Save__```
577
546
  > >
578
547
  > > <!-- -->
579
548
  > >
580
- > > > Center Aligned Six Wide Column:
581
- > > > ##### Preview
582
- > > > > Icon Buttons:
583
- > > > > __Button|un__
584
- > > > > __Div Tag||Or|Data:ou__
585
- > > > > __Positive Button|deux|Positive-ID__
549
+ > > > Attached Segment:
550
+ > > > ### Conditionals
551
+ > > > "Button groups can contain conditionals"
586
552
  > >
587
553
  > > <!-- -->
588
554
  > >
589
- > > > Left Aligned Ten Wide Column:
590
- > > > ##### Markdown Syntax
591
- > > > > Inverted Very Padded Segment:
592
- > > > > ```> Icon Buttons：``` <br />
593
- > > > > ```> __Button|un__``` <br />
594
- > > > > ```> __Div Tag|Or|Data：ou__``` <br />
595
- > > > > ```> __Positive Button|deux|Positive-ID__```
596
- > >
597
- > > <!-- -->
598
- > >
555
+ > > > Divided Segment Grid:
556
+ > > > > HTML Top Attached Segment:
557
+ > > > > > Top Attached Label:
558
+ > > > > > Conditionals
559
+ > > >
560
+ > > > <!-- -->
561
+ > > >
562
+ > > > > Center Aligned Six Wide Column:
563
+ > > > > ##### Preview
564
+ > > > > > Icon Buttons:
565
+ > > > > > __Button|Cancel__
566
+ > > > > > __Div Tag||Or__
567
+ > > > > > __Positive Button|Save__
568
+ > > >
569
+ > > > <!-- -->
570
+ > > >
571
+ > > > > Left Aligned Ten Wide Column:
572
+ > > > > ##### Markdown Syntax
573
+ > > > > > Inverted Very Padded Segment:
574
+ > > > > > ```> Icon Buttons：``` <br />
575
+ > > > > > ```> __Button|Cancel__``` <br />
576
+ > > > > > ```> __Div Tag||Or__``` <br />
577
+ > > > > > ```> __Positive Button|Save__```
578
+ > > >
579
+ > > > <!-- -->
580
+ > > >
581
+ > > > > Center Aligned Six Wide Column:
582
+ > > > > ##### Preview
583
+ > > > > > Icon Buttons:
584
+ > > > > > __Button|un__
585
+ > > > > > __Div Tag||Or|Data:ou__
586
+ > > > > > __Positive Button|deux|Positive-ID__
587
+ > > >
588
+ > > > <!-- -->
589
+ > > >
590
+ > > > > Left Aligned Ten Wide Column:
591
+ > > > > ##### Markdown Syntax
592
+ > > > > > Inverted Very Padded Segment:
593
+ > > > > > ```> Icon Buttons：``` <br />
594
+ > > > > > ```> __Button|un__``` <br />
595
+ > > > > > ```> __Div Tag|Or|Data：ou__``` <br />
596
+ > > > > > ```> __Positive Button|deux|Positive-ID__```
597
+ > > >
598
+ > > > <!-- -->
599
+ > > >