markdown-ui 0.1.9 → 0.1.10
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Changelog +9 -0
- data/TODO.md +4 -4
- data/exe/markdown-ui +1 -4
- data/lib/markdown-ui.rb +5 -1
- data/lib/markdown-ui/version.rb +1 -1
- data/website/about.html +30 -8
- data/website/about.md +10 -6
- data/website/docs/button.html +328 -81
- data/website/docs/button.md +294 -80
- data/website/docs/toc.html +9 -4
- data/website/docs/toc.md +6 -2
- data/website/index.html +5 -7
- data/website/index.md +9 -2
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: b1ea1fe75b7f29105840cf2f44577df984618910
|
|
4
|
+
data.tar.gz: b41b3af8f3900ad2a76e2361891a74f0064063fb
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 1a1de84bf2e9860f35bd0609333456bff33a4469aca6ae8707e7f1283a45eceefa2e35d719c3250c27f9c0e49481f247325deaae0ac7d1c4ba334167cf61bac5
|
|
7
|
+
data.tar.gz: 907ae04ffbc26d3923fc0a11098d5ecfc09282c2b14b2e731ee6d3a4af66a22fbb974bd4ac2bc325a319a6acca35e7165eda3f2aefafa60ed163fdd0a2083b6b
|
data/Changelog
CHANGED
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
0.1.10 - 08-19-15
|
|
2
|
+
* Removed SmartyPants
|
|
3
|
+
* Added the following button tests and documentation
|
|
4
|
+
- Equal Width
|
|
5
|
+
- Colored Buttons
|
|
6
|
+
- Basic Buttons
|
|
7
|
+
- Group Sizes
|
|
8
|
+
* Button documentation completed
|
|
9
|
+
|
|
1
10
|
0.1.9 - 08-12-15
|
|
2
11
|
* Generate HTML5 doctype document (previously XHTML)
|
|
3
12
|
* Added the following button tests and documentation
|
data/TODO.md
CHANGED
data/exe/markdown-ui
CHANGED
|
@@ -4,7 +4,7 @@ require "bundler/setup"
|
|
|
4
4
|
require "markdown-ui"
|
|
5
5
|
require "nokogiri"
|
|
6
6
|
|
|
7
|
-
parser = Redcarpet::Markdown.new(MarkdownUI::Renderer, quote: true, tables: true)
|
|
7
|
+
parser = Redcarpet::Markdown.new(MarkdownUI::Renderer, quote: true, tables: true, xhtml: true)
|
|
8
8
|
f = File.open(ARGV.first, 'r')
|
|
9
9
|
@content = parser.render f.read
|
|
10
10
|
f.close
|
|
@@ -25,9 +25,6 @@ puts <<-EOS
|
|
|
25
25
|
<!--[if lt IE 9]>
|
|
26
26
|
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
27
27
|
<![endif]-->
|
|
28
|
-
<style>
|
|
29
|
-
code { white-space:pre }
|
|
30
|
-
</style>
|
|
31
28
|
</head>
|
|
32
29
|
|
|
33
30
|
<body>
|
data/lib/markdown-ui.rb
CHANGED
|
@@ -14,10 +14,14 @@ end
|
|
|
14
14
|
|
|
15
15
|
module MarkdownUI
|
|
16
16
|
class Renderer < Redcarpet::Render::HTML
|
|
17
|
-
include Redcarpet::Render::SmartyPants
|
|
18
17
|
include MarkdownUI::Element
|
|
19
18
|
include MarkdownUI::Collection
|
|
20
19
|
|
|
20
|
+
def hrule
|
|
21
|
+
klass = "ui divider"
|
|
22
|
+
MarkdownUI::StandardTag.new(nil, klass).render
|
|
23
|
+
end
|
|
24
|
+
|
|
21
25
|
def paragraph(text)
|
|
22
26
|
text
|
|
23
27
|
end
|
data/lib/markdown-ui/version.rb
CHANGED
data/website/about.html
CHANGED
|
@@ -13,9 +13,6 @@
|
|
|
13
13
|
<!--[if lt IE 9]>
|
|
14
14
|
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
15
15
|
<![endif]-->
|
|
16
|
-
<style>
|
|
17
|
-
code { white-space:pre }
|
|
18
|
-
</style>
|
|
19
16
|
</head>
|
|
20
17
|
|
|
21
18
|
<body>
|
|
@@ -33,11 +30,36 @@
|
|
|
33
30
|
</div>
|
|
34
31
|
<!-- -->
|
|
35
32
|
<div class="ui text container">
|
|
36
|
-
<div class="ui segment"
|
|
37
|
-
<
|
|
38
|
-
<
|
|
39
|
-
<
|
|
40
|
-
<
|
|
33
|
+
<div class="ui segment">
|
|
34
|
+
<h2 class="ui header">About</h2>
|
|
35
|
+
<p>Markdown-UI started as a inspiration to teach my son about programming. Being a father I was looking for ways to teach my child on how to create websites, as a primer to make it easier for my child to understand the basic concepts (i.e. container contains elements, grids have columns and rows, types of buttons, etc.), without spending too much time necessary for other quality activities and important matters.</p>
|
|
36
|
+
<p>For the developer standpoint, Markdown-UI 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 developer happiness.</p>
|
|
37
|
+
<br />
|
|
38
|
+
<h4 class="ui header">Markdown-UI is for...</h4>
|
|
39
|
+
<ul class="ui unordered list">
|
|
40
|
+
<li>
|
|
41
|
+
<p>teaching kids about programming</p>
|
|
42
|
+
</li>
|
|
43
|
+
<li>
|
|
44
|
+
<p>creating responsive UI's for mobile and web</p>
|
|
45
|
+
</li>
|
|
46
|
+
<li>
|
|
47
|
+
<p>easily communicating your UI</p>
|
|
48
|
+
</li>
|
|
49
|
+
<li>
|
|
50
|
+
<p>rapid prototyping</p>
|
|
51
|
+
</li>
|
|
52
|
+
<li>
|
|
53
|
+
<p>focus on important stuff</p>
|
|
54
|
+
</li>
|
|
55
|
+
<li>
|
|
56
|
+
<p>UI/UX brain-storming sessions via email, whiteboard, text editor, paper, etc.</p>
|
|
57
|
+
</li>
|
|
58
|
+
<li>
|
|
59
|
+
<p>shell-scripting your UI's</p>
|
|
60
|
+
</li>
|
|
61
|
+
</ul>
|
|
62
|
+
</div>
|
|
41
63
|
</div>
|
|
42
64
|
<!-- -->
|
|
43
65
|
</div>
|
data/website/about.md
CHANGED
|
@@ -13,14 +13,18 @@
|
|
|
13
13
|
> > Text Container:
|
|
14
14
|
> > > Segment:
|
|
15
15
|
> > > ## About
|
|
16
|
-
> > >
|
|
16
|
+
> > > "Markdown-UI started as a inspiration to teach my son about programming. Being a father I was looking for ways to teach my child on how to create websites, as a primer to make it easier for my child to understand the basic concepts (i.e. container contains elements, grids have columns and rows, types of buttons, etc.), without spending too much time necessary for other quality activities and important matters."
|
|
17
|
+
> > > "For the developer standpoint, Markdown-UI 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 developer happiness."
|
|
17
18
|
> > > <br />
|
|
18
19
|
> > > #### Markdown-UI is for...
|
|
19
|
-
> > >
|
|
20
|
-
> > >
|
|
21
|
-
> > >
|
|
22
|
-
> > >
|
|
23
|
-
> > >
|
|
20
|
+
> > >
|
|
21
|
+
> > > * "teaching kids about programming"
|
|
22
|
+
> > > * "creating responsive UI's for mobile and web"
|
|
23
|
+
> > > * "easily communicating your UI"
|
|
24
|
+
> > > * "rapid prototyping"
|
|
25
|
+
> > > * "focus on important stuff"
|
|
26
|
+
> > > * "UI/UX brain-storming sessions via email, whiteboard, text editor, paper, etc."
|
|
27
|
+
> > > * "shell-scripting your UI's"
|
|
24
28
|
>
|
|
25
29
|
> <!-- -->
|
|
26
30
|
>
|
data/website/docs/button.html
CHANGED
|
@@ -13,9 +13,6 @@
|
|
|
13
13
|
<!--[if lt IE 9]>
|
|
14
14
|
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
15
15
|
<![endif]-->
|
|
16
|
-
<style>
|
|
17
|
-
code { white-space:pre }
|
|
18
|
-
</style>
|
|
19
16
|
</head>
|
|
20
17
|
|
|
21
18
|
<body>
|
|
@@ -51,16 +48,14 @@
|
|
|
51
48
|
</div>
|
|
52
49
|
<!-- -->
|
|
53
50
|
<div class="ui center aligned six wide column">
|
|
54
|
-
<h5 class="ui header">Preview</h5>
|
|
51
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
55
52
|
<button class="ui button">Follow</button>
|
|
56
53
|
</div>
|
|
57
54
|
<!-- -->
|
|
58
|
-
<div class="ui
|
|
55
|
+
<div class="ui ten wide column">
|
|
59
56
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
60
57
|
<div class="ui inverted very padded segment">
|
|
61
|
-
<code>
|
|
62
|
-
__Button|Follow__
|
|
63
|
-
</code>
|
|
58
|
+
<code>__Button|Follow__</code>
|
|
64
59
|
</div>
|
|
65
60
|
</div>
|
|
66
61
|
<!-- -->
|
|
@@ -72,11 +67,11 @@ __Button|Follow__
|
|
|
72
67
|
</div>
|
|
73
68
|
<!-- -->
|
|
74
69
|
<div class="ui center aligned six wide column">
|
|
75
|
-
<h5 class="ui header">Preview</h5>
|
|
70
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
76
71
|
<button id="optional-id" class="ui optional-class button">Follow</button>
|
|
77
72
|
</div>
|
|
78
73
|
<!-- -->
|
|
79
|
-
<div class="ui
|
|
74
|
+
<div class="ui ten wide column">
|
|
80
75
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
81
76
|
<div class="ui inverted very padded segment">
|
|
82
77
|
<code>__<Optional-Class> Button|Follow|<Optional-ID>__</code>
|
|
@@ -91,11 +86,11 @@ __Button|Follow__
|
|
|
91
86
|
</div>
|
|
92
87
|
<!-- -->
|
|
93
88
|
<div class="ui center aligned six wide column">
|
|
94
|
-
<h5 class="ui header">Preview</h5>
|
|
89
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
95
90
|
<div id="optional-id" class="ui focusable button" tabindex="0">Follow</div>
|
|
96
91
|
</div>
|
|
97
92
|
<!-- -->
|
|
98
|
-
<div class="ui
|
|
93
|
+
<div class="ui ten wide column">
|
|
99
94
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
100
95
|
<div class="ui inverted very padded segment">
|
|
101
96
|
<code>__Focusable Button|Follow|<Optional-ID>__</code>
|
|
@@ -115,7 +110,7 @@ __Button|Follow__
|
|
|
115
110
|
</div>
|
|
116
111
|
<!-- -->
|
|
117
112
|
<div class="ui center aligned six wide column">
|
|
118
|
-
<h5 class="ui header">Preview</h5>
|
|
113
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
119
114
|
<button class="ui primary button">Save</button>
|
|
120
115
|
<button class="ui button">Discard</button>
|
|
121
116
|
<p></p>
|
|
@@ -123,7 +118,7 @@ __Button|Follow__
|
|
|
123
118
|
<button class="ui button">Discard</button>
|
|
124
119
|
</div>
|
|
125
120
|
<!-- -->
|
|
126
|
-
<div class="ui
|
|
121
|
+
<div class="ui ten wide column">
|
|
127
122
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
128
123
|
<div class="ui inverted very padded segment">
|
|
129
124
|
<code>__Primary Button|Save__ __Button|Discard__</code>
|
|
@@ -145,7 +140,7 @@ __Button|Follow__
|
|
|
145
140
|
</div>
|
|
146
141
|
<!-- -->
|
|
147
142
|
<div class="ui center aligned six wide column">
|
|
148
|
-
<h5 class="ui header">Preview</h5>
|
|
143
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
149
144
|
<div class="ui animated button">
|
|
150
145
|
<div class="visible content">Next</div>
|
|
151
146
|
<div class="hidden content">
|
|
@@ -154,7 +149,7 @@ __Button|Follow__
|
|
|
154
149
|
</div>
|
|
155
150
|
</div>
|
|
156
151
|
<!-- -->
|
|
157
|
-
<div class="ui
|
|
152
|
+
<div class="ui ten wide column">
|
|
158
153
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
159
154
|
<div class="ui inverted very padded segment">
|
|
160
155
|
<code>__Animated Button|Next;Icon:Right Arrow__</code>
|
|
@@ -169,7 +164,7 @@ __Button|Follow__
|
|
|
169
164
|
</div>
|
|
170
165
|
<!-- -->
|
|
171
166
|
<div class="ui center aligned six wide column">
|
|
172
|
-
<h5 class="ui header">Preview</h5>
|
|
167
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
173
168
|
<div class="ui vertical animated button">
|
|
174
169
|
<div class="visible content">
|
|
175
170
|
<i class="shop icon"></i>
|
|
@@ -178,7 +173,7 @@ __Button|Follow__
|
|
|
178
173
|
</div>
|
|
179
174
|
</div>
|
|
180
175
|
<!-- -->
|
|
181
|
-
<div class="ui
|
|
176
|
+
<div class="ui ten wide column">
|
|
182
177
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
183
178
|
<div class="ui inverted very padded segment">
|
|
184
179
|
<code>__Vertical Animated Button|Icon:Shop;Shop__</code>
|
|
@@ -193,14 +188,14 @@ __Button|Follow__
|
|
|
193
188
|
</div>
|
|
194
189
|
<!-- -->
|
|
195
190
|
<div class="ui center aligned six wide column">
|
|
196
|
-
<h5 class="ui header">Preview</h5>
|
|
191
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
197
192
|
<div class="ui fade animated button">
|
|
198
193
|
<div class="visible content">Sign-up for a Pro account</div>
|
|
199
194
|
<div class="hidden content">$12.99 a month</div>
|
|
200
195
|
</div>
|
|
201
196
|
</div>
|
|
202
197
|
<!-- -->
|
|
203
|
-
<div class="ui
|
|
198
|
+
<div class="ui ten wide column">
|
|
204
199
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
205
200
|
<div class="ui inverted very padded segment">
|
|
206
201
|
<code>__Fade Animated Button|Sign-up for a Pro account;$12.99 a month__</code>
|
|
@@ -220,13 +215,13 @@ __Button|Follow__
|
|
|
220
215
|
</div>
|
|
221
216
|
<!-- -->
|
|
222
217
|
<div class="ui center aligned six wide column">
|
|
223
|
-
<h5 class="ui header">Preview</h5>
|
|
218
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
224
219
|
<button class="ui icon button">
|
|
225
220
|
<i class="cloud icon"></i>
|
|
226
221
|
</button>
|
|
227
222
|
</div>
|
|
228
223
|
<!-- -->
|
|
229
|
-
<div class="ui
|
|
224
|
+
<div class="ui ten wide column">
|
|
230
225
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
231
226
|
<div class="ui inverted very padded segment">
|
|
232
227
|
<code>__Icon Button|Icon:Cloud__</code>
|
|
@@ -246,11 +241,11 @@ __Button|Follow__
|
|
|
246
241
|
</div>
|
|
247
242
|
<!-- -->
|
|
248
243
|
<div class="ui center aligned six wide column">
|
|
249
|
-
<h5 class="ui header">Preview</h5>
|
|
244
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
250
245
|
<button class="ui labeled icon button"><i class="pause icon"></i>Pause</button>
|
|
251
246
|
</div>
|
|
252
247
|
<!-- -->
|
|
253
|
-
<div class="ui
|
|
248
|
+
<div class="ui ten wide column">
|
|
254
249
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
255
250
|
<div class="ui inverted very padded segment">
|
|
256
251
|
<code>__Labeled Icon Button|Icon:Pause,Pause__</code>
|
|
@@ -270,11 +265,11 @@ __Button|Follow__
|
|
|
270
265
|
</div>
|
|
271
266
|
<!-- -->
|
|
272
267
|
<div class="ui center aligned six wide column">
|
|
273
|
-
<h5 class="ui header">Preview</h5>
|
|
268
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
274
269
|
<button class="ui basic button"><i class="user icon"></i>Add Friend</button>
|
|
275
270
|
</div>
|
|
276
271
|
<!-- -->
|
|
277
|
-
<div class="ui
|
|
272
|
+
<div class="ui ten wide column">
|
|
278
273
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
279
274
|
<div class="ui inverted very padded segment">
|
|
280
275
|
<code>__Basic Button|Icon:User,Add Friend__</code>
|
|
@@ -289,7 +284,7 @@ __Button|Follow__
|
|
|
289
284
|
</div>
|
|
290
285
|
<!-- -->
|
|
291
286
|
<div class="ui center aligned six wide column">
|
|
292
|
-
<h5 class="ui header">Preview</h5>
|
|
287
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
293
288
|
<button class="ui basic standard button">Standard</button>
|
|
294
289
|
<button class="ui basic black button">Black</button>
|
|
295
290
|
<button class="ui basic yellow button">Yellow</button>
|
|
@@ -302,7 +297,7 @@ __Button|Follow__
|
|
|
302
297
|
<button class="ui basic teal button">Teal</button>
|
|
303
298
|
</div>
|
|
304
299
|
<!-- -->
|
|
305
|
-
<div class="ui
|
|
300
|
+
<div class="ui ten wide column">
|
|
306
301
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
307
302
|
<div class="ui inverted very padded segment">
|
|
308
303
|
<code>__Basic Standard Button|Standard__</code>
|
|
@@ -340,7 +335,7 @@ __Button|Follow__
|
|
|
340
335
|
</div>
|
|
341
336
|
<!-- -->
|
|
342
337
|
<div class="ui center aligned six wide column">
|
|
343
|
-
<h5 class="ui header">Preview</h5>
|
|
338
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
344
339
|
<div class="ui inverted very padded segment">
|
|
345
340
|
<button class="ui inverted standard button">Standard</button>
|
|
346
341
|
<button class="ui inverted black button">Black</button>
|
|
@@ -355,7 +350,7 @@ __Button|Follow__
|
|
|
355
350
|
</div>
|
|
356
351
|
</div>
|
|
357
352
|
<!-- -->
|
|
358
|
-
<div class="ui
|
|
353
|
+
<div class="ui ten wide column">
|
|
359
354
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
360
355
|
<div class="ui inverted very padded segment">
|
|
361
356
|
<code>> Inverted Segment:</code>
|
|
@@ -399,7 +394,7 @@ __Button|Follow__
|
|
|
399
394
|
</div>
|
|
400
395
|
<!-- -->
|
|
401
396
|
<div class="ui center aligned six wide column">
|
|
402
|
-
<h5 class="ui header">Preview</h5>
|
|
397
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
403
398
|
<div class="ui buttons">
|
|
404
399
|
<button id="standard" class="ui button">One</button>
|
|
405
400
|
<button id="standard" class="ui button">Two</button>
|
|
@@ -407,7 +402,7 @@ __Button|Follow__
|
|
|
407
402
|
</div>
|
|
408
403
|
</div>
|
|
409
404
|
<!-- -->
|
|
410
|
-
<div class="ui
|
|
405
|
+
<div class="ui ten wide column">
|
|
411
406
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
412
407
|
<div class="ui inverted very padded segment">
|
|
413
408
|
<code>> Buttons:</code>
|
|
@@ -433,7 +428,7 @@ __Button|Follow__
|
|
|
433
428
|
</div>
|
|
434
429
|
<!-- -->
|
|
435
430
|
<div class="ui center aligned six wide column">
|
|
436
|
-
<h5 class="ui header">Preview</h5>
|
|
431
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
437
432
|
<div class="ui icon buttons">
|
|
438
433
|
<button class="ui button">
|
|
439
434
|
<i class="align left icon"></i>
|
|
@@ -462,7 +457,7 @@ __Button|Follow__
|
|
|
462
457
|
</div>
|
|
463
458
|
</div>
|
|
464
459
|
<!-- -->
|
|
465
|
-
<div class="ui
|
|
460
|
+
<div class="ui ten wide column">
|
|
466
461
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
467
462
|
<div class="ui inverted very padded segment">
|
|
468
463
|
<code>> Icon Buttons:</code>
|
|
@@ -506,7 +501,7 @@ __Button|Follow__
|
|
|
506
501
|
</div>
|
|
507
502
|
<!-- -->
|
|
508
503
|
<div class="ui center aligned six wide column">
|
|
509
|
-
<h5 class="ui header">Preview</h5>
|
|
504
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
510
505
|
<div class="ui buttons">
|
|
511
506
|
<button class="ui button">Cancel</button>
|
|
512
507
|
<div class="or"></div>
|
|
@@ -514,7 +509,7 @@ __Button|Follow__
|
|
|
514
509
|
</div>
|
|
515
510
|
</div>
|
|
516
511
|
<!-- -->
|
|
517
|
-
<div class="ui
|
|
512
|
+
<div class="ui ten wide column">
|
|
518
513
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
519
514
|
<div class="ui inverted very padded segment">
|
|
520
515
|
<code>> Buttons:</code>
|
|
@@ -528,7 +523,7 @@ __Button|Follow__
|
|
|
528
523
|
</div>
|
|
529
524
|
<!-- -->
|
|
530
525
|
<div class="ui center aligned six wide column">
|
|
531
|
-
<h5 class="ui header">Preview</h5>
|
|
526
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
532
527
|
<div class="ui buttons">
|
|
533
528
|
<button class="ui button">un</button>
|
|
534
529
|
<div class="or" data-text="ou"></div>
|
|
@@ -536,7 +531,7 @@ __Button|Follow__
|
|
|
536
531
|
</div>
|
|
537
532
|
</div>
|
|
538
533
|
<!-- -->
|
|
539
|
-
<div class="ui
|
|
534
|
+
<div class="ui ten wide column">
|
|
540
535
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
541
536
|
<div class="ui inverted very padded segment">
|
|
542
537
|
<code>> Buttons:</code>
|
|
@@ -566,11 +561,11 @@ __Button|Follow__
|
|
|
566
561
|
</div>
|
|
567
562
|
<!-- -->
|
|
568
563
|
<div class="ui center aligned six wide column">
|
|
569
|
-
<h5 class="ui header">Preview</h5>
|
|
564
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
570
565
|
<button class="ui active button"><i class="user icon"></i>Follow</button>
|
|
571
566
|
</div>
|
|
572
567
|
<!-- -->
|
|
573
|
-
<div class="ui
|
|
568
|
+
<div class="ui ten wide column">
|
|
574
569
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
575
570
|
<div class="ui inverted very padded segment">
|
|
576
571
|
<code>__Active Button|Icon:User, Follow__</code>
|
|
@@ -589,11 +584,11 @@ __Button|Follow__
|
|
|
589
584
|
</div>
|
|
590
585
|
<!-- -->
|
|
591
586
|
<div class="ui center aligned six wide column">
|
|
592
|
-
<h5 class="ui header">Preview</h5>
|
|
587
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
593
588
|
<button class="ui disabled button"><i class="user icon"></i>Followed</button>
|
|
594
589
|
</div>
|
|
595
590
|
<!-- -->
|
|
596
|
-
<div class="ui
|
|
591
|
+
<div class="ui ten wide column">
|
|
597
592
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
598
593
|
<div class="ui inverted very padded segment">
|
|
599
594
|
<code>__Disabled Button|Icon:User,Followed__</code>
|
|
@@ -612,14 +607,14 @@ __Button|Follow__
|
|
|
612
607
|
</div>
|
|
613
608
|
<!-- -->
|
|
614
609
|
<div class="ui center aligned six wide column">
|
|
615
|
-
<h5 class="ui header">Preview</h5>
|
|
610
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
616
611
|
<button class="ui loading button">Loading</button>
|
|
617
612
|
<button class="ui basic loading button">Loading</button>
|
|
618
613
|
<button class="ui primary loading button">Loading</button>
|
|
619
614
|
<button class="ui secondary loading button">Loading</button>
|
|
620
615
|
</div>
|
|
621
616
|
<!-- -->
|
|
622
|
-
<div class="ui
|
|
617
|
+
<div class="ui ten wide column">
|
|
623
618
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
624
619
|
<div class="ui inverted very padded segment">
|
|
625
620
|
<code>__Loading Button|Loading__</code>
|
|
@@ -648,7 +643,7 @@ __Button|Follow__
|
|
|
648
643
|
</div>
|
|
649
644
|
<!-- -->
|
|
650
645
|
<div class="ui center aligned six wide column">
|
|
651
|
-
<h5 class="ui header">Preview</h5>
|
|
646
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
652
647
|
<button class="ui facebook button"><i class="facebook icon"></i>Facebook</button>
|
|
653
648
|
<button class="ui twitter button"><i class="twitter icon"></i>Twitter</button>
|
|
654
649
|
<button class="ui google plus button"><i class="google plus icon"></i>Google Plus</button>
|
|
@@ -658,7 +653,7 @@ __Button|Follow__
|
|
|
658
653
|
<button class="ui youtube button"><i class="youtube icon"></i>YouTube</button>
|
|
659
654
|
</div>
|
|
660
655
|
<!-- -->
|
|
661
|
-
<div class="ui
|
|
656
|
+
<div class="ui ten wide column">
|
|
662
657
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
663
658
|
<div class="ui inverted very padded segment">
|
|
664
659
|
<code>__Facebook Button|Icon:Facebook, Facebook__</code>
|
|
@@ -690,7 +685,7 @@ __Button|Follow__
|
|
|
690
685
|
</div>
|
|
691
686
|
<!-- -->
|
|
692
687
|
<div class="ui center aligned six wide column">
|
|
693
|
-
<h5 class="ui header">Preview</h5>
|
|
688
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
694
689
|
<button class="ui mini button">Mini</button>
|
|
695
690
|
<button class="ui tiny button">Tiny</button>
|
|
696
691
|
<button class="ui small button">Small</button>
|
|
@@ -701,7 +696,7 @@ __Button|Follow__
|
|
|
701
696
|
<button class="ui massive button">Massive</button>
|
|
702
697
|
</div>
|
|
703
698
|
<!-- -->
|
|
704
|
-
<div class="ui
|
|
699
|
+
<div class="ui ten wide column">
|
|
705
700
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
706
701
|
<div class="ui inverted very padded segment">
|
|
707
702
|
<code>__Mini Button|Mini__</code>
|
|
@@ -734,7 +729,7 @@ __Button|Follow__
|
|
|
734
729
|
</div>
|
|
735
730
|
<!-- -->
|
|
736
731
|
<div class="ui center aligned six wide column">
|
|
737
|
-
<h5 class="ui header">Preview</h5>
|
|
732
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
738
733
|
<button class="ui red button">Red</button>
|
|
739
734
|
<button class="ui orange button">Orange</button>
|
|
740
735
|
<button class="ui yellow button">Yellow</button>
|
|
@@ -750,7 +745,7 @@ __Button|Follow__
|
|
|
750
745
|
<button class="ui black button">Black</button>
|
|
751
746
|
</div>
|
|
752
747
|
<!-- -->
|
|
753
|
-
<div class="ui
|
|
748
|
+
<div class="ui ten wide column">
|
|
754
749
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
755
750
|
<div class="ui inverted very padded segment">
|
|
756
751
|
<code>__Red Button|Red__</code>
|
|
@@ -793,7 +788,7 @@ __Button|Follow__
|
|
|
793
788
|
</div>
|
|
794
789
|
<!-- -->
|
|
795
790
|
<div class="ui center aligned six wide column">
|
|
796
|
-
<h5 class="ui header">Preview</h5>
|
|
791
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
797
792
|
<button class="ui compact button">Hold</button>
|
|
798
793
|
<button class="ui compact icon button">
|
|
799
794
|
<i class="pause icon"></i>
|
|
@@ -801,7 +796,7 @@ __Button|Follow__
|
|
|
801
796
|
<button class="ui compact labeled icon button"><i class="pause icon"></i>Pause</button>
|
|
802
797
|
</div>
|
|
803
798
|
<!-- -->
|
|
804
|
-
<div class="ui
|
|
799
|
+
<div class="ui ten wide column">
|
|
805
800
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
806
801
|
<div class="ui inverted very padded segment">
|
|
807
802
|
<code>__Compact Button|Hold__</code>
|
|
@@ -824,12 +819,12 @@ __Button|Follow__
|
|
|
824
819
|
</div>
|
|
825
820
|
<!-- -->
|
|
826
821
|
<div class="ui center aligned six wide column">
|
|
827
|
-
<h5 class="ui header">Preview</h5>
|
|
822
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
828
823
|
<button class="ui positive button">Positive Button</button>
|
|
829
824
|
<button class="ui negative button">Negative Button</button>
|
|
830
825
|
</div>
|
|
831
826
|
<!-- -->
|
|
832
|
-
<div class="ui
|
|
827
|
+
<div class="ui ten wide column">
|
|
833
828
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
834
829
|
<div class="ui inverted very padded segment">
|
|
835
830
|
<code>__Positive Button|Positive Button__</code>
|
|
@@ -851,11 +846,11 @@ __Button|Follow__
|
|
|
851
846
|
</div>
|
|
852
847
|
<!-- -->
|
|
853
848
|
<div class="ui center aligned six wide column">
|
|
854
|
-
<h5 class="ui header">Preview</h5>
|
|
849
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
855
850
|
<button class="ui negative button">Negative Button</button>
|
|
856
851
|
</div>
|
|
857
852
|
<!-- -->
|
|
858
|
-
<div class="ui
|
|
853
|
+
<div class="ui ten wide column">
|
|
859
854
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
860
855
|
<div class="ui inverted very padded segment">
|
|
861
856
|
<code>__Negative Button|Negative Button__</code>
|
|
@@ -875,11 +870,11 @@ __Button|Follow__
|
|
|
875
870
|
</div>
|
|
876
871
|
<!-- -->
|
|
877
872
|
<div class="ui center aligned six wide column">
|
|
878
|
-
<h5 class="ui header">Preview</h5>
|
|
873
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
879
874
|
<button class="ui fluid button">Fluid Button</button>
|
|
880
875
|
</div>
|
|
881
876
|
<!-- -->
|
|
882
|
-
<div class="ui
|
|
877
|
+
<div class="ui ten wide column">
|
|
883
878
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
884
879
|
<div class="ui inverted very padded segment">
|
|
885
880
|
<code>__Fluid Button|Fluid Button__</code>
|
|
@@ -899,13 +894,13 @@ __Button|Follow__
|
|
|
899
894
|
</div>
|
|
900
895
|
<!-- -->
|
|
901
896
|
<div class="ui center aligned six wide column">
|
|
902
|
-
<h5 class="ui header">Preview</h5>
|
|
897
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
903
898
|
<button class="ui circular icon button">
|
|
904
899
|
<i class="settings icon"></i>
|
|
905
900
|
</button>
|
|
906
901
|
</div>
|
|
907
902
|
<!-- -->
|
|
908
|
-
<div class="ui
|
|
903
|
+
<div class="ui ten wide column">
|
|
909
904
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
910
905
|
<div class="ui inverted very padded segment">
|
|
911
906
|
<code>__Circular Icon Button|Icon:Settings__</code>
|
|
@@ -925,7 +920,7 @@ __Button|Follow__
|
|
|
925
920
|
</div>
|
|
926
921
|
<!-- -->
|
|
927
922
|
<div class="ui center aligned six wide column">
|
|
928
|
-
<h5 class="ui header">Preview</h5>
|
|
923
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
929
924
|
<div class="ui top attached focusable button" tabindex="0">Top</div>
|
|
930
925
|
<div class="ui attached segment">
|
|
931
926
|
<p></p>
|
|
@@ -933,7 +928,7 @@ __Button|Follow__
|
|
|
933
928
|
<div class="ui bottom attached focusable button" tabindex="0">Bottom</div>
|
|
934
929
|
</div>
|
|
935
930
|
<!-- -->
|
|
936
|
-
<div class="ui
|
|
931
|
+
<div class="ui ten wide column">
|
|
937
932
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
938
933
|
<div class="ui inverted very padded segment">
|
|
939
934
|
<code>__Top Attached Focusable Button|Top__</code>
|
|
@@ -952,7 +947,7 @@ __Button|Follow__
|
|
|
952
947
|
</div>
|
|
953
948
|
<!-- -->
|
|
954
949
|
<div class="ui center aligned six wide column">
|
|
955
|
-
<h5 class="ui header">Preview</h5>
|
|
950
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
956
951
|
<div class="ui two top attached buttons">
|
|
957
952
|
<button class="ui button">One</button>
|
|
958
953
|
<button class="ui button">Two</button>
|
|
@@ -968,7 +963,7 @@ __Button|Follow__
|
|
|
968
963
|
</div>
|
|
969
964
|
</div>
|
|
970
965
|
<!-- -->
|
|
971
|
-
<div class="ui
|
|
966
|
+
<div class="ui ten wide column">
|
|
972
967
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
973
968
|
<div class="ui inverted very padded segment">
|
|
974
969
|
<code>> Two Top Attached Buttons:</code>
|
|
@@ -1004,19 +999,15 @@ __Button|Follow__
|
|
|
1004
999
|
<div class="ui top attached label">Horizontally Attached</div>
|
|
1005
1000
|
</div>
|
|
1006
1001
|
<!-- -->
|
|
1007
|
-
<div class="ui
|
|
1008
|
-
<h5 class="ui header">Preview</h5>
|
|
1009
|
-
<
|
|
1010
|
-
|
|
1011
|
-
<button class="ui right attached button">Right</button>
|
|
1012
|
-
</div>
|
|
1002
|
+
<div class="ui six wide column">
|
|
1003
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
1004
|
+
<button class="ui left attached button">Left</button>
|
|
1005
|
+
<button class="ui right attached button">Right</button>
|
|
1013
1006
|
</div>
|
|
1014
1007
|
<!-- -->
|
|
1015
|
-
<div class="ui
|
|
1008
|
+
<div class="ui ten wide column">
|
|
1016
1009
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
1017
1010
|
<div class="ui inverted very padded segment">
|
|
1018
|
-
<code>> Buttons:</code>
|
|
1019
|
-
<br />
|
|
1020
1011
|
<code>> __Left Attached Button|Left__</code>
|
|
1021
1012
|
<br />
|
|
1022
1013
|
<code>> __Right Attached Button|Right__</code>
|
|
@@ -1039,7 +1030,7 @@ __Button|Follow__
|
|
|
1039
1030
|
</div>
|
|
1040
1031
|
<!-- -->
|
|
1041
1032
|
<div class="ui center aligned six wide column">
|
|
1042
|
-
<h5 class="ui header">Preview</h5>
|
|
1033
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
1043
1034
|
<div class="ui vertical buttons">
|
|
1044
1035
|
<button class="ui button">Feed</button>
|
|
1045
1036
|
<button class="ui button">Messages</button>
|
|
@@ -1048,7 +1039,7 @@ __Button|Follow__
|
|
|
1048
1039
|
</div>
|
|
1049
1040
|
</div>
|
|
1050
1041
|
<!-- -->
|
|
1051
|
-
<div class="ui
|
|
1042
|
+
<div class="ui ten wide column">
|
|
1052
1043
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
1053
1044
|
<div class="ui inverted very padded segment">
|
|
1054
1045
|
<code>> Vertical Buttons:</code>
|
|
@@ -1075,7 +1066,7 @@ __Button|Follow__
|
|
|
1075
1066
|
</div>
|
|
1076
1067
|
<!-- -->
|
|
1077
1068
|
<div class="ui center aligned six wide column">
|
|
1078
|
-
<h5 class="ui header">Preview</h5>
|
|
1069
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
1079
1070
|
<div class="ui icon buttons">
|
|
1080
1071
|
<button class="ui button">
|
|
1081
1072
|
<i class="play icon"></i>
|
|
@@ -1089,7 +1080,7 @@ __Button|Follow__
|
|
|
1089
1080
|
</div>
|
|
1090
1081
|
</div>
|
|
1091
1082
|
<!-- -->
|
|
1092
|
-
<div class="ui
|
|
1083
|
+
<div class="ui ten wide column">
|
|
1093
1084
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
1094
1085
|
<div class="ui inverted very padded segment">
|
|
1095
1086
|
<code>> Icon Buttons:</code>
|
|
@@ -1114,7 +1105,7 @@ __Button|Follow__
|
|
|
1114
1105
|
</div>
|
|
1115
1106
|
<!-- -->
|
|
1116
1107
|
<div class="ui center aligned six wide column">
|
|
1117
|
-
<h5 class="ui header">Preview</h5>
|
|
1108
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
1118
1109
|
<div class="ui vertical labeled icon buttons">
|
|
1119
1110
|
<button class="ui button"><i class="play icon"></i>Play</button>
|
|
1120
1111
|
<button class="ui button"><i class="pause icon"></i>Pause</button>
|
|
@@ -1122,7 +1113,7 @@ __Button|Follow__
|
|
|
1122
1113
|
</div>
|
|
1123
1114
|
</div>
|
|
1124
1115
|
<!-- -->
|
|
1125
|
-
<div class="ui
|
|
1116
|
+
<div class="ui ten wide column">
|
|
1126
1117
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
1127
1118
|
<div class="ui inverted very padded segment">
|
|
1128
1119
|
<code>> Vertical Labeled Icon Buttons:</code>
|
|
@@ -1147,7 +1138,7 @@ __Button|Follow__
|
|
|
1147
1138
|
</div>
|
|
1148
1139
|
<!-- -->
|
|
1149
1140
|
<div class="ui center aligned six wide column">
|
|
1150
|
-
<h5 class="ui header">Preview</h5>
|
|
1141
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
1151
1142
|
<div class="ui buttons">
|
|
1152
1143
|
<button class="ui labeled icon button"><i class="left chevron icon"></i>Back</button>
|
|
1153
1144
|
<button class="ui button"><i class="stop icon"></i>Stop</button>
|
|
@@ -1155,7 +1146,7 @@ __Button|Follow__
|
|
|
1155
1146
|
</div>
|
|
1156
1147
|
</div>
|
|
1157
1148
|
<!-- -->
|
|
1158
|
-
<div class="ui
|
|
1149
|
+
<div class="ui ten wide column">
|
|
1159
1150
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
1160
1151
|
<div class="ui inverted very padded segment">
|
|
1161
1152
|
<code>> Buttons:</code>
|
|
@@ -1168,6 +1159,262 @@ __Button|Follow__
|
|
|
1168
1159
|
</div>
|
|
1169
1160
|
</div>
|
|
1170
1161
|
</div>
|
|
1162
|
+
<!-- -->
|
|
1163
|
+
<div class="ui basic segment">
|
|
1164
|
+
<h4 id="equal-width" class="ui header">Equal Width</h4>
|
|
1165
|
+
<p>Groups can have their widths divided evenly</p>
|
|
1166
|
+
</div>
|
|
1167
|
+
<!-- -->
|
|
1168
|
+
<div class="ui divided segment grid">
|
|
1169
|
+
<div class="ui attached segment">
|
|
1170
|
+
<div class="ui top attached label">Equal Width</div>
|
|
1171
|
+
</div>
|
|
1172
|
+
<!-- -->
|
|
1173
|
+
<div class="ui eight wide column">
|
|
1174
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
1175
|
+
<div class="ui five buttons">
|
|
1176
|
+
<button class="ui button">Overview</button>
|
|
1177
|
+
<button class="ui button">Specs</button>
|
|
1178
|
+
<button class="ui button">Warranty</button>
|
|
1179
|
+
<button class="ui button">Reviews</button>
|
|
1180
|
+
<button class="ui button">Support</button>
|
|
1181
|
+
</div>
|
|
1182
|
+
<!-- -->
|
|
1183
|
+
<div class="ui three buttons">
|
|
1184
|
+
<button class="ui button">Overview</button>
|
|
1185
|
+
<button class="ui button">Specs</button>
|
|
1186
|
+
<button class="ui button">Support</button>
|
|
1187
|
+
</div>
|
|
1188
|
+
</div>
|
|
1189
|
+
<!-- -->
|
|
1190
|
+
<div class="ui eight wide column">
|
|
1191
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
1192
|
+
<div class="ui inverted very padded segment">
|
|
1193
|
+
<code>> Five Buttons:</code>
|
|
1194
|
+
<br />
|
|
1195
|
+
<code>> __Button|Overview__</code>
|
|
1196
|
+
<br />
|
|
1197
|
+
<code>> __Button|Specs__</code>
|
|
1198
|
+
<br />
|
|
1199
|
+
<code>> __Button|Warranty__</code>
|
|
1200
|
+
<br />
|
|
1201
|
+
<code>> __Button|Reviews__</code>
|
|
1202
|
+
<br />
|
|
1203
|
+
<code>> __Button|Support__</code>
|
|
1204
|
+
<br />
|
|
1205
|
+
<code></code>
|
|
1206
|
+
<br />
|
|
1207
|
+
<code><!-- --></code>
|
|
1208
|
+
<br />
|
|
1209
|
+
<code></code>
|
|
1210
|
+
<br />
|
|
1211
|
+
<code>> Three Buttons:</code>
|
|
1212
|
+
<br />
|
|
1213
|
+
<code>> __Button|Overview__</code>
|
|
1214
|
+
<br />
|
|
1215
|
+
<code>> __Button|Specs__</code>
|
|
1216
|
+
<br />
|
|
1217
|
+
<code>> __Button|Support__</code>
|
|
1218
|
+
</div>
|
|
1219
|
+
</div>
|
|
1220
|
+
</div>
|
|
1221
|
+
<!-- -->
|
|
1222
|
+
<div class="ui basic segment">
|
|
1223
|
+
<h4 id="colored-buttons" class="ui header">Colored Buttons</h4>
|
|
1224
|
+
<p>Groups can have a shared color</p>
|
|
1225
|
+
</div>
|
|
1226
|
+
<!-- -->
|
|
1227
|
+
<div class="ui divided segment grid">
|
|
1228
|
+
<div class="ui attached segment">
|
|
1229
|
+
<div class="ui top attached label">Colored Buttons</div>
|
|
1230
|
+
</div>
|
|
1231
|
+
<!-- -->
|
|
1232
|
+
<div class="ui center aligned six wide column">
|
|
1233
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
1234
|
+
<div class="ui blue buttons">
|
|
1235
|
+
<button class="ui button">One</button>
|
|
1236
|
+
<button class="ui button">Two</button>
|
|
1237
|
+
<button class="ui button">Three</button>
|
|
1238
|
+
</div>
|
|
1239
|
+
</div>
|
|
1240
|
+
<!-- -->
|
|
1241
|
+
<div class="ui ten wide column">
|
|
1242
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
1243
|
+
<div class="ui inverted very padded segment">
|
|
1244
|
+
<code>> Blue Buttons:</code>
|
|
1245
|
+
<br />
|
|
1246
|
+
<code>> __Button|One__</code>
|
|
1247
|
+
<br />
|
|
1248
|
+
<code>> __Button|Two__</code>
|
|
1249
|
+
<br />
|
|
1250
|
+
<code>> __Button|Three__</code>
|
|
1251
|
+
</div>
|
|
1252
|
+
</div>
|
|
1253
|
+
</div>
|
|
1254
|
+
<!-- -->
|
|
1255
|
+
<div class="ui basic segment">
|
|
1256
|
+
<h4 id="basic-buttons" class="ui header">Basic Buttons</h4>
|
|
1257
|
+
<p>A button group can be less pronounced</p>
|
|
1258
|
+
</div>
|
|
1259
|
+
<!-- -->
|
|
1260
|
+
<div class="ui divided segment grid">
|
|
1261
|
+
<div class="ui attached segment">
|
|
1262
|
+
<div class="ui top attached label">Basic Buttons</div>
|
|
1263
|
+
</div>
|
|
1264
|
+
<!-- -->
|
|
1265
|
+
<div class="ui six wide column">
|
|
1266
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
1267
|
+
<div class="ui basic buttons">
|
|
1268
|
+
<button class="ui button">One</button>
|
|
1269
|
+
<button class="ui button">Two</button>
|
|
1270
|
+
<button class="ui button">Three</button>
|
|
1271
|
+
</div>
|
|
1272
|
+
<div class="ui divider"></div>
|
|
1273
|
+
<div class="ui vertical basic buttons">
|
|
1274
|
+
<button class="ui button">One</button>
|
|
1275
|
+
<button class="ui button">Two</button>
|
|
1276
|
+
<button class="ui button">Three</button>
|
|
1277
|
+
</div>
|
|
1278
|
+
</div>
|
|
1279
|
+
<!-- -->
|
|
1280
|
+
<div class="ui ten wide column">
|
|
1281
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
1282
|
+
<div class="ui inverted very padded segment">
|
|
1283
|
+
<code>> Basic Buttons:</code>
|
|
1284
|
+
<br />
|
|
1285
|
+
<code>> __Button|One__</code>
|
|
1286
|
+
<br />
|
|
1287
|
+
<code>> __Button|Two__</code>
|
|
1288
|
+
<br />
|
|
1289
|
+
<code>> __Button|Three__</code>
|
|
1290
|
+
<br />
|
|
1291
|
+
<code></code>
|
|
1292
|
+
<br />
|
|
1293
|
+
<code>___</code>
|
|
1294
|
+
<br />
|
|
1295
|
+
<code></code>
|
|
1296
|
+
<br />
|
|
1297
|
+
<code>> Vertical Basic Buttons:</code>
|
|
1298
|
+
<br />
|
|
1299
|
+
<code>> __Button|One__</code>
|
|
1300
|
+
<br />
|
|
1301
|
+
<code>> __Button|Two__</code>
|
|
1302
|
+
<br />
|
|
1303
|
+
<code>> __Button|Three__</code>
|
|
1304
|
+
</div>
|
|
1305
|
+
</div>
|
|
1306
|
+
<!-- -->
|
|
1307
|
+
<div class="ui six wide column">
|
|
1308
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
1309
|
+
<div class="ui buttons">
|
|
1310
|
+
<button class="ui red basic button">One</button>
|
|
1311
|
+
<button class="ui blue basic button">Two</button>
|
|
1312
|
+
<button class="ui green basic button">Three</button>
|
|
1313
|
+
</div>
|
|
1314
|
+
</div>
|
|
1315
|
+
<!-- -->
|
|
1316
|
+
<div class="ui ten wide column">
|
|
1317
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
1318
|
+
<div class="ui inverted very padded segment">
|
|
1319
|
+
<code>> Buttons:</code>
|
|
1320
|
+
<br />
|
|
1321
|
+
<code>> __Red Basic Button|One__</code>
|
|
1322
|
+
<br />
|
|
1323
|
+
<code>> __Blue Basic Button|Two__</code>
|
|
1324
|
+
<br />
|
|
1325
|
+
<code>> __Green Basic Button|Three__</code>
|
|
1326
|
+
</div>
|
|
1327
|
+
</div>
|
|
1328
|
+
</div>
|
|
1329
|
+
<!-- -->
|
|
1330
|
+
<div class="ui basic segment">
|
|
1331
|
+
<h4 id="group-sizes" class="ui header">Group Sizes</h4>
|
|
1332
|
+
<p>Groups can have a shared color</p>
|
|
1333
|
+
</div>
|
|
1334
|
+
<!-- -->
|
|
1335
|
+
<div class="ui divided segment grid">
|
|
1336
|
+
<div class="ui attached segment">
|
|
1337
|
+
<div class="ui top attached label">Group Sizes</div>
|
|
1338
|
+
</div>
|
|
1339
|
+
<!-- -->
|
|
1340
|
+
<div class="ui center aligned six wide column">
|
|
1341
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
1342
|
+
<div class="ui large buttons">
|
|
1343
|
+
<button class="ui button">One</button>
|
|
1344
|
+
<button class="ui button">Two</button>
|
|
1345
|
+
<button class="ui button">Three</button>
|
|
1346
|
+
</div>
|
|
1347
|
+
</div>
|
|
1348
|
+
<!-- -->
|
|
1349
|
+
<div class="ui ten wide column">
|
|
1350
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
1351
|
+
<div class="ui inverted very padded segment">
|
|
1352
|
+
<code>> Blue Buttons:</code>
|
|
1353
|
+
<br />
|
|
1354
|
+
<code>> __Button|One__</code>
|
|
1355
|
+
<br />
|
|
1356
|
+
<code>> __Button|Two__</code>
|
|
1357
|
+
<br />
|
|
1358
|
+
<code>> __Button|Three__</code>
|
|
1359
|
+
</div>
|
|
1360
|
+
</div>
|
|
1361
|
+
<!-- -->
|
|
1362
|
+
<div class="ui center aligned six wide column">
|
|
1363
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
1364
|
+
<div class="ui small basic icon buttons">
|
|
1365
|
+
<button class="ui button">
|
|
1366
|
+
<i class="file icon"></i>
|
|
1367
|
+
</button>
|
|
1368
|
+
<button class="ui button">
|
|
1369
|
+
<i class="save icon"></i>
|
|
1370
|
+
</button>
|
|
1371
|
+
<button class="ui button">
|
|
1372
|
+
<i class="upload icon"></i>
|
|
1373
|
+
</button>
|
|
1374
|
+
<button class="ui button">
|
|
1375
|
+
<i class="download icon"></i>
|
|
1376
|
+
</button>
|
|
1377
|
+
</div>
|
|
1378
|
+
</div>
|
|
1379
|
+
<!-- -->
|
|
1380
|
+
<div class="ui ten wide column">
|
|
1381
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
1382
|
+
<div class="ui inverted very padded segment">
|
|
1383
|
+
<code>> Small Basic Icon Buttons:</code>
|
|
1384
|
+
<br />
|
|
1385
|
+
<code>> __Button|Icon:File__</code>
|
|
1386
|
+
<br />
|
|
1387
|
+
<code>> __Button|Icon:Save__</code>
|
|
1388
|
+
<br />
|
|
1389
|
+
<code>> __Button|Icon:Upload__</code>
|
|
1390
|
+
<br />
|
|
1391
|
+
<code>> __Button|Icon:Download__</code>
|
|
1392
|
+
<br />
|
|
1393
|
+
</div>
|
|
1394
|
+
</div>
|
|
1395
|
+
<!-- -->
|
|
1396
|
+
<div class="ui center aligned six wide column">
|
|
1397
|
+
<h5 class="ui center aligned header">Preview</h5>
|
|
1398
|
+
<div class="ui large buttons">
|
|
1399
|
+
<button class="ui button">One</button>
|
|
1400
|
+
<div class="or"></div>
|
|
1401
|
+
<button class="ui button">Two</button>
|
|
1402
|
+
</div>
|
|
1403
|
+
</div>
|
|
1404
|
+
<!-- -->
|
|
1405
|
+
<div class="ui ten wide column">
|
|
1406
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
1407
|
+
<div class="ui inverted very padded segment">
|
|
1408
|
+
<code>> Large Buttons:</code>
|
|
1409
|
+
<br />
|
|
1410
|
+
<code>> __Button|One__</code>
|
|
1411
|
+
<br />
|
|
1412
|
+
<code>> __Div Tag||Or__</code>
|
|
1413
|
+
<br />
|
|
1414
|
+
<code>> __Button|Two__</code>
|
|
1415
|
+
</div>
|
|
1416
|
+
</div>
|
|
1417
|
+
</div>
|
|
1171
1418
|
</div>
|
|
1172
1419
|
|
|
1173
1420
|
</body>
|