markdown-ui 0.1.15 → 0.1.16

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