markdown-ui 0.1.15 → 0.1.16

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 (31) hide show
  1. checksums.yaml +4 -4
  2. data/Changelog +19 -0
  3. data/Gemfile +3 -0
  4. data/README.md +37 -5
  5. data/TODO.md +5 -5
  6. data/components/elements/markdown-ui-content/lib/content/content_block.rb +19 -0
  7. data/components/elements/markdown-ui-content/lib/content/flag.rb +24 -0
  8. data/components/elements/markdown-ui-content/lib/content/header_block.rb +19 -0
  9. data/components/elements/markdown-ui-content/lib/content/parser.rb +2 -0
  10. data/components/elements/markdown-ui-content/lib/content/span_block.rb +19 -0
  11. data/exe/markdown-ui +5 -5
  12. data/lib/markdown-ui.rb +7 -1
  13. data/lib/markdown-ui/version.rb +1 -1
  14. data/website/about.html +16 -7
  15. data/website/about.md +13 -3
  16. data/website/compile.sh +6 -13
  17. data/website/docs/button.html +52 -43
  18. data/website/docs/button.md +49 -39
  19. data/website/docs/container.html +16 -7
  20. data/website/docs/container.md +13 -3
  21. data/website/docs/divider.html +225 -10
  22. data/website/docs/divider.md +202 -6
  23. data/website/docs/flag.html +4419 -0
  24. data/website/docs/flag.md +1721 -0
  25. data/website/docs/header.html +256 -0
  26. data/website/docs/header.md +220 -0
  27. data/website/docs/toc.html +79 -42
  28. data/website/docs/toc.md +71 -38
  29. data/website/index.html +155 -142
  30. data/website/index.md +111 -98
  31. metadata +10 -2
data/website/docs/button.md CHANGED
@@ -1,8 +1,8 @@
1
1
  > Container:
2
2
  > > Inverted Segment:
