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/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>