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/toc.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 active item" href="toc.html">Docs</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>
@@ -34,23 +34,23 @@
34
34
  <h2 class="ui header">
35
35
  <a class="ui item" href="button.html#button">Button</a>
36
36
  </h2>
37
- <div class="ui two column doubling grid container">
37
+ <div class="ui two column stackable justified aligned grid container">
38
38
  <div class="ui column"><h3 class="ui header"><a class="ui item" href="button.html#types">Types</a></h3><a class="ui item" href="button.html#simple-button">Button</a>
39
- ,
39
+ &#xB7;
40
40
  <a class="ui item" href="button.html#emphasis">Emphasis</a>
41
- ,
41
+ &#xB7;
42
42
  <a class="ui item" href="button.html#animated">Animated</a>
43
- ,
43
+ &#xB7;
44
44
  <a class="ui item" href="button.html#icon">Icon</a>
45
- ,
45
+ &#xB7;
46
46
  <a class="ui item" href="button.html#labeled-icon">Labeled Icon</a>
47
- ,
47
+ &#xB7;
48
48
  <a class="ui item" href="button.html#basic-button">Basic</a>
49
- ,
49
+ &#xB7;
50
50
  <a class="ui item" href="button.html#inverted">Inverted</a></div>
51
51
  <!-- -->
52
52
  <div class="ui column"><h3 class="ui header"><a class="ui item" href="button.html#groups">Groups</a></h3><a class="ui item" href="button.html#buttons">Buttons</a>
53
- ,
53
+ &#xB7;
54
54
  <a class="ui item" href="button.html#icon-buttons">Icon Buttons</a></div>
55
55
  <!-- -->
56
56
  <div class="ui column">
@@ -61,80 +61,117 @@
61
61
  </div>
62
62
  <!-- -->
63
63
  <div class="ui column"><h3 class="ui header"><a class="ui item" href="button.html#states">States</a></h3><a class="ui item" href="button.html#active">Active</a>
64
- ,
64
+ &#xB7;
65
65
  <a class="ui item" href="button.html#disabled">Disabled</a>
66
- ,
66
+ &#xB7;
67
67
  <a class="ui item" href="button.html#loading">Loading</a></div>
68
68
  <!-- -->
69
69
  <div class="ui column"><h3 class="ui header"><a class="ui item" href="button.html#variations">Variations</a></h3><a class="ui item" href="button.html#social">Social</a>
70
- ,
70
+ &#xB7;
71
71
  <a class="ui item" href="button.html#size">Size</a>
72
- ,
72
+ &#xB7;
73
73
  <a class="ui item" href="button.html#colored">Colored</a>
74
- ,
74
+ &#xB7;
75
75
  <a class="ui item" href="button.html#compact">Compact</a>
76
- ,
76
+ &#xB7;
77
77
  <a class="ui item" href="button.html#positive">Positive</a>
78
- ,
78
+ &#xB7;
79
79
  <a class="ui item" href="button.html#negative">Negative</a>
80
- ,
80
+ &#xB7;
81
81
  <a class="ui item" href="button.html#fluid">Fluid</a>
82
- ,
82
+ &#xB7;
83
83
  <a class="ui item" href="button.html#circular">Circular</a>
84
- ,
84
+ &#xB7;
85
85
  <a class="ui item" href="button.html#vertically-attached">Vertically Attached</a>
86
- ,
86
+ &#xB7;
87
87
  <a class="ui item" href="button.html#horizontally-attached">Horizontally Attached</a></div>
88
88
  <!-- -->
89
89
  <div class="ui column"><h3 class="ui header"><a class="ui item" href="button.html#group-variations">Group Variations</a></h3><a class="ui item" href="button.html#vertical-buttons">Vertical Buttons</a>
90
- ,
90
+ &#xB7;
91
91
  <a class="ui item" href="button.html#icon-buttons">Icon Buttons</a>
92
- ,
92
+ &#xB7;
93
93
  <a class="ui item" href="button.html#labeled-icon-buttons">Labeled Icon Buttons</a>
94
- ,
94
+ &#xB7;
95
95
  <a class="ui item" href="button.html#mixed-group">Mixed Group</a>
96
- ,
96
+ &#xB7;
97
97
  <a class="ui item" href="button.html#equal-width">Equal Width</a>
98
- ,
98
+ &#xB7;
99
99
  <a class="ui item" href="button.html#colored-buttons">Colored Buttons</a>