3
- > > > Inverted Menu:
3
+ > > > Stackable Inverted Container Menu:
4
4
  > > > [Markdown UI](http：//jjuliano.github.io/markdown-ui "basic")
5
- > > > > Inverted Right Menu:
5
+ > > > > Stackable Inverted Right Menu:
6
6
  > > > > [Table of Contents](toc.html)
7
7
  > > > > [About](../about.html)
8
8
  > > > > [Github](https：//github.com/jjuliano/markdown-ui)
@@ -22,7 +22,7 @@
22
22
  > > "Standard Button"
23
23
  >
24
24
  > <!-- -->
25
- > > Divided Segment Grid:
25
+ > > Stackable Divided Segment Grid:
26
26
  > > > Attached Segment:
27
27
  > > > > Top Attached Label:
28
28
  > > > > Standard Button
@@ -39,7 +39,7 @@
39
39
  > > > > ``` __Button|Follow__ ```
40
40
  >
41
41
  > <!-- -->
42
- > > Divided Segment Grid:
42
+ > > Stackable Divided Segment Grid:
43
43
  > > > Attached Segment:
44
44
  > > > > Top Attached Label:
45
45
  > > > > Standard Button with Custom Class And ID
@@ -56,7 +56,7 @@
56
56
  > > > > ```__<Optional-Class> Button|Follow|<Optional-ID>__```
57
57
  >
58
58
  > <!-- -->
59
- > > Divided Segment Grid:
59
+ > > Stackable Divided Segment Grid:
60
60
  > > > Attached Segment:
61
61
  > > > > Top Attached Label:
62
62
  > > > > Focusable Button
@@ -78,7 +78,7 @@
78
78
  > > "A button can be formatted to show different levels of emphasis"
79
79
  >
80
80
  > <!-- -->
81
- > > Divided Segment Grid:
81
+ > > Stackable Divided Segment Grid:
82
82
  > > > Attached Segment:
83
83
  > > > > Top Attached Label:
84
84
  > > > > Emphasis
@@ -103,7 +103,7 @@
103
103
  > > "A button can animate to show hidden content"
104
104
  >
105
105
  > <!-- -->
106
- > > Divided Segment Grid:
106
+ > > Stackable Divided Segment Grid:
107
107
  > > > Attached Segment:
108
108
  > > > > Top Attached Label:
109
109
  > > > > Animated
@@ -120,7 +120,7 @@
120
120
  > > > > ```__Animated Button|Next;Icon：Right Arrow__```
121
121
  >
122
122
  > <!-- -->
123
- > > Divided Segment Grid:
123
+ > > Stackable Divided Segment Grid:
124
124
  > > > Attached Segment:
125
125
  > > > > Top Attached Label:
126
126
  > > > > Vertical Animated
@@ -137,7 +137,7 @@
137
137
  > > > > ```__Vertical Animated Button|Icon：Shop;Shop__```
138
138
  >
139
139
  > <!-- -->
140
- > > Divided Segment Grid:
140
+ > > Stackable Divided Segment Grid:
141
141
  > > > Attached Segment:
142
142
  > > > > Top Attached Label:
143
143
  > > > > Fade Animated
@@ -159,7 +159,7 @@
159
159
  > > "A button can have only an icon"
160
160
  >
161
161
  > <!-- -->
162
- > > Divided Segment Grid:
162
+ > > Stackable Divided Segment Grid:
163
163
  > > > Attached Segment:
164
164
  > > > > Top Attached Label:
165
165
  > > > > Icon Button
@@ -181,7 +181,7 @@
181
181
  > > "A button can have an icon and a label"
182
182
  >
183
183
  > <!-- -->
184
- > > Divided Segment Grid:
184
+ > > Stackable Divided Segment Grid:
185
185
  > > > Attached Segment:
186
186
  > > > > Top Attached Label:
187
187
  > > > > Labeled Icon
@@ -203,7 +203,7 @@
203
203
  > > "A basic button is less pronounced"
204
204
  >
205
205
  > <!-- -->
206
- > > Divided Segment Grid:
206
+ > > Stackable Divided Segment Grid:
207
207
  > > > Attached Segment:
208
208
  > > > > Top Attached Label:
209
209
  > > > > Basic Button
@@ -220,7 +220,7 @@
220
220
  > > > > ``` __Basic Button|Icon：User,Add Friend__ ```
221
221
  >
222
222
  > <!-- -->
223
- > > Divided Segment Grid:
223
+ > > Stackable Divided Segment Grid:
224
224
  > > > Attached Segment:
225
225
  > > > > Top Attached Label:
226
226
  > > > > Basic Button
@@ -260,7 +260,7 @@
260
260
  > > "A button can be formatted to appear on dark backgrounds"
261
261
  >
262
262
  > <!-- -->
263
- > > Divided Segment Grid:
263
+ > > Stackable Divided Segment Grid:
264
264
  > > > Attached Segment:
265
265
  > > > > Top Attached Label:
266
266
  > > > > Inverted
@@ -306,7 +306,7 @@
306
306
  > > "Buttons can exist together as a group"
307
307
  >
308
308
  > <!-- -->
309
- > > Divided Segment Grid:
309
+ > > Stackable Divided Segment Grid:
310
310
  > > > Attached Segment:
311
311
  > > > > Top Attached Label:
312
312
  > > > > Buttons
@@ -334,7 +334,7 @@
334
334
  > > "Buttons can exist together as a group"
335
335
  >
336
336
  > <!-- -->
337
- > > Divided Segment Grid:
337
+ > > Stackable Divided Segment Grid:
338
338
  > > > Attached Segment:
339
339
  > > > > Top Attached Label:
340
340
  > > > > Buttons
@@ -381,7 +381,7 @@
381
381
  > > "Button groups can contain conditionals"
382
382
  >
383
383
  > <!-- -->
384
- > > Divided Segment Grid:
384
+ > > Stackable Divided Segment Grid:
385
385
  > > > Attached Segment:
386
386
  > > > > Top Attached Label:
387
387
  > > > > Conditionals
@@ -430,7 +430,7 @@
430
430
  > > "A button can show it is currently the active user selection"
431
431
  >
432
432
  > <!-- -->
433
- > > Divided Segment Grid:
433
+ > > Stackable Divided Segment Grid:
434
434
  > > > Attached Segment:
435
435
  > > > > Top Attached Label:
436
436
  > > > > Active State
@@ -452,7 +452,7 @@
452
452
  > > "A button can show it is currently unable to be interacted with"
453
453
  >
454
454
  > <!-- -->
455
- > > Divided Segment Grid:
455
+ > > Stackable Divided Segment Grid:
456
456
  > > > Attached Segment:
457
457
  > > > > Top Attached Label:
458
458
  > > > > Disabled State
@@ -474,7 +474,7 @@
474
474
  > > "A button can show a loading indicator"
475
475
  >
476
476
  > <!-- -->
477
- > > Divided Segment Grid:
477
+ > > Stackable Divided Segment Grid:
478
478
  > > > Attached Segment:
479
479
  > > > > Top Attached Label:
480
480
  > > > > Loading State
@@ -506,7 +506,7 @@
506
506
  > > "A button can be formatted to link to a social website"
507
507
  >
508
508
  > <!-- -->
509
- > > Divided Segment Grid:
509
+ > > Stackable Divided Segment Grid:
510
510
  > > > Attached Segment:
511
511
  > > > > Top Attached Label:
512
512
  > > > > Social
@@ -540,7 +540,7 @@
540
540
  > > "A button can have different sizes"
541
541
  >
542
542
  > <!-- -->
543
- > > Divided Segment Grid:
543
+ > > Stackable Divided Segment Grid:
544
544
  > > > Attached Segment:
545
545
  > > > > Top Attached Label:
546
546
  > > > > Size
@@ -576,7 +576,7 @@
576
576
  > > "A button can have different colors"
577
577
  >
578
578
  > <!-- -->
579
- > > Divided Segment Grid:
579
+ > > Stackable Divided Segment Grid:
580
580
  > > > Attached Segment:
581
581
  > > > > Top Attached Label:
582
582
  > > > > Colored
@@ -622,7 +622,7 @@
622
622
  > > "A button can reduce its padding to fit into tighter spaces"
623
623
  >
624
624
  > <!-- -->
625
- > > Divided Segment Grid:
625
+ > > Stackable Divided Segment Grid:
626
626
  > > > Attached Segment:
627
627
  > > > > Top Attached Label:
628
628
  > > > > Compact
@@ -648,7 +648,7 @@
648
648
  > > "A button can hint towards a positive consequence"
649
649
  >
650
650
  > <!-- -->
651
- > > Divided Segment Grid:
651
+ > > Stackable Divided Segment Grid:
652
652
  > > > Attached Segment:
653
653
  > > > > Top Attached Label:
654
654
  > > > > Positive
@@ -672,7 +672,7 @@
672
672
  > > "A button can hint towards a negative consequence"
673
673
  >
674
674
  > <!-- -->
675
- > > Divided Segment Grid:
675
+ > > Stackable Divided Segment Grid:
676
676
  > > > Attached Segment:
677
677
  > > > > Top Attached Label:
678
678
  > > > > Negative
@@ -694,7 +694,7 @@
694
694
  > > "A button can take the width of its container"
695
695
  >
696
696
  > <!-- -->
697
- > > Divided Segment Grid:
697
+ > > Stackable Divided Segment Grid:
698
698
  > > > Attached Segment:
699
699
  > > > > Top Attached Label:
700
700
  > > > > Fluid
@@ -716,7 +716,7 @@
716
716
  > > "A button can be circular"
717
717
  >
718
718
  > <!-- -->
719
- > > Divided Segment Grid:
719
+ > > Stackable Divided Segment Grid:
720
720
  > > > Attached Segment:
721
721
  > > > > Top Attached Label:
722
722
  > > > > Circular
@@ -738,7 +738,7 @@
738
738
  > > "A button can be attached to the top or bottom of other content"
739
739
  >
740
740
  > <!-- -->
741
- > > Divided Segment Grid:
741
+ > > Stackable Divided Segment Grid:
742
742
  > > > Attached Segment:
743
743
  > > > > Top Attached Label:
744
744
  > > > > Vertically Attached
@@ -805,7 +805,7 @@
805
805
  > > "A button can be attached to the left or right of other content"
806
806
  >
807
807
  > <!-- -->
808
- > > Divided Segment Grid:
808
+ > > Stackable Divided Segment Grid:
809
809
  > > > Attached Segment:
810
810
  > > > > Top Attached Label:
811
811
  > > > > Horizontally Attached
@@ -833,7 +833,7 @@
833
833
  > > "Groups can be formatted to appear vertically"
834
834
  >
835
835
  > <!-- -->
836
- > > Divided Segment Grid:
836
+ > > Stackable Divided Segment Grid:
837
837
  > > > Attached Segment:
838
838
  > > > > Top Attached Label:
839
839
  > > > > Vertical Buttons
@@ -863,7 +863,7 @@
863
863
  > > "Groups can be formatted as icons"
864
864
  >
865
865
  > <!-- -->
866
- > > Divided Segment Grid:
866
+ > > Stackable Divided Segment Grid:
867
867
  > > > Attached Segment:
868
868
  > > > > Top Attached Label:
869
869
  > > > > Icon Buttons
@@ -891,7 +891,7 @@
891
891
  > > "Groups can be formatted as labeled icons"
892
892
  >
893
893
  > <!-- -->
894
- > > Divided Segment Grid:
894
+ > > Stackable Divided Segment Grid:
895
895
  > > > Attached Segment:
896
896
  > > > > Top Attached Label:
897
897
  > > > > Labeled Icon Buttons
@@ -919,7 +919,7 @@
919
919
  > > "Groups can be formatted to use multiple button types together"
920
920
  >
921
921
  > <!-- -->
922
- > > Divided Segment Grid:
922
+ > > Stackable Divided Segment Grid:
923
923
  > > > Attached Segment:
924
924
  > > > > Top Attached Label:
925
925
  > > > > Mixed Group
@@ -947,7 +947,7 @@
947
947
  > > "Groups can have their widths divided evenly"
948
948
  >
949
949
  > <!-- -->
950
- > > Divided Segment Grid:
950
+ > > Stackable Divided Segment Grid:
951
951
  > > > Attached Segment:
952
952
  > > > > Top Attached Label:
953
953
  > > > > Equal Width
@@ -992,7 +992,7 @@
992
992
  > > "Groups can have a shared color"
993
993
  >
994
994
  > <!-- -->
995
- > > Divided Segment Grid:
995
+ > > Stackable Divided Segment Grid:
996
996
  > > > Attached Segment:
997
997
  > > > > Top Attached Label:
998
998
  > > > > Colored Buttons
@@ -1020,7 +1020,7 @@
1020
1020
  > > "A button group can be less pronounced"
1021
1021
  >
1022
1022
  > <!-- -->
1023
- > > Divided Segment Grid:
1023
+ > > Stackable Divided Segment Grid:
1024
1024
  > > > Attached Segment:
1025
1025
  > > > > Top Attached Label:
1026
1026
  > > > > Basic Buttons
@@ -1079,7 +1079,7 @@
1079
1079
  > > "Groups can have a shared size"
1080
1080
  >
1081
1081
  > <!-- -->
1082
- > > Divided Segment Grid:
1082
+ > > Stackable Divided Segment Grid:
1083
1083
  > > > Attached Segment:
1084
1084
  > > > > Top Attached Label:
1085
1085
  > > > > Group Sizes
@@ -1135,4 +1135,14 @@
1135
1135
  > > > > ``` > Large Buttons： ``` <br />
1136
1136
  > > > > ``` > __Button|One__ ``` <br />
1137
1137
  > > > > ``` > __Div Tag||Or__ ``` <br />
1138
- > > > > ``` > __Button|Two__ ```
1138
+ > > > > ``` > __Button|Two__ ```
1139
+ >
1140
+ > <!-- -->
1141
+ > > Inverted Center Aligned Footer Segment Container Grid:
1142
+ > > > Ten Wide Column:
1143
+ > > > ##### Help Preserve This Project:Inverted
1144
+ > > > Please help Markdown-UI by means of voluntary donations, money donated to the project will benefit the project by ensuring that Markdown-UI itself will remain well supported for the foreseeable future.
1145
+ > > > " "
1146
+ > > > [__Primary Button|Donate Today__](PAYPAL_BUTTON)
1147
+ > ____
1148
+ > > [Free and Open Source (MIT)](http：//markdown-ui.mit-license.org)
data/website/docs/container.html CHANGED
@@ -4,23 +4,23 @@
4
4
  <head>
5
5
  <meta charset='utf-8'>
6
6
  <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
7
- <meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1'>
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
8
8
 
9
- <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.5/semantic.min.css'>
9
+ <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.css'>
10
10
  <script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
11
- <script src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.5/semantic.min.js'></script>
11
+ <script src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.js'></script>
12
12
 
13
13
  <!--[if lt IE 9]>
14
14
  <script src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script>
15
15
  <![endif]-->
16
16
  </head>
17
-
18
17
  <body>
19
- <div class="ui container">
18
+ <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/reset.min.css'>
19
+ <div class="ui container">
20
20
  <div class="ui inverted segment">
21
- <div class="ui inverted menu">
21
+ <div class="ui stackable inverted container menu">
22
22
  <a class="ui basic item" href="http://jjuliano.github.io/markdown-ui">Markdown UI</a>
23
- <div class="ui inverted right menu">
23
+ <div class="ui stackable inverted right menu">
24
24
  <a class="ui item" href="toc.html">Table of Contents</a>
25
25
  <a class="ui item" href="../about.html">About</a>
26
26
  <a class="ui item" href="https://github.com/jjuliano/markdown-ui">Github</a>
@@ -365,6 +365,15 @@
365
365
  </div>
366
366
  </div>
367
367
  </div>
368
+ <!-- -->
369
+ <div class="ui inverted center aligned footer segment container grid">
370
+ <div class="ui ten wide column"><h5 class="ui inverted header">Help Preserve This Project</h5>
371
+ Please help Markdown-UI by means of voluntary donations, money donated to the project will benefit the project by ensuring that Markdown-UI itself will remain well supported for the foreseeable future.
372
+ <p></p>
373
+
374
+ <a class="ui item" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=RVL2DAA4Y6NXL"><button class="ui primary button">Donate Today</button></a>
375
+ <div class="ui divider"></div><a class="ui item" href="http://markdown-ui.mit-license.org">Free and Open Source (MIT)</a></div>
376
+ </div>
368
377
  </div>
369
378
 
370
379
  </body>
data/website/docs/container.md CHANGED
@@ -1,8 +1,8 @@
1
1
  > Container:
2
2
  > > Inverted Segment:
3
- > > > Inverted Menu:
3
+ > > > Stackable Inverted Container Menu:
4
4
  > > > [Markdown UI](http：//jjuliano.github.io/markdown-ui "basic")
5
- > > > > Inverted Right Menu:
5
+ > > > > Stackable Inverted Right Menu:
6
6
  > > > > [Table of Contents](toc.html)
7
7
  > > > > [About](../about.html)
8
8
  > > > > [Github](https：//github.com/jjuliano/markdown-ui)
@@ -266,4 +266,14 @@ ____
266
266
  > > > > Inverted Very Padded Segment:
267
267
  > > > > ``` > Raised Very Padded Text Container Segment： ``` <br />
268
268
  > > > > ``` > ## Header ``` <br />
269
- > > > > ``` > "Lorem Ipsum Dolor" ``` <br />
269
+ > > > > ``` > "Lorem Ipsum Dolor" ``` <br />
270
+ >
271
+ > <!-- -->
272
+ > > Inverted Center Aligned Footer Segment Container Grid:
273
+ > > > Ten Wide Column:
274
+ > > > ##### Help Preserve This Project:Inverted
275
+ > > > Please help Markdown-UI by means of voluntary donations, money donated to the project will benefit the project by ensuring that Markdown-UI itself will remain well supported for the foreseeable future.
276
+ > > > " "
277
+ > > > [__Primary Button|Donate Today__](PAYPAL_BUTTON)
278
+ > ____
279
+ > > [Free and Open Source (MIT)](http：//markdown-ui.mit-license.org)
data/website/docs/divider.html CHANGED
@@ -4,23 +4,23 @@
4
4
  <head>
5
5
  <meta charset='utf-8'>
6
6
  <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
7
- <meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1'>
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
8
8
 
9
- <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.5/semantic.min.css'>
9
+ <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.css'>
10
10
  <script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
11
- <script src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.5/semantic.min.js'></script>
11
+ <script src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.js'></script>
12
12
 
13
13
  <!--[if lt IE 9]>
14
14
  <script src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script>
15
15
  <![endif]-->
16
16
  </head>
17
-
18
17
  <body>
19
- <div class="ui container">
18
+ <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/reset.min.css'>
19
+ <div class="ui container">
20
20
  <div class="ui inverted segment">
21
- <div class="ui inverted menu">
21
+ <div class="ui stackable inverted container menu">
22
22
  <a class="ui basic item" href="http://jjuliano.github.io/markdown-ui">Markdown UI</a>
23
- <div class="ui inverted right menu">
23
+ <div class="ui stackable inverted right menu">
24
24
  <a class="ui item" href="toc.html">Table of Contents</a>
25
25
  <a class="ui item" href="../about.html">About</a>
26
26
  <a class="ui item" href="https://github.com/jjuliano/markdown-ui">Github</a>
@@ -42,7 +42,7 @@
42
42
  <p>Standard Divider</p>
43
43
  </div>
44
44
  <!-- -->
45
- <div class="ui divided segment grid">
45
+ <div class="ui stackable divided segment grid">
46
46
  <div class="ui attached segment">
47
47
  <div class="ui top attached label">Standard Divider</div>
48
48
  </div>
@@ -65,7 +65,7 @@
65
65
  <p>A divider can segment content vertically</p>
66
66
  </div>
67
67
  <!-- -->
68
- <div class="ui divided segment grid">
68
+ <div class="ui stackable divided segment grid">
69
69
  <div class="ui attached segment">
70
70
  <div class="ui top attached label">Vertical Divider</div>
71
71
  </div>
@@ -167,7 +167,7 @@
167
167
  <p>A divider can segment content horizontally</p>
168
168
  </div>
169
169
  <!-- -->
170
- <div class="ui divided segment grid">
170
+ <div class="ui stackable divided segment grid">
171
171
  <div class="ui attached segment">
172
172
  <div class="ui top attached label">Horizontal Divider</div>
173
173
  </div>
@@ -323,6 +323,221 @@ Specifications</div>
323
323
  </div>
324
324
  </div>
325
325
  </div>
326
+ <!-- -->
327
+ <div class="ui basic segment">
328
+ <h2 id="variations" class="ui dividing left aligned header">Variations</h2>
329
+ </div>
330
+ <!-- -->
331
+ <div class="ui basic segment">
332
+ <h4 id="inverted-divider" class="ui header">Inverted Divider</h4>
333
+ <p>A divider can have its colors inverted</p>
334
+ </div>
335
+ <!-- -->
336
+ <div class="ui stackable divided segment grid">
337
+ <div class="ui attached segment">
338
+ <div class="ui top attached label">Inverted Divider</div>
339
+ </div>
340
+ <!-- -->
341
+ <div class="ui center aligned six wide column">
342
+ <h5 class="ui center aligned header">Preview</h5>
343
+ <div class="ui inverted segment">
344
+ <p>Lorem Ipsum Dolor</p>
345
+ <div class="ui inverted divider"></div>
346
+ <p>Lorem Ipsum Dolor</p>
347
+ <div class="ui horizontal inverted divider">Horizontal</div>
348
+ </div>
349
+ </div>
350
+ <!-- -->
351
+ <div class="ui ten wide column">
352
+ <h5 class="ui header">Markdown Syntax</h5>
353
+ <div class="ui inverted very padded segment">
354
+ <code>&gt; Inverted Segment:</code>
355
+ <br />
356
+ <code>&gt; "Lorem Ipsum Dolor"</code>
357
+ <br />
358
+ <code>&gt; &gt; Inverted Divider:</code>
359
+ <br />
360
+ <code>&gt; &gt; &amp;nbsp;</code>
361
+ <br />
362
+ <code>&gt;</code>
363
+ <br />
364
+ <code>&gt; "Lorem Ipsum Dolor"</code>
365
+ <br />
366
+ <code>&gt; &gt; Horizontal Inverted Divider Header:</code>
367
+ <br />
368
+ <code>&gt; &gt; Horizontal</code>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ <!-- -->
373
+ <div class="ui basic segment">
374
+ <h4 id="fitted-divider" class="ui header">Fitted Divider</h4>
375
+ <p>A divider can be fitted, without any space above or below it.</p>
376
+ </div>
377
+ <!-- -->
378
+ <div class="ui stackable divided segment grid">
379
+ <div class="ui attached segment">
380
+ <div class="ui top attached label">Fitted Divider</div>
381
+ </div>
382
+ <!-- -->
383
+ <div class="ui center aligned six wide column">
384
+ <h5 class="ui center aligned header">Preview</h5>
385
+ <div class="ui segment"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><div class="ui fitted divider"></div>
386
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</div>
387
+ </div>
388
+ <!-- -->
389
+ <div class="ui ten wide column">
390
+ <h5 class="ui header">Markdown Syntax</h5>
391
+ <div class="ui inverted very padded segment">
392
+ <code>&gt; Segment:</code>
393
+ <br />
394
+ <code>&gt; "Lorem Ipsum Dolor ..."</code>
395
+ <br />
396
+ <code>&gt; &gt; Fitted Divider:</code>
397
+ <br />
398
+ <code>&gt; &gt; &amp;nbsp;</code>
399
+ <br />
400
+ <code>&gt;</code>
401
+ <br />
402
+ <code>&gt; "Lorem Ipsum Dolor ..."</code>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ <!-- -->
407
+ <div class="ui basic segment">
408
+ <h4 id="hidden-divider" class="ui header">Hidden Divider</h4>
409
+ <p>A hidden divider divides content without creating a dividing line</p>
410
+ </div>
411
+ <!-- -->
412
+ <div class="ui stackable divided segment grid">
413
+ <div class="ui attached segment">
414
+ <div class="ui top attached label">Hidden Divider</div>
415
+ </div>
416
+ <!-- -->
417
+ <div class="ui center aligned six wide column">
418
+ <h5 class="ui center aligned header">Preview</h5>
419
+ <div class="ui segment">
420
+ <h3 class="ui header">Section One</h3>
421
+ <p>Lorem Ipsum Dolor</p>
422
+ <div class="ui hidden divider"></div>
423
+ <h3 class="ui header">Section Two</h3>
424
+ <p>Lorem Ipsum Dolor</p>
425
+ </div>
426
+ </div>
427
+ <!-- -->
428
+ <div class="ui ten wide column">
429
+ <h5 class="ui header">Markdown Syntax</h5>
430
+ <div class="ui inverted very padded segment">
431
+ <code>&gt; ### Section One</code>
432
+ <br />
433
+ <code>&gt; "Lorem Ipsum Dolor"</code>
434
+ <br />
435
+ <code>&gt; &gt; Hidden Divider:</code>
436
+ <br />
437
+ <code>&gt; &gt; &amp;nbsp;</code>
438
+ <br />
439
+ <code>&gt;</code>
440
+ <br />
441
+ <code>&gt; ### Section Two</code>
442
+ <br />
443
+ <code>&gt; "Lorem Ipsum Dolor ..."</code>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ <!-- -->
448
+ <div class="ui basic segment">
449
+ <h4 id="section-divider" class="ui header">Section Divider</h4>
450
+ <p>A divider can provide greater margins to divide sections of content</p>
451
+ </div>
452
+ <!-- -->
453
+ <div class="ui stackable divided segment grid">
454
+ <div class="ui attached segment">
455
+ <div class="ui top attached label">Section Divider</div>
456
+ </div>
457
+ <!-- -->
458
+ <div class="ui center aligned six wide column">
459
+ <h5 class="ui center aligned header">Preview</h5>
460
+ <div class="ui segment">
461
+ <h3 class="ui header">Section One</h3>
462
+ <p>Lorem Ipsum Dolor</p>
463
+ <div class="ui section divider"></div>
464
+ <h3 class="ui header">Section Two</h3>
465
+ <p>Lorem Ipsum Dolor</p>
466
+ </div>
467
+ </div>
468
+ <!-- -->
469
+ <div class="ui ten wide column">
470
+ <h5 class="ui header">Markdown Syntax</h5>
471
+ <div class="ui inverted very padded segment">
472
+ <code>&gt; ### Section One</code>
473
+ <br />
474
+ <code>&gt; "Lorem Ipsum Dolor"</code>
475
+ <br />
476
+ <code>&gt; &gt; Section Divider:</code>
477
+ <br />
478
+ <code>&gt; &gt; &amp;nbsp;</code>
479
+ <br />
480
+ <code>&gt;</code>
481
+ <br />
482
+ <code>&gt; ### Section Two</code>
483
+ <br />
484
+ <code>&gt; "Lorem Ipsum Dolor ..."</code>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ <!-- -->
489
+ <div class="ui basic segment">
490
+ <h4 id="clearing-divider" class="ui header">Clearing Divider</h4>
491
+ <p>A divider can clear the contents above it</p>
492
+ </div>
493
+ <!-- -->
494
+ <div class="ui stackable divided segment grid">
495
+ <div class="ui attached segment">
496
+ <div class="ui top attached label">Clearing Divider</div>
497
+ </div>
498
+ <!-- -->
499
+ <div class="ui center aligned six wide column">
500
+ <h5 class="ui center aligned header">Preview</h5>
501
+ <div class="ui segment">
502
+ <div class="ui right floated header">Floated Content</div>
503
+ <!-- -->
504
+ <div class="ui clearing divider"></div>
505
+ <p>Lorem Ipsum Dolor</p>
506
+ </div>
507
+ </div>
508
+ <!-- -->
509
+ <div class="ui ten wide column">
510
+ <h5 class="ui header">Markdown Syntax</h5>
511
+ <div class="ui inverted very padded segment">
512
+ <code>&gt; Segment:</code>
513
+ <br />
514
+ <code>&gt; &gt; Right Floated Header:</code>
515
+ <br />
516
+ <code>&gt; &gt; Floated Content</code>
517
+ <br />
518
+ <code>&gt;</code>
519
+ <br />
520
+ <code>&gt; &lt;!-- --&gt;</code>
521
+ <br />
522
+ <code>&gt; &gt; Clearing Divider:</code>
523
+ <br />
524
+ <code>&gt; &gt; &amp;nbsp;</code>
525
+ <br />
526
+ <code>&gt;</code>
527
+ <br />
528
+ <code>&gt; "Lorem Ipsum Dolor"</code>
529
+ </div>
530
+ </div>
531
+ </div>
532
+ <!-- -->
533
+ <div class="ui inverted center aligned footer segment container grid">
534
+ <div class="ui ten wide column"><h5 class="ui inverted header">Help Preserve This Project</h5>
535
+ Please help Markdown-UI by means of voluntary donations, money donated to the project will benefit the project by ensuring that Markdown-UI itself will remain well supported for the foreseeable future.
536
+ <p></p>
537
+
538
+ <a class="ui item" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=RVL2DAA4Y6NXL"><button class="ui primary button">Donate Today</button></a>
539
+ <div class="ui divider"></div><a class="ui item" href="http://markdown-ui.mit-license.org">Free and Open Source (MIT)</a></div>
540
+ </div>
326
541
  </div>
327
542
 
328
543
  </body>