markdown-ui 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 2704f9f717720b75f2746d9bb5e47a29fffb5d98
4
- data.tar.gz: 63e0675954889bfe03aa91fc1383917c9b0dbb8c
3
+ metadata.gz: 3dd5c5e2c3e74efad01d045de1cf24da91d739fe
4
+ data.tar.gz: 40c6900cd8044e020ead8ea15c8131cbe010cf51
5
5
  SHA512:
6
- metadata.gz: 3d55a708daf849242d1426eeb2ec4465c043d9fd8aabd7b2487144a6de432176b2971b7fd51e0f840e634729da4eabecf2ff8f898091d45de6437a884af14b65
7
- data.tar.gz: 7322bf82312abaad49cbd430732229b7e9e114d9457804ec01ee5a215de6a5447149bf145a0700d45d4e61611331baca45725af824bddfc5d9ecd80457b3e579
6
+ metadata.gz: 6d0cf9ed00b08da900483646bdc2986ecb943774082f35fb29e1bea7c482be74a0c96e97ae3aae023b857136bac7fccabefa779c2c27245d48ab97920100af1f
7
+ data.tar.gz: 1e4490c8b3d059d839c7de727ade763e455ea386183d51b210e07d0c3a805cf7d48fbd07cb8f93c678b998b8abb0910470df511d6b91750f30c085834f49e2f5
data/Changelog CHANGED
@@ -1,3 +1,7 @@
1
+ 0.1.3 - 07-21-15
2
+ * Add Bundler as a dependency
3
+ * Updated Documentations
4
+
1
5
  0.1.2 - 07-20-15
2
6
  * Add ID support for Buttons
3
7
  * Updated tests and docs with ID support
data/exe/markdown-ui CHANGED
@@ -15,7 +15,7 @@ puts <<-EOS
15
15
  <head>
16
16
  <meta charset="utf-8">
17
17
  <meta http-equiv="x-ua-compatible" content="ie=edge">
18
- <meta name="viewport" content="width=device-width, initial-scale=1">
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
19
19
 
20
20
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.1/semantic.min.css">
21
21
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
@@ -1,3 +1,3 @@
1
1
  module MarkdownUI
2
- VERSION = "0.1.2"
2
+ VERSION = "0.1.3"
3
3
  end
data/markdown-ui.gemspec CHANGED
@@ -27,10 +27,10 @@ Gem::Specification.new do |spec|
27
27
  spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
28
28
  spec.require_paths = ["lib"]
29
29
 
30
- spec.add_development_dependency "bundler", "~> 1.9"
31
- spec.add_development_dependency "rake", "~> 10.0"
30
+ spec.add_dependency 'bundler', '~> 1.10', '~> 1.9'
32
31
  spec.add_dependency "redcarpet", "~> 3.2"
33
32
  spec.add_dependency "nokogiri", "~> 1.6"
33
+ spec.add_development_dependency "rake", "~> 10.0"
34
34
  spec.add_development_dependency "test-unit", "~> 3.0"
35
35
  spec.add_development_dependency "simplecov", "~> 0.10"
36
36
  end
data/website/index.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <head>
7
7
  <meta charset="utf-8">
8
8
  <meta http-equiv="x-ua-compatible" content="ie=edge">
9
- <meta name="viewport" content="width=device-width, initial-scale=1">
9
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
10
10
 
11
11
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.1/semantic.min.css">
12
12
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
@@ -21,345 +21,345 @@
21
21
  </head>
22
22
 
23
23
  <body>
24
- <div class="ui inverted blue segment container">
25
- <div class="ui inverted blue menu">
26
- <a class="ui basic item" href="http://jjuliano.github.io/markdown-ui">Markdown UI</a>
27
- <div class="ui inverted blue right menu">
28
- <a class="ui disabled item" href="#docs">Docs</a>
29
- <a class="ui disabled item" href="#about">About</a>
30
- <a class="ui item" href="https://github.com/jjuliano/markdown-ui">Github</a>
31
- <a class="ui disabled item" href="#install">Install</a>
24
+ <div class="ui center aligned container">
25
+ <div class="ui inverted blue segment container">
26
+ <div class="ui inverted blue menu">
27
+ <a class="ui basic item" href="http://jjuliano.github.io/markdown-ui">Markdown UI</a>
28
+ <div class="ui inverted blue right menu">
29
+ <a class="ui disabled item" href="#docs">Docs</a>
30
+ <a class="ui disabled item" href="#about">About</a>
31
+ <a class="ui item" href="https://github.com/jjuliano/markdown-ui">Github</a>
32
+ <a class="ui disabled item" href="#install">Install</a>
33
+ </div>
32
34
  </div>
33
35
  </div>
34
- </div>
35
-
36
36
  <!-- -->
37
- <div class="ui container">
37
+ <div class="ui left aligned container">
38
38
  <!-- -->
39
- <div class="ui inverted attached blue very padded segment">
40
- <h1 class="ui header">Markdown UI</h1>
41
- <h3 class="ui header">Responsive User Interfaces in Markdown</h3>
42
- </div>
39
+ <div class="ui inverted attached blue very padded segment">
40
+ <h1 class="ui header">Markdown UI</h1>
41
+ <h3 class="ui header">Responsive User Interfaces in Markdown</h3>
42
+ </div>
43
43
  <!-- -->
44
- <div class="ui attached segment">
44
+ <div class="ui attached segment">
45
45
  <!-- -->