100
- ,
100
+ &#xB7;
101
101
  <a class="ui item" href="button.html#basic-buttons">Basic Buttons</a>
102
- ,
102
+ &#xB7;
103
103
  <a class="ui item" href="button.html#group-sizes">Group Sizes</a></div>
104
104
  </div>
105
105
  <!-- -->
106
106
  <h2 class="ui header">
107
107
  <a class="ui item" href="container.html#container">Container</a>
108
108
  </h2>
109
- <div class="ui two column doubling grid container">
109
+ <div class="ui two column stackable justified aligned grid container">
110
110
  <div class="ui column"><h3 class="ui header"><a class="ui item" href="container.html#types">Types</a></h3><a class="ui item" href="container.html#standard-container">Standard Container</a>
111
- ,
111
+ &#xB7;
112
112
  <a class="ui item" href="container.html#text-container">Text Container</a></div>
113
113
  <!-- -->
114
114
  <div class="ui column"><h3 class="ui header"><a class="ui item" href="container.html#variations">Variations</a></h3><a class="ui item" href="container.html#text-alignment">Text Alignment</a>
115
- ,
115
+ &#xB7;
116
116
  <a class="ui item" href="container.html#justified-aligned">Justified Aligned</a>
117
- ,
117
+ &#xB7;
118
118
  <a class="ui item" href="container.html#fluid">Fluid</a></div>
119
119
  <!-- -->
120
120
  <div class="ui column"><h3 class="ui header"><a class="ui item" href="container.html#examples">Examples</a></h3><a class="ui item" href="container.html#container-using-grids">Container Using Grids</a>
121
- ,
121
+ &#xB7;
122
122
  <a class="ui item" href="container.html#centered-menu">Centered Menu</a>
123
- ,
123
+ &#xB7;
124
124
  <a class="ui item" href="container.html#container-segment">Container Segment</a></div>
125
125
  </div>
126
126
  <!-- -->
127
127
  <h2 class="ui header">
128
128
  <a class="ui item" href="divider.html#divider">Divider</a>
129
129
  </h2>
130
- <div class="ui two column doubling grid container">
130
+ <div class="ui two column stackable justified aligned grid container">
131
131
  <div class="ui column"><h3 class="ui header"><a class="ui item" href="divider.html#types">Types</a></h3><a class="ui item" href="divider.html#standard-divider">Standard Divider</a>
132
- ,
132
+ &#xB7;
133
133
  <a class="ui item" href="divider.html#vertical-divider">Vertical Divider</a>
134
- ,
134
+ &#xB7;
135
135
  <a class="ui item" href="divider.html#horizontal-divider">Horizontal Divider</a></div>
136
+ <!-- -->
137
+ <div class="ui column"><h3 class="ui header"><a class="ui item" href="divider.html#variations">Variations</a></h3><a class="ui item" href="divider.html#inverted-divider">Inverted</a>
138
+ &#xB7;
139
+ <a class="ui item" href="divider.html#fitted-divider">Fitted</a>
140
+ &#xB7;
141
+ <a class="ui item" href="divider.html#hidden-divider">Hidden</a>
142
+ &#xB7;
143
+ <a class="ui item" href="divider.html#section-divider">Section</a>
144
+ &#xB7;
145
+ <a class="ui item" href="divider.html#clearing-divider">Clearing</a></div>
146
+ </div>
147
+ <!-- -->
148
+ <h2 class="ui header">
149
+ <a class="ui item" href="flag.html#flag">Flag</a>
150
+ </h2>
151
+ <!-- -->
152
+ <h2 class="ui header">
153
+ <a class="ui item" href="header.html#header">Header</a>
154
+ </h2>
155
+ <div class="ui two column stackable justified aligned grid container">
156
+ <div class="ui column"><h3 class="ui header"><a class="ui item" href="header.html#types">Types</a></h3><a class="ui item" href="header.html#page-headers">Page Headers</a>
157
+ &#xB7;
158
+ <a class="ui item" href="header.html#content-headers">Content Headers</a>
159
+ &#xB7;
160
+ <a class="ui item" href="header.html#icon-headers">Icon Headers</a>
161
+ &#xB7;
162
+ <a class="ui item" href="header.html#sub-headers">Sub Headers</a>
163
+ &#xB7;</div>
136
164
  </div>
137
165
  </div>
