markdown-ui 0.1.2 → 0.1.3

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