46
- <div class="ui equal width grid">
47
- <div class="ui column">
48
- <p>A framework for creating responsive UI&rsquo;s for mobile and web using Markdown Syntax. It is a tool for Rapid Prototyping UI&rsquo;s for Single-page and Multiple-page apps, and allows to write UI&rsquo;s only once and then translate it to Semantic UI 2.0, BootStrap 3 (coming soon), Foundation (coming soon), etc.</p>
49
- <p>It helps the developer to focus on the big picture on paper or text-editors, and with few details it lessen the cognitive load which means having meaningful productivity which equates to happiness!</p>
50
- </div>
46
+ <div class="ui equal width grid">
47
+ <div class="ui column">
48
+ <p>A framework for creating responsive UI&rsquo;s for mobile and web using Markdown Syntax. It is a tool for Rapid Prototyping UI&rsquo;s for Single-page and Multiple-page apps, and allows to write UI&rsquo;s only once and then translate it to Semantic UI 2.0, BootStrap 3 (coming soon), Foundation (coming soon), etc.</p>
49
+ <p>It helps the developer to focus on the big picture on paper or text-editors, and with few details it lessen the cognitive load which means having meaningful productivity which equates to happiness!</p>
50
+ </div>
51
51
  <!-- -->
52
- <div class="ui column">
53
- <div class="ui inverted very padded segment">
54
- <code>&gt; Pointing Menu:</code>
55
- <br />
56
- <code>&gt; [Home](#root "active")</code>
57
- <br />
58
- <code>&gt; [Messages](#messages)</code>
59
- <br />
60
- <code>&gt; [Friends](#friends)</code>
61
- <br />
62
- <code>&gt; &gt; Right Menu:</code>
63
- <br />
64
- <code>&gt; &gt; [Logout](#logout)</code>
65
- <br />
66
- <br />
67
- <code>__Button|Add Friend__</code>
52
+ <div class="ui column">
53
+ <div class="ui inverted very padded segment">
54
+ <code>&gt; Pointing Menu:</code>
55
+ <br />
56
+ <code>&gt; [Home](#root "active")</code>
57
+ <br />
58
+ <code>&gt; [Messages](#messages)</code>
59
+ <br />
60
+ <code>&gt; [Friends](#friends)</code>
61
+ <br />
62
+ <code>&gt; &gt; Right Menu:</code>
63
+ <br />
64
+ <code>&gt; &gt; [Logout](#logout)</code>
65
+ <br />
66
+ <br />
67
+ <code>__Button|Add Friend__</code>
68
+ </div>
68
69
  </div>
69
70
  </div>
70
71
  </div>
71
- </div>
72
- <!-- -->
73
- <div class="ui attached segment">
74
- <h2 class="ui header">Installation</h2>
75
- <code>gem install markdown-ui</code>
76
- <h2 class="ui header">Usage</h2>
77
- <code>markdown-ui index.md &gt; index.html</code>
78
- </div>
79
- <!-- -->
80
- <div class="ui segment">
81
- <h1 class="ui center aligned header">Buttons</h1>
82
- </div>
83
72
  <!-- -->
84
- <div class="ui segment">
85
- <h3 class="ui header">Button</h3>
86
- <p>Standard Button</p>
87
- </div>
73
+ <div class="ui attached segment">
74
+ <h2 class="ui header">Installation</h2>
75
+ <code>gem install markdown-ui</code>
76
+ <h2 class="ui header">Usage</h2>
77
+ <code>markdown-ui index.md &gt; index.html</code>
78
+ </div>
88
79
  <!-- -->
89
- <div class="ui divided segment grid">
90
- <div class="ui html top attached segment">
91
- <div class="ui top attached label">Standard Button</div>
80
+ <div class="ui segment">
81
+ <h1 class="ui center aligned header">Buttons</h1>
92
82
  </div>
93
83
  <!-- -->
94
- <div class="ui center aligned six wide column">
95
- <h5 class="ui header">Preview</h5>
96
- <div class="ui button">Follow</div>
84
+ <div class="ui segment">
85
+ <h3 class="ui header">Button</h3>
86
+ <p>Standard Button</p>
97
87
  </div>
98
88
  <!-- -->
99
- <div class="ui left aligned ten wide column">
100
- <h5 class="ui header">Markdown Syntax</h5>
101
- <div class="ui inverted very padded segment">
102
- <code>
89
+ <div class="ui divided segment grid">
90
+ <div class="ui html top attached segment">
91
+ <div class="ui top attached label">Standard Button</div>
92
+ </div>
93
+ <!-- -->
94
+ <div class="ui center aligned six wide column">
95
+ <h5 class="ui header">Preview</h5>
96
+ <div class="ui button">Follow</div>
97
+ </div>
98
+ <!-- -->
99
+ <div class="ui left aligned ten wide column">
100
+ <h5 class="ui header">Markdown Syntax</h5>
101
+ <div class="ui inverted very padded segment">
102
+ <code>
103
103
  __Button|Follow__
104
104
  </code>
105
+ </div>
105
106
  </div>
106
- </div>
107
107
  <!-- -->
108
- </div>
109
- <!-- -->
110
- <div class="ui divided segment grid">
111
- <div class="ui html top attached segment">
112
- <div class="ui top attached label">Standard Button with Custom Class</div>
113
108
  </div>
114
109
  <!-- -->
115
- <div class="ui center aligned six wide column">
116
- <h5 class="ui header">Preview</h5>
117
- <div id="follow-button-id" class="ui follow-button-class button">Follow</div>
118
- </div>
110
+ <div class="ui divided segment grid">
111
+ <div class="ui html top attached segment">
112
+ <div class="ui top attached label">Standard Button with Custom Class And ID</div>
113
+ </div>
119
114
  <!-- -->
120
- <div class="ui left aligned ten wide column">
121
- <h5 class="ui header">Markdown Syntax</h5>
122
- <div class="ui inverted very padded segment">
123
- <code>__Follow-Button-Class Button|Follow|Follow-Button-ID__</code>
115
+ <div class="ui center aligned six wide column">
116
+ <h5 class="ui header">Preview</h5>
117
+ <div id="fancy-follow-button-id" class="ui follow-button-class button">Follow</div>
124
118
  </div>
125
- </div>
126
119
  <!-- -->
127
- </div>
120
+ <div class="ui left aligned ten wide column">
121
+ <h5 class="ui header">Markdown Syntax</h5>
122
+ <div class="ui inverted very padded segment">
123
+ <code>__Follow-Button-Class Button|Follow|Follow-Button-ID__</code>
124
+ </div>
125
+ </div>
128
126
  <!-- -->
129
- <div class="ui divided segment grid">
130
- <div class="ui html top attached segment">
131
- <div class="ui top attached label">Focusable Button</div>
132
127
  </div>
133
128
  <!-- -->
134
- <div class="ui center aligned six wide column">
135
- <h5 class="ui header">Preview</h5>
136
- <button id="my-focusable-button" class="ui focusable button">Follow</button>
137
- </div>
129
+ <div class="ui divided segment grid">
130
+ <div class="ui html top attached segment">
131
+ <div class="ui top attached label">Focusable Button</div>
132
+ </div>
133
+ <!-- -->
134
+ <div class="ui center aligned six wide column">
135
+ <h5 class="ui header">Preview</h5>
136
+ <button id="my-focusable-button" class="ui focusable button">Follow</button>
137
+ </div>
138
138
  <!-- -->
139
- <div class="ui left aligned ten wide column">
140
- <h5 class="ui header">Markdown Syntax</h5>
141
- <div class="ui inverted very padded segment">
142
- <code>
139
+ <div class="ui left aligned ten wide column">
140
+ <h5 class="ui header">Markdown Syntax</h5>
141
+ <div class="ui inverted very padded segment">
142
+ <code>
143
143
  __Focusable Button|Follow|My-Focusable-Button__
144
144
  </code>
145
+ </div>
145
146
  </div>
146
- </div>
147
147
  <!-- -->
148
- </div>
149
- <!-- -->
150
- <div class="ui attached segment">
151
- <h3 class="ui header">Emphasis</h3>
152
- <p>A button can be formatted to show different levels of emphasis</p>
153
- </div>
154
- <!-- -->
155
- <div class="ui divided segment grid">
156
- <div class="ui html top attached segment">
157
- <div class="ui top attached label">Emphasis</div>
158
148
  </div>
159
149
  <!-- -->
160
- <div class="ui center aligned six wide column">
161
- <h5 class="ui header">Preview</h5>
162
- <div class="ui primary button">Save</div>
163
- <div class="ui button">Discard</div>
164
- <p></p>
165
- <div class="ui secondary button">Save</div>
166
- <div class="ui button">Discard</div>
150
+ <div class="ui attached segment">
151
+ <h3 class="ui header">Emphasis</h3>
152
+ <p>A button can be formatted to show different levels of emphasis</p>
167
153
  </div>
168
154
  <!-- -->
169
- <div class="ui left aligned ten wide column">
170
- <h5 class="ui header">Markdown Syntax</h5>
171
- <div class="ui inverted very padded segment">
172
- <code>
155
+ <div class="ui divided segment grid">
156
+ <div class="ui html top attached segment">
157
+ <div class="ui top attached label">Emphasis</div>
158
+ </div>
159
+ <!-- -->
160
+ <div class="ui center aligned six wide column">
161
+ <h5 class="ui header">Preview</h5>
162
+ <div class="ui primary button">Save</div>
163
+ <div class="ui button">Discard</div>
164
+ <p></p>
165
+ <div class="ui secondary button">Save</div>
166
+ <div class="ui button">Discard</div>
167
+ </div>
168
+ <!-- -->
169
+ <div class="ui left aligned ten wide column">
170
+ <h5 class="ui header">Markdown Syntax</h5>
171
+ <div class="ui inverted very padded segment">
172
+ <code>
173
173
  __Primary Button|Save__
174
174
  __Button|Discard__
175
175
  __Secondary Button|Save__
176
176
  __Button|Discard__
177
177
  </code>
178
+ </div>
178
179
  </div>
179
- </div>
180
- <!-- -->
181
- </div>
182
180
  <!-- -->
183
- <div class="ui attached segment">
184
- <h3 class="ui header">Animated</h3>
185
- <p>A button can animate to show hidden content</p>
186
- </div>
181
+ </div>
187
182
  <!-- -->
188
- <div class="ui divided segment grid">
189
- <div class="ui html top attached segment">
190
- <div class="ui top attached label">Animated</div>
183
+ <div class="ui attached segment">
184
+ <h3 class="ui header">Animated</h3>
185
+ <p>A button can animate to show hidden content</p>
191
186
  </div>
192
187
  <!-- -->
193
- <div class="ui center aligned six wide column">
194
- <h5 class="ui header">Preview</h5>
195
- <div class="ui animated button">
196
- <div class="visible content">Next</div>
197
- <div class="hidden content">
198
- <i class="right arrow icon"></i>
188
+ <div class="ui divided segment grid">
189
+ <div class="ui html top attached segment">
190
+ <div class="ui top attached label">Animated</div>
191
+ </div>
192
+ <!-- -->
193
+ <div class="ui center aligned six wide column">
194
+ <h5 class="ui header">Preview</h5>
195
+ <div class="ui animated button">
196
+ <div class="visible content">Next</div>
197
+ <div class="hidden content">
198
+ <i class="right arrow icon"></i>
199
+ </div>
199
200
  </div>
200
201
  </div>
201
- </div>
202
202
  <!-- -->
203
- <div class="ui left aligned ten wide column">
204
- <h5 class="ui header">Markdown Syntax</h5>
205
- <div class="ui inverted very padded segment">
206
- <code>
203
+ <div class="ui left aligned ten wide column">
204
+ <h5 class="ui header">Markdown Syntax</h5>
205
+ <div class="ui inverted very padded segment">
206
+ <code>
207
207
  __Animated Button|Next;Icon:Right Arrow__
208
208
  </code>
209
+ </div>
209
210
  </div>
210
- </div>
211
- <!-- -->
212
- </div>
213
211
  <!-- -->
214
- <div class="ui divided segment grid">
215
- <div class="ui html top attached segment">
216
- <div class="ui top attached label">Vertical Animated</div>
217
212
  </div>
218
213
  <!-- -->
219
- <div class="ui center aligned six wide column">
220
- <h5 class="ui header">Preview</h5>
221
- <div class="ui vertical animated button">
222
- <div class="visible content">
223
- <i class="shop icon"></i>
214
+ <div class="ui divided segment grid">
215
+ <div class="ui html top attached segment">
216
+ <div class="ui top attached label">Vertical Animated</div>
217
+ </div>
218
+ <!-- -->
219
+ <div class="ui center aligned six wide column">
220
+ <h5 class="ui header">Preview</h5>
221
+ <div class="ui vertical animated button">
222
+ <div class="visible content">
223
+ <i class="shop icon"></i>
224
+ </div>
225
+ <div class="hidden content">Shop</div>
224
226
  </div>
225
- <div class="hidden content">Shop</div>
226
227
  </div>
227
- </div>
228
228
  <!-- -->
229
- <div class="ui left aligned ten wide column">
230
- <h5 class="ui header">Markdown Syntax</h5>
231
- <div class="ui inverted very padded segment">
232
- <code>
229
+ <div class="ui left aligned ten wide column">
230
+ <h5 class="ui header">Markdown Syntax</h5>
231
+ <div class="ui inverted very padded segment">
232
+ <code>
233
233
  __Vertical Animated Button|Icon:Shop;Shop__
234
234
  </code>
235
+ </div>
235
236
  </div>
236
- </div>
237
237
  <!-- -->
238
- </div>
239
- <!-- -->
240
- <div class="ui divided segment grid">
241
- <div class="ui html top attached segment">
242
- <div class="ui top attached label">Fade Animated</div>
243
238
  </div>
244
239
  <!-- -->
245
- <div class="ui center aligned six wide column">
246
- <h5 class="ui header">Preview</h5>
247
- <div class="ui fade animated button">
248
- <div class="visible content">Sign-up for a Pro account</div>
249
- <div class="hidden content">$12.99 a month</div>
240
+ <div class="ui divided segment grid">
241
+ <div class="ui html top attached segment">
242
+ <div class="ui top attached label">Fade Animated</div>
250
243
  </div>
251
- </div>
252
244
  <!-- -->
253
- <div class="ui left aligned ten wide column">
254
- <h5 class="ui header">Markdown Syntax</h5>
255
- <div class="ui inverted very padded segment"><code>__Fade Animated Button|Sign-up for a Pro account;$12.99 a month__</code><br /> or <br />
256
- <code>__Fade Animated Button|Sign-up for a Pro account;$12.99 a month__</code></div>
257
- </div>
245
+ <div class="ui center aligned six wide column">
246
+ <h5 class="ui header">Preview</h5>
247
+ <div class="ui fade animated button">
248
+ <div class="visible content">Sign-up for a Pro account</div>
249
+ <div class="hidden content">$12.99 a month</div>
250
+ </div>
251
+ </div>
258
252
  <!-- -->
259
- </div>
253
+ <div class="ui left aligned ten wide column">
254
+ <h5 class="ui header">Markdown Syntax</h5>
255
+ <div class="ui inverted very padded segment"><code>__Fade Animated Button|Sign-up for a Pro account;$12.99 a month__</code><br /> or <br />
256
+ <code>__Fade Animated Button|Sign-up for a Pro account;$12.99 a month__</code></div>
257
+ </div>
260
258
  <!-- -->
261
- <div class="ui attached segment">
262
- <h3 class="ui header">Icon</h3>
263
- <p>A button can have only an icon</p>
264
- </div>
259
+ </div>
265
260
  <!-- -->
266
- <div class="ui divided segment grid">
267
- <div class="ui html top attached segment">
268
- <div class="ui top attached label">Icon Button</div>
261
+ <div class="ui attached segment">
262
+ <h3 class="ui header">Icon</h3>
263
+ <p>A button can have only an icon</p>
269
264
  </div>
270
265
  <!-- -->
271
- <div class="ui center aligned six wide column">
272
- <h5 class="ui header">Preview</h5>
273
- <div class="ui icon button">
274
- <i class="cloud icon"></i>
266
+ <div class="ui divided segment grid">
267
+ <div class="ui html top attached segment">
268
+ <div class="ui top attached label">Icon Button</div>
269
+ </div>
270
+ <!-- -->
271
+ <div class="ui center aligned six wide column">
272
+ <h5 class="ui header">Preview</h5>
273
+ <div class="ui icon button">
274
+ <i class="cloud icon"></i>
275
+ </div>
275
276
  </div>
276
- </div>
277
277
  <!-- -->
278
- <div class="ui left aligned ten wide column">
279
- <h5 class="ui header">Markdown Syntax</h5>
280
- <div class="ui inverted very padded segment">
281
- <code>
278
+ <div class="ui left aligned ten wide column">
279
+ <h5 class="ui header">Markdown Syntax</h5>
280
+ <div class="ui inverted very padded segment">
281
+ <code>
282
282
  __Icon Button|Icon:Cloud__
283
283
  </code>
284
+ </div>
284
285
  </div>
285
- </div>
286
- <!-- -->
287
- </div>
288
- <!-- -->
289
- <div class="ui attached segment">
290
- <h3 class="ui header">Labeled Icon</h3>
291
- <p>A button can have an icon and a label</p>
292
- </div>
293
286
  <!-- -->
294
- <div class="ui divided segment grid">
295
- <div class="ui html top attached segment">
296
- <div class="ui top attached label">Labeled Icon</div>
297
287
  </div>
298
288
  <!-- -->
299
- <div class="ui center aligned six wide column">
300
- <h5 class="ui header">Preview</h5>
301
- <div class="ui labeled icon button"><i class="pause icon"></i>Pause</div>
289
+ <div class="ui attached segment">
290
+ <h3 class="ui header">Labeled Icon</h3>
291
+ <p>A button can have an icon and a label</p>
302
292
  </div>
303
293
  <!-- -->
304
- <div class="ui left aligned ten wide column">
305
- <h5 class="ui header">Markdown Syntax</h5>
306
- <div class="ui inverted very padded segment">
307
- <code>
308
- __Labeled Icon Button|Icon:Pause,Pause__
309
- </code>
294
+ <div class="ui divided segment grid">
295
+ <div class="ui html top attached segment">
296
+ <div class="ui top attached label">Labeled Icon</div>
310
297
  </div>
311
- </div>
312
298
  <!-- -->
313
- </div>
299
+ <div class="ui center aligned six wide column">
300
+ <h5 class="ui header">Preview</h5>
301
+ <div class="ui labeled icon button"><i class="pause icon"></i>Pause</div>
302
+ </div>
314
303
  <!-- -->
315
- <div class="ui attached segment">
316
- <h3 class="ui header">Basic Button</h3>
317
- <p>A basic button is less pronounced</p>
318
- </div>
304
+ <div class="ui left aligned ten wide column">
305
+ <h5 class="ui header">Markdown Syntax</h5>
306
+ <div class="ui inverted very padded segment">
307
+ <code>
308
+ __Labeled Icon Button|Icon:Pause,Pause__
309
+ </code>
310
+ </div>
311
+ </div>
319
312
  <!-- -->
320
- <div class="ui divided segment grid">
321
- <div class="ui html top attached segment">
322
- <div class="ui top attached label">Basic Button</div>
323
313
  </div>
324
314
  <!-- -->
325
- <div class="ui center aligned six wide column">
326
- <h5 class="ui header">Preview</h5>
327
- <div class="ui basic button"><i class="user icon"></i>Add Friend</div>
315
+ <div class="ui attached segment">
316
+ <h3 class="ui header">Basic Button</h3>
317
+ <p>A basic button is less pronounced</p>
328
318
  </div>
329
319
  <!-- -->
330
- <div class="ui left aligned ten wide column">
331
- <h5 class="ui header">Markdown Syntax</h5>
332
- <div class="ui inverted very padded segment">
333
- <code>
320
+ <div class="ui divided segment grid">
321
+ <div class="ui html top attached segment">
322
+ <div class="ui top attached label">Basic Button</div>
323
+ </div>
324
+ <!-- -->
325
+ <div class="ui center aligned six wide column">
326
+ <h5 class="ui header">Preview</h5>
327
+ <div class="ui basic button"><i class="user icon"></i>Add Friend</div>
328
+ </div>
329
+ <!-- -->
330
+ <div class="ui left aligned ten wide column">
331
+ <h5 class="ui header">Markdown Syntax</h5>
332
+ <div class="ui inverted very padded segment">
333
+ <code>
334
334
  __Basic Button|Icon:User,Add Friend__
335
335
  </code>
336
+ </div>
336
337
  </div>
337
- </div>
338
338
  <!-- -->
339
- </div>
340
- <!-- -->
341
- <div class="ui divided segment grid">
342
- <div class="ui html top attached segment">
343
- <div class="ui top attached label">Basic Button</div>
344
339
  </div>
345
340
  <!-- -->
346
- <div class="ui center aligned six wide column">
347
- <h5 class="ui header">Preview</h5>
348
- <div class="ui basic black button">Black</div>
349
- <div class="ui basic yellow button">Yellow</div>
350
- <div class="ui basic green button">Green</div>
351
- <div class="ui basic blue button">Blue</div>
352
- <div class="ui basic orange button">Orange</div>
353
- <div class="ui basic purple button">Purple</div>
354
- <div class="ui basic pink button">Pink</div>
355
- <div class="ui basic red button">Red</div>
356
- <div class="ui basic teal button">Teal</div>
357
- </div>
341
+ <div class="ui divided segment grid">
342
+ <div class="ui html top attached segment">
343
+ <div class="ui top attached label">Basic Button</div>
344
+ </div>
358
345
  <!-- -->
359
- <div class="ui left aligned ten wide column">
360
- <h5 class="ui header">Markdown Syntax</h5>
361
- <div class="ui inverted very padded segment">
362
- <code>
346
+ <div class="ui center aligned six wide column">
347
+ <h5 class="ui header">Preview</h5>
348
+ <div class="ui basic black button">Black</div>
349
+ <div class="ui basic yellow button">Yellow</div>
350
+ <div class="ui basic green button">Green</div>
351
+ <div class="ui basic blue button">Blue</div>
352
+ <div class="ui basic orange button">Orange</div>
353
+ <div class="ui basic purple button">Purple</div>
354
+ <div class="ui basic pink button">Pink</div>
355
+ <div class="ui basic red button">Red</div>
356
+ <div class="ui basic teal button">Teal</div>
357
+ </div>
358
+ <!-- -->
359
+ <div class="ui left aligned ten wide column">
360
+ <h5 class="ui header">Markdown Syntax</h5>
361
+ <div class="ui inverted very padded segment">
362
+ <code>
363
363
  __Basic Black Button|Black__
364
364
  __Basic Yellow Button|Yellow__
365
365
  __Basic Green Button|Green__
@@ -370,223 +370,224 @@ __Basic Pink Button|Pink__
370
370
  __Basic Red Button|Red__
371
371
  __Basic Teal Button|Teal__
372
372
  </code>
373
+ </div>
373
374
  </div>
374
- </div>
375
- <!-- -->
376
- </div>
377
375
  <!-- -->
378
- <div class="ui attached segment">
379
- <h3 class="ui header">Inverted</h3>
380
- <p>A button can be formatted to appear on dark backgrounds</p>
381
- </div>
376
+ </div>
382
377
  <!-- -->
383
- <div class="ui divided segment grid">
384
- <div class="ui html top attached segment">
385
- <div class="ui top attached label">Inverted</div>
378
+ <div class="ui attached segment">
379
+ <h3 class="ui header">Inverted</h3>
380
+ <p>A button can be formatted to appear on dark backgrounds</p>
386
381
  </div>
387
382
  <!-- -->
388
- <div class="ui center aligned six wide column">
389
- <h5 class="ui header">Preview</h5>
390
- <div class="ui inverted very padded segment">
391
- <div class="ui inverted standard button">Standard</div>
392
- <div class="ui inverted black button">Black</div>
393
- <div class="ui inverted yellow button">Yellow</div>
394
- <div class="ui inverted green button">Green</div>
395
- <div class="ui inverted blue button">Blue</div>
396
- <div class="ui inverted orange button">Orange</div>
397
- <div class="ui inverted purple button">Purple</div>
398
- <div class="ui inverted pink button">Pink</div>
399
- <div class="ui inverted red button">Red</div>
400
- <div class="ui inverted teal button">Teal</div>
383
+ <div class="ui divided segment grid">
384
+ <div class="ui html top attached segment">
385
+ <div class="ui top attached label">Inverted</div>
401
386
  </div>
402
- </div>
403
387
  <!-- -->
404
- <div class="ui left aligned ten wide column">
405
- <h5 class="ui header">Markdown Syntax</h5>
406
- <div class="ui inverted very padded segment">
407
- <code>&gt; Inverted Segment:</code>
408
- <br />
409
- <code>&gt; __Button|Standard|Inverted__</code>
410
- <br />
411
- <code>&gt; __Button|Black|Inverted Black__</code>
412
- <br />
413
- <code>&gt; __Button|Yellow|Inverted Yellow__</code>
414
- <br />
415
- <code>&gt; __Button|Green|Inverted Green__</code>
416
- <br />
417
- <code>&gt; __Button|Blue|Inverted Blue__</code>
418
- <br />
419
- <code>&gt; __Button|Orange|Inverted Orange__</code>
420
- <br />
421
- <code>&gt; __Button|Purple|Inverted Purple__</code>
422
- <br />
423
- <code>&gt; __Button|Pink|Inverted Pink__</code>
424
- <br />
425
- <code>&gt; __Button|Red|Inverted Red__</code>
426
- <br />
427
- <code>&gt; __Button|Teal|Inverted Teal__</code>
388
+ <div class="ui center aligned six wide column">
389
+ <h5 class="ui header">Preview</h5>
390
+ <div class="ui inverted very padded segment">
391
+ <div class="ui inverted standard button">Standard</div>
392
+ <div class="ui inverted black button">Black</div>
393
+ <div class="ui inverted yellow button">Yellow</div>
394
+ <div class="ui inverted green button">Green</div>
395
+ <div class="ui inverted blue button">Blue</div>
396
+ <div class="ui inverted orange button">Orange</div>
397
+ <div class="ui inverted purple button">Purple</div>
398
+ <div class="ui inverted pink button">Pink</div>
399
+ <div class="ui inverted red button">Red</div>
400
+ <div class="ui inverted teal button">Teal</div>
401
+ </div>
428
402
  </div>
429
- </div>
430
403
  <!-- -->
431
- </div>
404
+ <div class="ui left aligned ten wide column">
405
+ <h5 class="ui header">Markdown Syntax</h5>
406
+ <div class="ui inverted very padded segment">
407
+ <code>&gt; Inverted Segment:</code>
408
+ <br />
409
+ <code>&gt; __Inverted Standard Button|Standard__</code>
410
+ <br />
411
+ <code>&gt; __Inverted Black Button|Black__</code>
412
+ <br />
413
+ <code>&gt; __Inverted Yellow Button|Yellow__</code>
414
+ <br />
415
+ <code>&gt; __Inverted Green Button|Green__</code>
416
+ <br />
417
+ <code>&gt; __Inverted Blue Button|Blue__</code>
418
+ <br />
419
+ <code>&gt; __Inverted Orange Button|Orange__</code>
420
+ <br />
421
+ <code>&gt; __Inverted Purple Button|Purple__</code>
422
+ <br />
423
+ <code>&gt; __Inverted Pink Button|Pink__</code>
424
+ <br />
425
+ <code>&gt; __Inverted Red Button|Red__</code>
426
+ <br />
427
+ <code>&gt; __Inverted Teal Button|Teal__</code>
428
+ </div>
429
+ </div>
432
430
  <!-- -->
433
- <div class="ui attached segment">
434
- <h3 class="ui header">Groups</h3>
435
- <p>Buttons can exist together as a group</p>
436
- </div>
431
+ </div>
437
432
  <!-- -->
438
- <div class="ui divided segment grid">
439
- <div class="ui html top attached segment">
440
- <div class="ui top attached label">Buttons</div>
433
+ <div class="ui attached segment">
434
+ <h3 class="ui header">Groups</h3>
435
+ <p>Buttons can exist together as a group</p>
441
436
  </div>
442
437
  <!-- -->
443
- <div class="ui center aligned six wide column">
444
- <h5 class="ui header">Preview</h5>
445
- <div class="ui buttons">
446
- <div id="standard" class="ui button">One</div>
447
- <div id="standard" class="ui button">Two</div>
448
- <div id="standard" class="ui button">Three</div>
438
+ <div class="ui divided segment grid">
439
+ <div class="ui html top attached segment">
440
+ <div class="ui top attached label">Buttons</div>
449
441
  </div>
450
- </div>
451
442
  <!-- -->
452
- <div class="ui left aligned ten wide column">
453
- <h5 class="ui header">Markdown Syntax</h5>
454
- <div class="ui inverted very padded segment">
455
- <code>&gt; Buttons:</code>
456
- <br />
457
- <code>&gt; __Standard Button|One__</code>
458
- <br />
459
- <code>&gt; __Standard Button|Two__</code>
460
- <br />
461
- <code>&gt; __Standard Button|Three__</code>
443
+ <div class="ui center aligned six wide column">
444
+ <h5 class="ui header">Preview</h5>
445
+ <div class="ui buttons">
446
+ <div id="standard" class="ui button">One</div>
447
+ <div id="standard" class="ui button">Two</div>
448
+ <div id="standard" class="ui button">Three</div>
449
+ </div>
462
450
  </div>
463
- </div>
464
451
  <!-- -->
465
- </div>
452
+ <div class="ui left aligned ten wide column">
453
+ <h5 class="ui header">Markdown Syntax</h5>
454
+ <div class="ui inverted very padded segment">
455
+ <code>&gt; Buttons:</code>
456
+ <br />
457
+ <code>&gt; __Standard Button|One__</code>
458
+ <br />
459
+ <code>&gt; __Standard Button|Two__</code>
460
+ <br />
461
+ <code>&gt; __Standard Button|Three__</code>
462
+ </div>
463
+ </div>
466
464
  <!-- -->
467
- <div class="ui attached segment">
468
- <h3 class="ui header">Icon Buttons</h3>
469
- <p>Buttons can exist together as a group</p>
470
- </div>
465
+ </div>
471
466
  <!-- -->
472
- <div class="ui divided segment grid">
473
- <div class="ui html top attached segment">
474
- <div class="ui top attached label">Buttons</div>
467
+ <div class="ui attached segment">
468
+ <h3 class="ui header">Icon Buttons</h3>
469
+ <p>Buttons can exist together as a group</p>
475
470
  </div>
476
471
  <!-- -->
477
- <div class="ui center aligned six wide column">
478
- <h5 class="ui header">Preview</h5>
479
- <div class="ui icon buttons">
480
- <div class="ui button">
481
- <i class="align left icon"></i>
482
- </div>
483
- <div class="ui button">
484
- <i class="align center icon"></i>
485
- </div>
486
- <div class="ui button">
487
- <i class="align right icon"></i>
488
- </div>
489
- <div class="ui button">
490
- <i class="align justify icon"></i>
491
- </div>
472
+ <div class="ui divided segment grid">
473
+ <div class="ui html top attached segment">
474
+ <div class="ui top attached label">Buttons</div>
492
475
  </div>
493
476
  <!-- -->
494
- <div class="ui icon buttons">
495
- <div class="ui button">
496
- <i class="bold icon"></i>
497
- </div>
498
- <div class="ui button">
499
- <i class="underline icon"></i>
477
+ <div class="ui center aligned six wide column">
478
+ <h5 class="ui header">Preview</h5>
479
+ <div class="ui icon buttons">
480
+ <div class="ui button">
481
+ <i class="align left icon"></i>
482
+ </div>
483
+ <div class="ui button">
484
+ <i class="align center icon"></i>
485
+ </div>
486
+ <div class="ui button">
487
+ <i class="align right icon"></i>
488
+ </div>
489
+ <div class="ui button">
490
+ <i class="align justify icon"></i>
491
+ </div>
500
492
  </div>
501
- <div class="ui button">
502
- <i class="text width icon"></i>
493
+ <!-- -->
494
+ <div class="ui icon buttons">
495
+ <div class="ui button">
496
+ <i class="bold icon"></i>
497
+ </div>
498
+ <div class="ui button">
499
+ <i class="underline icon"></i>
500
+ </div>
501
+ <div class="ui button">
502
+ <i class="text width icon"></i>
503
+ </div>
503
504
  </div>
504
505
  </div>
505
- </div>
506
506
  <!-- -->
507
- <div class="ui left aligned ten wide column">
508
- <h5 class="ui header">Markdown Syntax</h5>
509
- <div class="ui inverted very padded segment">
510
- <code>&gt; Icon Buttons:</code>
511
- <br />
512
- <code>&gt; __Button|Icon:Align Left__</code>
513
- <br />
514
- <code>&gt; __Button|Icon:Align Center__</code>
515
- <br />
516
- <code>&gt; __Button|Icon:Align Right__</code>
517
- <br />
518
- <code>&gt; __Button|Icon:Align Justify__</code>
519
- <br />
520
- <br />
521
- <code>&lt;!-- A separator is required in between two spaces --&gt;</code>
522
- <br />
523
- <br />
524
- <code>&gt; Icon Buttons:</code>
525
- <br />
526
- <code>&gt; __Button|Icon:Bold__</code>
527
- <br />
528
- <code>&gt; __Button|Icon:Underline__</code>
529
- <br />
530
- <code>&gt; __Button|Icon:Text Width__</code>
507
+ <div class="ui left aligned ten wide column">
508
+ <h5 class="ui header">Markdown Syntax</h5>
509
+ <div class="ui inverted very padded segment">
510
+ <code>&gt; Icon Buttons:</code>
511
+ <br />
512
+ <code>&gt; __Button|Icon:Align Left__</code>
513
+ <br />
514
+ <code>&gt; __Button|Icon:Align Center__</code>
515
+ <br />
516
+ <code>&gt; __Button|Icon:Align Right__</code>
517
+ <br />
518
+ <code>&gt; __Button|Icon:Align Justify__</code>
519
+ <br />
520
+ <br />
521
+ <code>&lt;!-- A separator is required in between two spaces --&gt;</code>
522
+ <br />
523
+ <br />
524
+ <code>&gt; Icon Buttons:</code>
525
+ <br />
526
+ <code>&gt; __Button|Icon:Bold__</code>
527
+ <br />
528
+ <code>&gt; __Button|Icon:Underline__</code>
529
+ <br />
530
+ <code>&gt; __Button|Icon:Text Width__</code>
531
+ </div>
531
532
  </div>
532
- </div>
533
- <!-- -->
534
- </div>
535
533
  <!-- -->
536
- <div class="ui attached segment">
537
- <h3 class="ui header">Conditionals</h3>
538
- <p>Button groups can contain conditionals</p>
539
- </div>
534
+ </div>
540
535
  <!-- -->
541
- <div class="ui divided segment grid">
542
- <div class="ui html top attached segment">
543
- <div class="ui top attached label">Conditionals</div>
536
+ <div class="ui attached segment">
537
+ <h3 class="ui header">Conditionals</h3>
538
+ <p>Button groups can contain conditionals</p>
544
539
  </div>
545
540
  <!-- -->
546
- <div class="ui center aligned six wide column">
547
- <h5 class="ui header">Preview</h5>
548
- <div class="ui icon buttons">
549
- <div class="ui button">Cancel</div>
550
- <div class="or"></div>
551
- <div class="ui positive button">Save</div>
541
+ <div class="ui divided segment grid">
542
+ <div class="ui html top attached segment">
543
+ <div class="ui top attached label">Conditionals</div>
552
544
  </div>
553
- </div>
554
545
  <!-- -->
555
- <div class="ui left aligned ten wide column">
556
- <h5 class="ui header">Markdown Syntax</h5>
557
- <div class="ui inverted very padded segment">
558
- <code>&gt; Icon Buttons:</code>
559
- <br />
560
- <code>&gt; __Button|Cancel__</code>
561
- <br />
562
- <code>&gt; __Div Tag||Or__</code>
563
- <br />
564
- <code>&gt; __Positive Button|Save__</code>
546
+ <div class="ui center aligned six wide column">
547
+ <h5 class="ui header">Preview</h5>
548
+ <div class="ui icon buttons">
549
+ <div class="ui button">Cancel</div>
550
+ <div class="or"></div>
551
+ <div class="ui positive button">Save</div>
552
+ </div>
565
553
  </div>
566
- </div>
567
554
  <!-- -->
568
- <div class="ui center aligned six wide column">
569
- <h5 class="ui header">Preview</h5>
570
- <div class="ui icon buttons">
571
- <div class="ui button">un</div>
572
- <div class="or" data-ou=""></div>
573
- <div id="positive-id" class="ui positive button">deux</div>
555
+ <div class="ui left aligned ten wide column">
556
+ <h5 class="ui header">Markdown Syntax</h5>
557
+ <div class="ui inverted very padded segment">
558
+ <code>&gt; Icon Buttons:</code>
559
+ <br />
560
+ <code>&gt; __Button|Cancel__</code>
561
+ <br />
562
+ <code>&gt; __Div Tag||Or__</code>
563
+ <br />
564
+ <code>&gt; __Positive Button|Save__</code>
565
+ </div>
574
566
  </div>
575
- </div>
576
567
  <!-- -->
577
- <div class="ui left aligned ten wide column">
578
- <h5 class="ui header">Markdown Syntax</h5>
579
- <div class="ui inverted very padded segment">
580
- <code>&gt; Icon Buttons:</code>
581
- <br />
582
- <code>&gt; __Button|un__</code>
583
- <br />
584
- <code>&gt; __Div Tag|Or|Data:ou__</code>
585
- <br />
586
- <code>&gt; __Positive Button|deux|Positive-ID__</code>
568
+ <div class="ui center aligned six wide column">
569
+ <h5 class="ui header">Preview</h5>
570
+ <div class="ui icon buttons">
571
+ <div class="ui button">un</div>
572
+ <div class="or" data-ou=""></div>
573
+ <div id="positive-id" class="ui positive button">deux</div>
574
+ </div>
575
+ </div>
576
+ <!-- -->
577
+ <div class="ui left aligned ten wide column">
578
+ <h5 class="ui header">Markdown Syntax</h5>
579
+ <div class="ui inverted very padded segment">
580
+ <code>&gt; Icon Buttons:</code>
581
+ <br />
582
+ <code>&gt; __Button|un__</code>
583
+ <br />
584
+ <code>&gt; __Div Tag|Or|Data:ou__</code>
585
+ <br />
586
+ <code>&gt; __Positive Button|deux|Positive-ID__</code>
587
+ </div>
587
588
  </div>
588
- </div>
589
589
  <!-- -->
590
+ </div>
590
591
  </div>
591
592
  </div>
592
593
  </body>