166
+ <!-- -->
167
+ <div class="ui inverted center aligned footer segment container grid">
168
+ <div class="ui ten wide column"><h5 class="ui inverted header">Help Preserve This Project</h5>
169
+ 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.
170
+ <p></p>
171
+
172
+ <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>
173
+ <div class="ui divider"></div><a class="ui item" href="http://markdown-ui.mit-license.org">Free and Open Source (MIT)</a></div>
174
+ </div>
138
175
  </div>
139
176
 
140
177
  </body>
data/website/docs/toc.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
  > > > > [Docs](toc.html "active")
7
7
  > > > > [About](../about.html)
8
8
  > > > > [Github](https：//github.com/jjuliano/markdown-ui)
@@ -12,21 +12,21 @@
12
12
  > > Text Container:
13
13
  > > # Table of Contents:Center Aligned
14
14
  > > ## [Button](button.html#button)
15
- > > > Two Column Doubling Grid Container:
15
+ > > > Two Column Stackable Justified Aligned Grid Container:
16
16
  > > > > Column:
17
17
  > > > > ### [Types](button.html#types)
18
- > > > > [Button](button.html#simple-button),
19
- > > > > [Emphasis](button.html#emphasis),
20
- > > > > [Animated](button.html#animated),
21
- > > > > [Icon](button.html#icon),
22
- > > > > [Labeled Icon](button.html#labeled-icon),
23
- > > > > [Basic](button.html#basic-button),
18
+ > > > > [Button](button.html#simple-button)&#183;
19
+ > > > > [Emphasis](button.html#emphasis)&#183;
20
+ > > > > [Animated](button.html#animated)&#183;
21
+ > > > > [Icon](button.html#icon)&#183;
22
+ > > > > [Labeled Icon](button.html#labeled-icon)&#183;
23
+ > > > > [Basic](button.html#basic-button)&#183;
24
24
  > > > > [Inverted](button.html#inverted)
25
25
  > > >
26
26
  > > > <!-- -->
27
27
  > > > > Column:
28
28
  > > > > ### [Groups](button.html#groups)
29
- > > > > [Buttons](button.html#buttons),
29
+ > > > > [Buttons](button.html#buttons)&#183;
30
30
  > > > > [Icon Buttons](button.html#icon-buttons)
31
31
  > > >
32
32
  > > > <!-- -->
@@ -37,64 +37,97 @@
37
37
  > > > <!-- -->
38
38
  > > > > Column:
39
39
  > > > > ### [States](button.html#states)
40
- > > > > [Active](button.html#active),
41
- > > > > [Disabled](button.html#disabled),
40
+ > > > > [Active](button.html#active)&#183;
41
+ > > > > [Disabled](button.html#disabled)&#183;
42
42
  > > > > [Loading](button.html#loading)
43
43
  > > >
44
44
  > > > <!-- -->
45
45
  > > > > Column:
46
46
  > > > > ### [Variations](button.html#variations)
47
- > > > > [Social](button.html#social),
48
- > > > > [Size](button.html#size),
49
- > > > > [Colored](button.html#colored),
50
- > > > > [Compact](button.html#compact),
51
- > > > > [Positive](button.html#positive),
52
- > > > > [Negative](button.html#negative),
53
- > > > > [Fluid](button.html#fluid),
54
- > > > > [Circular](button.html#circular),
55
- > > > > [Vertically Attached](button.html#vertically-attached),
47
+ > > > > [Social](button.html#social)&#183;
48
+ > > > > [Size](button.html#size)&#183;
49
+ > > > > [Colored](button.html#colored)&#183;
50
+ > > > > [Compact](button.html#compact)&#183;
51
+ > > > > [Positive](button.html#positive)&#183;
52
+ > > > > [Negative](button.html#negative)&#183;
53
+ > > > > [Fluid](button.html#fluid)&#183;
54
+ > > > > [Circular](button.html#circular)&#183;
55
+ > > > > [Vertically Attached](button.html#vertically-attached)&#183;
56
56
  > > > > [Horizontally Attached](button.html#horizontally-attached)
57
57
  > > >
58
58
  > > > <!-- -->
59
59
  > > > > Column:
60
60
  > > > > ### [Group Variations](button.html#group-variations)
61
- > > > > [Vertical Buttons](button.html#vertical-buttons),
62
- > > > > [Icon Buttons](button.html#icon-buttons),
63
- > > > > [Labeled Icon Buttons](button.html#labeled-icon-buttons),
64
- > > > > [Mixed Group](button.html#mixed-group),
65
- > > > > [Equal Width](button.html#equal-width),
66
- > > > > [Colored Buttons](button.html#colored-buttons),
67
- > > > > [Basic Buttons](button.html#basic-buttons),
61
+ > > > > [Vertical Buttons](button.html#vertical-buttons)&#183;
62
+ > > > > [Icon Buttons](button.html#icon-buttons)&#183;
63
+ > > > > [Labeled Icon Buttons](button.html#labeled-icon-buttons)&#183;
64
+ > > > > [Mixed Group](button.html#mixed-group)&#183;
65
+ > > > > [Equal Width](button.html#equal-width)&#183;
66
+ > > > > [Colored Buttons](button.html#colored-buttons)&#183;
67
+ > > > > [Basic Buttons](button.html#basic-buttons)&#183;
68
68
  > > > > [Group Sizes](button.html#group-sizes)
69
69
  > >
70
70
  > > <!-- -->
71
71
  > > ## [Container](container.html#container)
72
- > > > Two Column Doubling Grid Container:
72
+ > > > Two Column Stackable Justified Aligned Grid Container:
73
73
  > > > > Column:
74
74
  > > > > ### [Types](container.html#types)
75
- > > > > [Standard Container](container.html#standard-container),
75
+ > > > > [Standard Container](container.html#standard-container)&#183;
76
76
  > > > > [Text Container](container.html#text-container)
77
77
  > > >
78
78
  > > > <!-- -->
79
79
  > > > > Column:
80
80
  > > > > ### [Variations](container.html#variations)
81
- > > > > [Text Alignment](container.html#text-alignment),
82
- > > > > [Justified Aligned](container.html#justified-aligned),
81
+ > > > > [Text Alignment](container.html#text-alignment)&#183;
82
+ > > > > [Justified Aligned](container.html#justified-aligned)&#183;
83
83
  > > > > [Fluid](container.html#fluid)
84
84
  > > >
85
85
  > > > <!-- -->
86
86
  > > > > Column:
87
87
  > > > > ### [Examples](container.html#examples)
88
- > > > > [Container Using Grids](container.html#container-using-grids),
89
- > > > > [Centered Menu](container.html#centered-menu),
88
+ > > > > [Container Using Grids](container.html#container-using-grids)&#183;
89
+ > > > > [Centered Menu](container.html#centered-menu)&#183;
90
90
  > > > > [Container Segment](container.html#container-segment)
91
91
 
92
92
  > >
93
93
  > > <!-- -->
94
94
  > > ## [Divider](divider.html#divider)
95
- > > > Two Column Doubling Grid Container:
95
+ > > > Two Column Stackable Justified Aligned Grid Container:
96
96
  > > > > Column:
97
97
  > > > > ### [Types](divider.html#types)
98
- > > > > [Standard Divider](divider.html#standard-divider),
99
- > > > > [Vertical Divider](divider.html#vertical-divider),
100
- > > > > [Horizontal Divider](divider.html#horizontal-divider)
98
+ > > > > [Standard Divider](divider.html#standard-divider)&#183;
99
+ > > > > [Vertical Divider](divider.html#vertical-divider)&#183;
100
+ > > > > [Horizontal Divider](divider.html#horizontal-divider)
101
+ > > >
102
+ > > > <!-- -->
103
+ > > > > Column:
104
+ > > > > ### [Variations](divider.html#variations)
105
+ > > > > [Inverted](divider.html#inverted-divider)&#183;
106
+ > > > > [Fitted](divider.html#fitted-divider)&#183;
107
+ > > > > [Hidden](divider.html#hidden-divider)&#183;
108
+ > > > > [Section](divider.html#section-divider)&#183;
109
+ > > > > [Clearing](divider.html#clearing-divider)
110
+ > >
111
+ > > <!-- -->
112
+ > > ## [Flag](flag.html#flag)
113
+ > >
114
+ > > <!-- -->
115
+ > > ## [Header](header.html#header)
116
+ > > > Two Column Stackable Justified Aligned Grid Container:
117
+ > > > > Column:
118
+ > > > > ### [Types](header.html#types)
119
+ > > > > [Page Headers](header.html#page-headers)&#183;
120
+ > > > > [Content Headers](header.html#content-headers)&#183;
121
+ > > > > [Icon Headers](header.html#icon-headers)&#183;
122
+ > > > > [Sub Headers](header.html#sub-headers)&#183;
123
+
124
+ >
125
+ > <!-- -->
126
+ > > Inverted Center Aligned Footer Segment Container Grid:
127
+ > > > Ten Wide Column:
128
+ > > > ##### Help Preserve This Project:Inverted
129
+ > > > 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.
130
+ > > > " "
131
+ > > > [__Primary Button|Donate Today__](PAYPAL_BUTTON)
132
+ > ____
133
+ > > [Free and Open Source (MIT)](http：//markdown-ui.mit-license.org)
data/website/index.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 active 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="docs/toc.html">Docs</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>
@@ -38,7 +38,7 @@
38
38
  </div>
39
39
  <!-- -->
40
40
  <div class="ui basic attached segment">
41
- <div class="ui equal width grid">
41
+ <div class="ui stackable equal width grid">
42
42
  <div class="ui column"><h2 id="install" class="ui header">Installation</h2>
43
43
  Markdown-UI is readily available as a Ruby gem. The minimum required Ruby version is 2.0. <br /> <br />
44
44
  <code>gem install markdown-ui</code><h2 id="usage" class="ui header">Usage</h2>
@@ -51,7 +51,7 @@ Markdown-UI would not be possible without the the <a class="ui item" href="http:
51
51
  library. A huge thanks and credit goes to the people behind these wonderful framework and libraries.<h2 class="ui header">Source</h2>
52
52
  This document is written entirely in Markdown-UI. see: <a class="ui item" href="https://github.com/jjuliano/markdown-ui/tree/master/website">the source files</a>
53
53
  <h2 id="issues-bugs" class="ui header">Notes/Issues/Bugs</h2>
54
- <ul class="ui unordered list"><li>Ongoing support for Semantic-UI elements/modules/components</li><li>The Colon (:) character will be parsed when used inside a text, needs post-processing to dislay correctly (for URLs)</li><li>A separator in between two spaces is required on block elements to separate elements (see Column example)</li><li>Some elements requires custom javascripts (ie toggle button) in order to display and format them properly. Those elements will not be supported by Markdown-UI.</li></ul></div>
54
+ <ul class="ui unordered list"><li>Ongoing support for Semantic-UI elements/modules/components</li><li>The Colon (:) character will be parsed when used inside a text, needs post-processing to dislay correctly (for URLs)</li><li>A separator in between two spaces is required on block elements to separate elements (see Column example)</li><li>Some elements requires custom javascripts (ie toggle button) in order to display and format them properly. You can write in HTML and Javascripts the additional code alongside your Markdown-UI docs to display them properly.</li></ul></div>
55
55
  <!-- -->
56
56
  <div class="ui column">
57
57
  <div class="ui inverted very padded segment">
@@ -75,149 +75,162 @@ This document is written entirely in Markdown-UI. see: <a class="ui item" href="
75
75
  </div>
76
76
  <!-- -->
77
77
  <h2 id="cheatsheets" class="ui center aligned header">Cheat Sheet</h2>
78
- <div class="ui equal width grid">
78
+ <div class="ui stackable equal width grid">
79
79
  <div class="ui column">
80
- <div class="ui basic segment">
81
- <h5 class="ui header">Button</h5>
82
- <div class="ui inverted blue segment">
83
- <code># Short-Hand</code>
84
- <br />
85
- <code>__Button|Button Text__</code>
86
- </div>
87
- <!-- -->
88
- <div class="ui inverted blue segment">
89
- <code># Block Syntax</code>
90
- <br />
91
- <code>&gt; Button:</code>
92
- <br />
93
- <code>&gt; Button Text</code>
94
- <br />
95
- </div>
96
- <!-- -->
97
- <h5 class="ui header">Container</h5>
98
- <div class="ui inverted blue segment">
99
- <code>&gt; Container:</code>
100
- <br />
101
- <code>&gt;</code>
102
- <br />
103
- </div>
104
- <!-- -->
105
- <h5 class="ui header">Icon</h5>
106
- <div class="ui inverted blue segment">
107
- <code>_Icon &lt;Name&gt;_</code>
108
- <br />
109
- </div>
110
- <!-- -->
111
- <h5 class="ui header">Segment</h5>
112
- <div class="ui inverted blue segment">
113
- <code>&gt; Segment:</code>
114
- <br />
115
- <code>&gt;</code>
116
- <br />
117
- </div>
118
- <!-- -->
119
- <h5 class="ui header">Menu</h5>
120
- <div class="ui inverted blue segment">
121
- <code>&gt; Menu:</code>
122
- <br />
123
- <code>&gt; [Menu Item]()</code>
124
- <br />
125
- </div>
126
- <!-- -->
127
- <h5 class="ui header">List</h5>
128
- <div class="ui inverted blue segment">
129
- <code># Unordered List</code>
130
- <br />
131
- <code>* List 1</code>
132
- <br />
133
- <code>* List 2</code>
134
- <br />
135
- <code># Ordered List</code>
136
- <br />
137
- <code>1. List 1</code>
138
- <br />
139
- <code>1. List 2</code>
140
- <br />
141
- </div>
142
- <!-- -->
143
- <h5 class="ui header">Label</h5>
144
- <div class="ui inverted blue segment">
145
- <code>&gt; Label:</code>
146
- <br />
147
- <code>&gt; _Mail Icon_ 23</code>
148
- <br />
80
+ <div class="ui segments segment">
81
+ <div class="ui basic segment">
82
+ <h5 class="ui header">Button</h5>
83
+ <div class="ui inverted blue segment">
84
+ <code># Short-Hand</code>
85
+ <br />
86
+ <code>__Button|Button Text__</code>
87
+ </div>
88
+ <!-- -->
89
+ <div class="ui inverted blue segment">
90
+ <code># Block Syntax</code>
91
+ <br />
92
+ <code>&gt; Button:</code>
93
+ <br />
94
+ <code>&gt; Button Text</code>
95
+ <br />
96
+ </div>
97
+ <!-- -->
98
+ <h5 class="ui header">Container</h5>
99
+ <div class="ui inverted blue segment">
100
+ <code>&gt; Container:</code>
101
+ <br />
102
+ <code>&gt;</code>
103
+ <br />
104
+ </div>
105
+ <!-- -->
106
+ <h5 class="ui header">Icon</h5>
107
+ <div class="ui inverted blue segment">
108
+ <code>_Icon &lt;Name&gt;_</code>
109
+ <br />
110
+ </div>
111
+ <!-- -->
112
+ <h5 class="ui header">Segment</h5>
113
+ <div class="ui inverted blue segment">
114
+ <code>&gt; Segment:</code>
115
+ <br />
116
+ <code>&gt;</code>
117
+ <br />
118
+ </div>
119
+ <!-- -->
120
+ <h5 class="ui header">Menu</h5>
121
+ <div class="ui inverted blue segment">
122
+ <code>&gt; Menu:</code>
123
+ <br />
124
+ <code>&gt; [Menu Item]()</code>
125
+ <br />
126
+ </div>
127
+ <!-- -->
128
+ <h5 class="ui header">List</h5>
129
+ <div class="ui inverted blue segment">
130
+ <code># Unordered List</code>
131
+ <br />
132
+ <code>* List 1</code>
133
+ <br />
134
+ <code>* List 2</code>
135
+ <br />
136
+ <code># Ordered List</code>
137
+ <br />
138
+ <code>1. List 1</code>
139
+ <br />
140
+ <code>1. List 2</code>
141
+ <br />
142
+ </div>
143
+ <!-- -->
144
+ <h5 class="ui header">Label</h5>
145
+ <div class="ui inverted blue segment">
146
+ <code>&gt; Label:</code>
147
+ <br />
148
+ <code>&gt; _Mail Icon_ 23</code>
149
+ <br />
150
+ </div>
149
151
  </div>
150
152
  </div>
151
153
  </div>
152
154
  <!-- -->
153
155
  <div class="ui column">
154
- <div class="ui basic segment">
155
- <h5 class="ui header">Item</h5>
156
- <div class="ui inverted blue segment">
157
- <code>[Item](#URL_ID "class")</code>
158
- <br />
159
- </div>
160
- <!-- -->
161
- <h5 class="ui header">Message</h5>
162
- <div class="ui inverted blue segment">
163
- <code># Short-Hand</code>
164
- <br />
165
- <code>__Message|Header:Message Header,Text:Message Text__</code>
166
- <br />
167
- </div>
168
- <!-- -->
169
- <div class="ui inverted blue segment">
170
- <code># Block Syntax</code>
171
- <br />
172
- <code>&gt; Message:</code>
173
- <br />
174
- <code>&gt; __Header|Message Header__</code>
175
- <br />
176
- <code>&gt; Message Text</code>
177
- <br />
178
- </div>
179
- <!-- -->
180
- <h5 class="ui header">Header</h5>
181
- <div class="ui inverted blue segment">
182
- <code># H1, ## H2, ### H3, #### H4 ...</code>
183
- <br />
184
- </div>
185
- <!-- -->
186
- <div class="ui inverted blue segment">
187
- <code># DIV tag header</code>
188
- <br />
189
- <code>__Header|A Div Header__</code>
190
- <br />
191
- </div>
192
- <!-- -->
193
- <h5 class="ui header">Column / Grid / Row / Segment / Container</h5>
194
- <div class="ui inverted blue segment">
195
- <code>&gt; Grid:</code>
196
- <br />
197
- <code>&gt;</code>
198
- <br />
199
- <code>&gt; &lt;!-- --&gt;</code>
200
- <br />
201
- <code>&gt;</code>
202
- <br />
203
- <code>&gt; &gt; Column:</code>
204
- <br />
205
- <code>&gt; &gt; Column 1</code>
206
- <br />
207
- <code>&gt;</code>
208
- <br />
209
- <code>&gt; &lt;!-- --&gt;</code>
210
- <br />
211
- <code>&gt;</code>
212
- <br />
213
- <code>&gt; &gt; Column:</code>
214
- <br />
215
- <code>&gt; &gt; Column 2</code>
216
- <br />
156
+ <div class="ui segments segment">
157
+ <div class="ui basic segment">
158
+ <h5 class="ui header">Item</h5>
159
+ <div class="ui inverted blue segment">
160
+ <code>[Item](#URL_ID "class")</code>
161
+ <br />
162
+ </div>
163
+ <!-- -->
164
+ <h5 class="ui header">Message</h5>
165
+ <div class="ui inverted blue segment">
166
+ <code># Short-Hand</code>
167
+ <br />
168
+ <code>__Message|Header:Message Header,Text:Message Text__</code>
169
+ <br />
170
+ </div>
171
+ <!-- -->
172
+ <div class="ui inverted blue segment">
173
+ <code># Block Syntax</code>
174
+ <br />
175
+ <code>&gt; Message:</code>
176
+ <br />
177
+ <code>&gt; __Header|Message Header__</code>
178
+ <br />
179
+ <code>&gt; Message Text</code>
180
+ <br />
181
+ </div>
182
+ <!-- -->
183
+ <h5 class="ui header">Header</h5>
184
+ <div class="ui inverted blue segment">
185
+ <code># H1, ## H2, ### H3, #### H4 ...</code>
186
+ <br />
187
+ </div>
188
+ <!-- -->
189
+ <div class="ui inverted blue segment">
190
+ <code># DIV tag header</code>
191
+ <br />
192
+ <code>__Header|A Div Header__</code>
193
+ <br />
194
+ </div>
195
+ <!-- -->
196
+ <h5 class="ui header">Column / Grid / Row / Segment / Container</h5>
197
+ <div class="ui inverted blue segment">
198
+ <code>&gt; Grid:</code>
199
+ <br />
200
+ <code>&gt;</code>
201
+ <br />
202
+ <code>&gt; &lt;!-- --&gt;</code>
203
+ <br />
204
+ <code>&gt;</code>
205
+ <br />
206
+ <code>&gt; &gt; Column:</code>
207
+ <br />
208
+ <code>&gt; &gt; Column 1</code>
209
+ <br />
210
+ <code>&gt;</code>
211
+ <br />
212
+ <code>&gt; &lt;!-- --&gt;</code>
213
+ <br />
214
+ <code>&gt;</code>
215
+ <br />
216
+ <code>&gt; &gt; Column:</code>
217
+ <br />
218
+ <code>&gt; &gt; Column 2</code>
219
+ <br />
220
+ </div>
217
221
  </div>
218
222
  </div>
219
223
  </div>
220
224
  </div>
225
+ <!-- -->
226
+ <div class="ui inverted center aligned footer segment container grid">
227
+ <div class="ui ten wide column"><h5 class="ui inverted header">Help Preserve This Project</h5>
228
+ 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.
229
+ <p></p>
230
+
231
+ <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>
232
+ <div class="ui divider"></div><a class="ui item" href="http://markdown-ui.mit-license.org">Free and Open Source (MIT)</a></div>
233
+ </div>
221
234
  </div>
222
235
 
223
236
  </body>