markdown-ui 0.1.11 → 0.1.12
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Changelog +7 -0
- data/TODO.md +17 -3
- data/components/elements/markdown-ui-content/lib/content/item_block.rb +19 -0
- data/exe/markdown-ui +1 -2
- data/lib/markdown-ui.rb +2 -0
- data/lib/markdown-ui/version.rb +1 -1
- data/website/about.html +1 -2
- data/website/about.md +1 -6
- data/website/docs/button.html +1 -17
- data/website/docs/button.md +0 -208
- data/website/docs/container.html +269 -38
- data/website/docs/container.md +188 -102
- data/website/docs/toc.html +4 -2
- data/website/docs/toc.md +2 -10
- data/website/index.html +1 -3
- data/website/index.md +1 -24
- metadata +3 -2
data/website/docs/container.html
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
</head>
|
|
17
17
|
|
|
18
18
|
<body>
|
|
19
|
-
|
|
19
|
+
<div class="ui container">
|
|
20
20
|
<div class="ui inverted segment">
|
|
21
21
|
<div class="ui inverted menu">
|
|
22
22
|
<a class="ui basic item" href="http://jjuliano.github.io/markdown-ui">Markdown UI</a>
|
|
@@ -41,95 +41,326 @@
|
|
|
41
41
|
<h4 id="standard-container" class="ui header">Standard Container</h4>
|
|
42
42
|
<p>A standard container</p>
|
|
43
43
|
</div>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="ui divider"></div><div class="ui container">
|
|
46
|
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="ui divider"></div>
|
|
44
49
|
<!-- -->
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
<div class="ui top attached label">Standard Container</div>
|
|
48
|
-
</div>
|
|
49
|
-
<!-- -->
|
|
50
|
+
<div class="ui container">
|
|
51
|
+
<div class="ui grid">
|
|
50
52
|
<div class="ui sixteen wide column">
|
|
51
|
-
<h5 class="ui header">
|
|
52
|
-
<div class="ui segment
|
|
53
|
-
<
|
|
53
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
54
|
+
<div class="ui inverted very padded segment">
|
|
55
|
+
<code>> Container:</code>
|
|
56
|
+
<br />
|
|
57
|
+
<code>> "Lorem Ipsum Dolor"</code>
|
|
54
58
|
</div>
|
|
55
59
|
</div>
|
|
60
|
+
</div>
|
|
56
61
|
<!-- -->
|
|
62
|
+
<div class="ui basic segment">
|
|
63
|
+
<h4 id="text-container" class="ui header">Text Container</h4>
|
|
64
|
+
<p>A container can reduce its maximum width to more naturally accomodate a single column of text</p>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="ui divider"></div><div class="ui text container">
|
|
68
|
+
<h1 class="ui header">Header</h1>
|
|
69
|
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
|
|
70
|
+
</div>
|
|
71
|
+
<div class="ui divider"></div>
|
|
72
|
+
<!-- -->
|
|
73
|
+
<div class="ui container">
|
|
74
|
+
<div class="ui grid">
|
|
57
75
|
<div class="ui sixteen wide column">
|
|
58
76
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
59
77
|
<div class="ui inverted very padded segment">
|
|
60
|
-
<code>> Container:</code>
|
|
78
|
+
<code>> Text Container:</code>
|
|
79
|
+
<br />
|
|
80
|
+
<code>> # Header</code>
|
|
61
81
|
<br />
|
|
62
82
|
<code>> "Lorem Ipsum Dolor"</code>
|
|
63
83
|
</div>
|
|
64
84
|
</div>
|
|
85
|
+
</div>
|
|
65
86
|
<!-- -->
|
|
87
|
+
<div class="ui basic segment">
|
|
88
|
+
<h2 id="variations" class="ui dividing left aligned header">Variations</h2>
|
|
66
89
|
</div>
|
|
67
90
|
<!-- -->
|
|
68
91
|
<div class="ui basic segment">
|
|
69
|
-
<h4 id="text-
|
|
70
|
-
<p>A container can
|
|
92
|
+
<h4 id="text-alignment" class="ui header">Text Alignment</h4>
|
|
93
|
+
<p>A container can specify its text alignment</p>
|
|
71
94
|
</div>
|
|
95
|
+
</div>
|
|
96
|
+
<div class="ui divider"></div>
|
|
72
97
|
<!-- -->
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
98
|
+
<div class="ui left aligned container">
|
|
99
|
+
<p>Left Aligned</p>
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<!-- -->
|
|
103
|
+
<div class="ui center aligned container">
|
|
104
|
+
<p>Center Aligned</p>
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
<!-- -->
|
|
108
|
+
<div class="ui right aligned container">
|
|
109
|
+
<p>Right Aligned</p>
|
|
110
|
+
</div>
|
|
111
|
+
|
|
77
112
|
<!-- -->
|
|
113
|
+
<div class="ui justified aligned container">
|
|
114
|
+
<h4 id="justified-aligned" class="ui header">Justified Aligned</h4>
|
|
115
|
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
|
|
116
|
+
</div>
|
|
117
|
+
<div class="ui divider"></div>
|
|
118
|
+
<!-- -->
|
|
119
|
+
<div class="ui container">
|
|
120
|
+
<div class="ui grid">
|
|
78
121
|
<div class="ui sixteen wide column">
|
|
79
|
-
<h5 class="ui header">
|
|
80
|
-
<div class="ui
|
|
81
|
-
<
|
|
82
|
-
<
|
|
122
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
123
|
+
<div class="ui inverted very padded segment">
|
|
124
|
+
<code>> Left Aligned Container:</code>
|
|
125
|
+
<br />
|
|
126
|
+
<code>> "Left Aligned"</code>
|
|
127
|
+
<br />
|
|
128
|
+
<code></code>
|
|
129
|
+
<br />
|
|
130
|
+
<code><!-- --></code>
|
|
131
|
+
<br />
|
|
132
|
+
<code></code>
|
|
133
|
+
<br />
|
|
134
|
+
<code>> Center Aligned Container:</code>
|
|
135
|
+
<br />
|
|
136
|
+
<code>> "Center Aligned"</code>
|
|
137
|
+
<br />
|
|
138
|
+
<code></code>
|
|
139
|
+
<br />
|
|
140
|
+
<code><!-- --></code>
|
|
141
|
+
<br />
|
|
142
|
+
<code></code>
|
|
143
|
+
<br />
|
|
144
|
+
<code>> Right Aligned Container:</code>
|
|
145
|
+
<br />
|
|
146
|
+
<code>> "Right Aligned"</code>
|
|
147
|
+
<br />
|
|
148
|
+
<code></code>
|
|
149
|
+
<br />
|
|
150
|
+
<code><!-- --></code>
|
|
151
|
+
<br />
|
|
152
|
+
<code></code>
|
|
153
|
+
<br />
|
|
154
|
+
<code>> Justified Aligned Container:</code>
|
|
155
|
+
<br />
|
|
156
|
+
<code>> "Justified Aligned"</code>
|
|
83
157
|
</div>
|
|
84
158
|
</div>
|
|
159
|
+
</div>
|
|
85
160
|
<!-- -->
|
|
161
|
+
<div class="ui basic segment">
|
|
162
|
+
<h4 id="fluid" class="ui header">Fluid</h4>
|
|
163
|
+
<p>A fluid container has no maximum width</p>
|
|
164
|
+
</div>
|
|
165
|
+
</div>
|
|
166
|
+
<div class="ui divider"></div>
|
|
167
|
+
<!-- -->
|
|
168
|
+
<div class="ui fluid container">
|
|
169
|
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
|
|
170
|
+
</div>
|
|
171
|
+
<div class="ui divider"></div>
|
|
172
|
+
<!-- -->
|
|
173
|
+
<div class="ui container">
|
|
174
|
+
<div class="ui grid">
|
|
86
175
|
<div class="ui sixteen wide column">
|
|
87
176
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
88
177
|
<div class="ui inverted very padded segment">
|
|
89
|
-
<code>>
|
|
90
|
-
<br />
|
|
91
|
-
<code>> # Header</code>
|
|
178
|
+
<code>> Fluid Container:</code>
|
|
92
179
|
<br />
|
|
93
180
|
<code>> "Lorem Ipsum Dolor"</code>
|
|
94
181
|
</div>
|
|
95
182
|
</div>
|
|
96
|
-
<!-- -->
|
|
97
183
|
</div>
|
|
98
184
|
<!-- -->
|
|
99
185
|
<div class="ui basic segment">
|
|
100
|
-
<h2 id="
|
|
186
|
+
<h2 id="examples" class="ui dividing left aligned header">Examples</h2>
|
|
101
187
|
</div>
|
|
102
188
|
<!-- -->
|
|
103
189
|
<div class="ui basic segment">
|
|
104
|
-
<h4 id="
|
|
105
|
-
<p>A container can
|
|
190
|
+
<h4 id="container-using-grids" class="ui header">Container Using Grids</h4>
|
|
191
|
+
<p>A container can be combined with a grid allowing you to use all of the layout and alignment available for grids including responsive patterns.</p>
|
|
106
192
|
</div>
|
|
193
|
+
</div>
|
|
194
|
+
<div class="ui divider"></div>
|
|
107
195
|
<!-- -->
|
|
108
|
-
|
|
109
|
-
|
|
196
|
+
<div class="ui four column doubling grid container">
|
|
197
|
+
<div class="ui column">
|
|
198
|
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong.</p>
|
|
199
|
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong.</p>
|
|
200
|
+
</div>
|
|
110
201
|
<!-- -->
|
|
111
|
-
<div class="ui
|
|
112
|
-
<
|
|
113
|
-
|
|
114
|
-
|
|
202
|
+
<div class="ui column">
|
|
203
|
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong.</p>
|
|
204
|
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong.</p>
|
|
205
|
+
</div>
|
|
206
|
+
<!-- -->
|
|
207
|
+
<div class="ui column">
|
|
208
|
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong.</p>
|
|
209
|
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong.</p>
|
|
210
|
+
</div>
|
|
211
|
+
<!-- -->
|
|
212
|
+
<div class="ui column">
|
|
213
|
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong.</p>
|
|
214
|
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong.</p>
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
<div class="ui divider"></div>
|
|
115
218
|
<!-- -->
|
|
219
|
+
<div class="ui container">
|
|
220
|
+
<div class="ui grid">
|
|
116
221
|
<div class="ui sixteen wide column">
|
|
117
|
-
<h5 class="ui header">
|
|
118
|
-
<div class="ui
|
|
119
|
-
<
|
|
222
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
223
|
+
<div class="ui inverted very padded segment">
|
|
224
|
+
<code>> Four Column Doubling Grid Container:</code>
|
|
225
|
+
<br />
|
|
226
|
+
<code>> > Column:</code>
|
|
227
|
+
<br />
|
|
228
|
+
<code>> > "Lorem ipsum dolor"</code>
|
|
229
|
+
<br />
|
|
230
|
+
<code>> > "Lorem ipsum dolor"</code>
|
|
231
|
+
<br />
|
|
232
|
+
<code>></code>
|
|
233
|
+
<br />
|
|
234
|
+
<code>> <!-- --></code>
|
|
235
|
+
<br />
|
|
236
|
+
<code>> > Column:</code>
|
|
237
|
+
<br />
|
|
238
|
+
<code>> > "Lorem ipsum dolor"</code>
|
|
239
|
+
<br />
|
|
240
|
+
<code>> > "Lorem ipsum dolor"</code>
|
|
241
|
+
<br />
|
|
242
|
+
<code>></code>
|
|
243
|
+
<br />
|
|
244
|
+
<code>> <!-- --></code>
|
|
245
|
+
<br />
|
|
246
|
+
<code>> > Column:</code>
|
|
247
|
+
<br />
|
|
248
|
+
<code>> > "Lorem ipsum dolor"</code>
|
|
249
|
+
<br />
|
|
250
|
+
<code>> > "Lorem ipsum dolor"</code>
|
|
251
|
+
<br />
|
|
252
|
+
<code>></code>
|
|
253
|
+
<br />
|
|
254
|
+
<code>> <!-- --></code>
|
|
255
|
+
<br />
|
|
256
|
+
<code>> > Column:</code>
|
|
257
|
+
<br />
|
|
258
|
+
<code>> > "Lorem ipsum dolor"</code>
|
|
259
|
+
<br />
|
|
260
|
+
<code>> > "Lorem ipsum dolor"</code>
|
|
120
261
|
</div>
|
|
262
|
+
</div>
|
|
263
|
+
</div>
|
|
121
264
|
<!-- -->
|
|
265
|
+
<div class="ui basic segment">
|
|
266
|
+
<h4 id="centered-menu" class="ui header">Centered Menu</h4>
|
|
267
|
+
<p>A container can be used inside of a menu to make sure menu items appear inline with page contents. Using responsive variations like stackable menu can help make contents adjust to different device sizes.</p>
|
|
268
|
+
</div>
|
|
269
|
+
</div>
|
|
270
|
+
<div class="ui divider"></div>
|
|
271
|
+
<!-- -->
|
|
272
|
+
<div class="ui attached stackable menu">
|
|
273
|
+
<div class="ui container">
|
|
274
|
+
<a class="ui item"><i class="home icon"></i> Home</a>
|
|
275
|
+
<a class="ui item"><i class="grid layout icon"></i> Browse</a>
|
|
276
|
+
<a class="ui item"><i class="mail icon"></i> Messages</a>
|
|
277
|
+
<!-- -->
|
|
278
|
+
<div class="ui simple dropdown item">More <i class="dropdown icon"></i> <!-- --> <div class="ui menu"><a class="ui item"><i class="edit icon"></i> Edit Profile</a><a class="ui item"><i class="globe icon"></i> Choose Language</a><a class="ui item"><i class="settings icon"></i> Account Settings</a></div></div>
|
|
279
|
+
<!-- -->
|
|
280
|
+
<div class="ui right item">
|
|
281
|
+
<div class="ui input">
|
|
282
|
+
<input type="text" placeholder="Search..." />
|
|
283
|
+
</div>
|
|
122
284
|
</div>
|
|
285
|
+
</div>
|
|
286
|
+
</div>
|
|
287
|
+
<div class="ui divider"></div>
|
|
123
288
|
<!-- -->
|
|
289
|
+
<div class="ui container">
|
|
290
|
+
<div class="ui grid">
|
|
124
291
|
<div class="ui sixteen wide column">
|
|
125
292
|
<h5 class="ui header">Markdown Syntax</h5>
|
|
126
293
|
<div class="ui inverted very padded segment">
|
|
127
|
-
<code>>
|
|
294
|
+
<code>> Attached Stackable Menu:</code>
|
|
295
|
+
<br />
|
|
296
|
+
<code>> > Container:</code>
|
|
297
|
+
<br />
|
|
298
|
+
<code>> > [_Home Icon_ Home]()</code>
|
|
299
|
+
<br />
|
|
300
|
+
<code>> > [_Grid Layout Icon_ Browse]()</code>
|
|
301
|
+
<br />
|
|
302
|
+
<code>> > [_Mail Icon_ Messages]()</code>
|
|
303
|
+
<br />
|
|
304
|
+
<code>> ></code>
|
|
305
|
+
<br />
|
|
306
|
+
<code>> > <!-- --></code>
|
|
307
|
+
<br />
|
|
308
|
+
<code>> > > Simple Dropdown Item:</code>
|
|
309
|
+
<br />
|
|
310
|
+
<code>> > > More</code>
|
|
311
|
+
<br />
|
|
312
|
+
<code>> > > _Dropdown Icon_</code>
|
|
313
|
+
<br />
|
|
314
|
+
<code>> > ></code>
|
|
315
|
+
<br />
|
|
316
|
+
<code>> > > <!-- --></code>
|
|
317
|
+
<br />
|
|
318
|
+
<code>> > > > Menu:</code>
|
|
319
|
+
<br />
|
|
320
|
+
<code>> > > > [_Edit Icon_ Edit Profile]()</code>
|
|
321
|
+
<br />
|
|
322
|
+
<code>> > > > [_Globe Icon_ Choose Language]()</code>
|
|
323
|
+
<br />
|
|
324
|
+
<code>> > > > [_Settings Icon_ Account Settings]()</code>
|
|
325
|
+
<br />
|
|
326
|
+
<code>> ></code>
|
|
327
|
+
<br />
|
|
328
|
+
<code>> > <!-- --></code>
|
|
329
|
+
<br />
|
|
330
|
+
<code>> > > Right Item:</code>
|
|
331
|
+
<br />
|
|
332
|
+
<code>> > > <div class="ui input"><input type="text" placeholder="Search..."></div></code>
|
|
128
333
|
<br />
|
|
129
|
-
<code>> "Fluid"</code>
|
|
130
334
|
</div>
|
|
131
335
|
</div>
|
|
336
|
+
</div>
|
|
337
|
+
<!-- -->
|
|
338
|
+
<div class="ui basic segment">
|
|
339
|
+
<h4 id="container-segment" class="ui header">Container Segment</h4>
|
|
340
|
+
<p>A container can be used with a segment</p>
|
|
341
|
+
</div>
|
|
342
|
+
</div>
|
|
343
|
+
<div class="ui divider"></div>
|
|
344
|
+
<!-- -->
|
|
345
|
+
<div class="ui raised very padded text container segment">
|
|
346
|
+
<h2 class="ui header">Header</h2>
|
|
347
|
+
<p>Lorem Ipsum Dolor</p>
|
|
348
|
+
</div>
|
|
349
|
+
<div class="ui divider"></div>
|
|
132
350
|
<!-- -->
|
|
351
|
+
<div class="ui container">
|
|
352
|
+
<div class="ui grid">
|
|
353
|
+
<div class="ui sixteen wide column">
|
|
354
|
+
<h5 class="ui header">Markdown Syntax</h5>
|
|
355
|
+
<div class="ui inverted very padded segment">
|
|
356
|
+
<code>> Raised Very Padded Text Container Segment:</code>
|
|
357
|
+
<br />
|
|
358
|
+
<code>> ## Header</code>
|
|
359
|
+
<br />
|
|
360
|
+
<code>> "Lorem Ipsum Dolor"</code>
|
|
361
|
+
<br />
|
|
362
|
+
</div>
|
|
363
|
+
</div>
|
|
133
364
|
</div>
|
|
134
365
|
</div>
|
|
135
366
|
|
data/website/docs/container.md
CHANGED
|
@@ -9,124 +9,88 @@
|
|
|
9
9
|
> > > > [Install](../index.html#install)
|
|
10
10
|
>
|
|
11
11
|
> <!-- -->
|
|
12
|
-
>
|
|
13
12
|
> > Basic Segment:
|
|
14
13
|
> > # Container:Center Aligned:container
|
|
15
14
|
>
|
|
16
15
|
> <!-- -->
|
|
17
|
-
>
|
|
18
16
|
> > Basic Segment:
|
|
19
17
|
> > ## Types:Dividing Left Aligned:types
|
|
20
18
|
>
|
|
21
19
|
> <!-- -->
|
|
22
|
-
>
|
|
23
20
|
> > Basic Segment:
|
|
24
21
|
> > #### Standard Container::standard-container
|
|
25
22
|
> > "A standard container"
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
>
|
|
30
|
-
>
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
>
|
|
36
|
-
> >
|
|
37
|
-
> > > ##### Preview
|
|
38
|
-
> > > > Segment Container:
|
|
39
|
-
> > > > "Lorem Ipsum Dolor"
|
|
40
|
-
> >
|
|
41
|
-
> > <!-- -->
|
|
42
|
-
> >
|
|
23
|
+
|
|
24
|
+
____
|
|
25
|
+
|
|
26
|
+
> Container:
|
|
27
|
+
> "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi."
|
|
28
|
+
|
|
29
|
+
____
|
|
30
|
+
|
|
31
|
+
<!-- -->
|
|
32
|
+
> Container:
|
|
33
|
+
> > Grid:
|
|
43
34
|
> > > Sixteen Wide Column:
|
|
44
35
|
> > > ##### Markdown Syntax
|
|
45
36
|
> > > > Inverted Very Padded Segment:
|
|
46
37
|
> > > > ``` > Container： ``` <br />
|
|
47
38
|
> > > > ``` > "Lorem Ipsum Dolor" ```
|
|
48
|
-
> >
|
|
49
|
-
> > <!-- -->
|
|
50
|
-
> >
|
|
51
39
|
>
|
|
52
40
|
> <!-- -->
|
|
53
|
-
>
|
|
54
41
|
> > Basic Segment:
|
|
55
42
|
> > #### Text Container::text-container
|
|
56
43
|
> > "A container can reduce its maximum width to more naturally accomodate a single column of text"
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
>
|
|
61
|
-
>
|
|
62
|
-
>
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
>
|
|
68
|
-
> >
|
|
69
|
-
> > > > Segment Text Container:
|
|
70
|
-
> > > > # Header
|
|
71
|
-
> > > > "Lorem Ipsum Dolor"
|
|
72
|
-
> >
|
|
73
|
-
> > <!-- -->
|
|
74
|
-
> >
|
|
44
|
+
|
|
45
|
+
____
|
|
46
|
+
|
|
47
|
+
>Text Container:
|
|
48
|
+
> # Header
|
|
49
|
+
> "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi."
|
|
50
|
+
|
|
51
|
+
____
|
|
52
|
+
|
|
53
|
+
<!-- -->
|
|
54
|
+
> Container:
|
|
55
|
+
> > Grid:
|
|
75
56
|
> > > Sixteen Wide Column:
|
|
76
57
|
> > > ##### Markdown Syntax
|
|
77
58
|
> > > > Inverted Very Padded Segment:
|
|
78
59
|
> > > > ``` > Text Container： ``` <br />
|
|
79
60
|
> > > > ``` > # Header``` <br />
|
|
80
61
|
> > > > ``` > "Lorem Ipsum Dolor" ```
|
|
81
|
-
> >
|
|
82
|
-
> > <!-- -->
|
|
83
|
-
> >
|
|
84
62
|
>
|
|
85
63
|
> <!-- -->
|
|
86
|
-
>
|
|
87
64
|
> > Basic Segment:
|
|
88
|
-
> > ## Variations:Dividing Left Aligned:
|
|
65
|
+
> > ## Variations:Dividing Left Aligned:variations
|
|
89
66
|
>
|
|
90
67
|
> <!-- -->
|
|
91
|
-
>
|
|
92
68
|
> > Basic Segment:
|
|
93
69
|
> > #### Text Alignment::text-alignment
|
|
94
70
|
> > "A container can specify its text alignment"
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
>
|
|
99
|
-
>
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
>
|
|
103
|
-
>
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
>
|
|
107
|
-
>
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
>
|
|
111
|
-
>
|
|
112
|
-
>
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
>
|
|
117
|
-
> >
|
|
118
|
-
> > > > "Right Aligned"
|
|
119
|
-
> > >
|
|
120
|
-
> > > <!-- -->
|
|
121
|
-
> > >
|
|
122
|
-
> > > > Segment Justified Aligned Container:
|
|
123
|
-
> > > > "Justified Aligned"
|
|
124
|
-
> > >
|
|
125
|
-
> > > <!-- -->
|
|
126
|
-
> > >
|
|
127
|
-
> >
|
|
128
|
-
> > <!-- -->
|
|
129
|
-
> >
|
|
71
|
+
|
|
72
|
+
____
|
|
73
|
+
<!-- -->
|
|
74
|
+
> Left Aligned Container:
|
|
75
|
+
> "Left Aligned"
|
|
76
|
+
|
|
77
|
+
<!-- -->
|
|
78
|
+
> Center Aligned Container:
|
|
79
|
+
> "Center Aligned"
|
|
80
|
+
|
|
81
|
+
<!-- -->
|
|
82
|
+
> Right Aligned Container:
|
|
83
|
+
> "Right Aligned"
|
|
84
|
+
|
|
85
|
+
<!-- -->
|
|
86
|
+
> Justified Aligned Container:
|
|
87
|
+
> #### Justified Aligned::justified-aligned
|
|
88
|
+
> "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi."
|
|
89
|
+
|
|
90
|
+
____
|
|
91
|
+
<!-- -->
|
|
92
|
+
> Container:
|
|
93
|
+
> > Grid:
|
|
130
94
|
> > > Sixteen Wide Column:
|
|
131
95
|
> > > ##### Markdown Syntax
|
|
132
96
|
> > > > Inverted Very Padded Segment:
|
|
@@ -147,37 +111,159 @@
|
|
|
147
111
|
> > > > ``` ``` <br />
|
|
148
112
|
> > > > ``` > Justified Aligned Container： ``` <br />
|
|
149
113
|
> > > > ``` > "Justified Aligned" ```
|
|
150
|
-
>
|
|
151
|
-
>
|
|
152
|
-
> >
|
|
114
|
+
>
|
|
115
|
+
> <!-- -->
|
|
153
116
|
> > Basic Segment:
|
|
154
117
|
> > #### Fluid::fluid
|
|
155
118
|
> > "A fluid container has no maximum width"
|
|
119
|
+
|
|
120
|
+
____
|
|
121
|
+
<!-- -->
|
|
122
|
+
> Fluid Container:
|
|
123
|
+
> "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi."
|
|
124
|
+
|
|
125
|
+
____
|
|
126
|
+
<!-- -->
|
|
127
|
+
> Container:
|
|
128
|
+
> > Grid:
|
|
129
|
+
> > > Sixteen Wide Column:
|
|
130
|
+
> > > ##### Markdown Syntax
|
|
131
|
+
> > > > Inverted Very Padded Segment:
|
|
132
|
+
> > > > ``` > Fluid Container： ``` <br />
|
|
133
|
+
> > > > ``` > "Lorem Ipsum Dolor" ```
|
|
134
|
+
>
|
|
135
|
+
> <!-- -->
|
|
136
|
+
> > Basic Segment:
|
|
137
|
+
> > ## Examples:Dividing Left Aligned:examples
|
|
138
|
+
>
|
|
139
|
+
> <!-- -->
|
|
140
|
+
> > Basic Segment:
|
|
141
|
+
> > #### Container Using Grids::container-using-grids
|
|
142
|
+
> > "A container can be combined with a grid allowing you to use all of the layout and alignment available for grids including responsive patterns."
|
|
143
|
+
|
|
144
|
+
____
|
|
145
|
+
<!-- -->
|
|
146
|
+
> Four Column Doubling Grid Container:
|
|
147
|
+
> > Column:
|
|
148
|
+
> > "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong."
|
|
149
|
+
> > "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong."
|
|
156
150
|
>
|
|
157
151
|
> <!-- -->
|
|
152
|
+
> > Column:
|
|
153
|
+
> > "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong."
|
|
154
|
+
> > "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong."
|
|
158
155
|
>
|
|
159
|
-
>
|
|
160
|
-
> >
|
|
161
|
-
> >
|
|
162
|
-
> >
|
|
156
|
+
> <!-- -->
|
|
157
|
+
> > Column:
|
|
158
|
+
> > "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong."
|
|
159
|
+
> > "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong."
|
|
160
|
+
>
|
|
161
|
+
> <!-- -->
|
|
162
|
+
> > Column:
|
|
163
|
+
> > "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong."
|
|
164
|
+
> > "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong."
|
|
165
|
+
|
|
166
|
+
____
|
|
167
|
+
<!-- -->
|
|
168
|
+
> Container:
|
|
169
|
+
> > Grid:
|
|
170
|
+
> > > Sixteen Wide Column:
|
|
171
|
+
> > > ##### Markdown Syntax
|
|
172
|
+
> > > > Inverted Very Padded Segment:
|
|
173
|
+
> > > > ``` > Four Column Doubling Grid Container： ``` <br />
|
|
174
|
+
> > > > ``` > > Column： ``` <br />
|
|
175
|
+
> > > > ``` > > "Lorem ipsum dolor" ``` <br />
|
|
176
|
+
> > > > ``` > > "Lorem ipsum dolor" ``` <br />
|
|
177
|
+
> > > > ``` > ``` <br />
|
|
178
|
+
> > > > ``` > <!-- --> ``` <br />
|
|
179
|
+
> > > > ``` > > Column： ``` <br />
|
|
180
|
+
> > > > ``` > > "Lorem ipsum dolor" ``` <br />
|
|
181
|
+
> > > > ``` > > "Lorem ipsum dolor" ``` <br />
|
|
182
|
+
> > > > ``` > ``` <br />
|
|
183
|
+
> > > > ``` > <!-- --> ``` <br />
|
|
184
|
+
> > > > ``` > > Column： ``` <br />
|
|
185
|
+
> > > > ``` > > "Lorem ipsum dolor" ``` <br />
|
|
186
|
+
> > > > ``` > > "Lorem ipsum dolor" ``` <br />
|
|
187
|
+
> > > > ``` > ``` <br />
|
|
188
|
+
> > > > ``` > <!-- --> ``` <br />
|
|
189
|
+
> > > > ``` > > Column： ``` <br />
|
|
190
|
+
> > > > ``` > > "Lorem ipsum dolor" ``` <br />
|
|
191
|
+
> > > > ``` > > "Lorem ipsum dolor" ```
|
|
192
|
+
>
|
|
193
|
+
> <!-- -->
|
|
194
|
+
> > Basic Segment:
|
|
195
|
+
> > #### Centered Menu::centered-menu
|
|
196
|
+
> > "A container can be used inside of a menu to make sure menu items appear inline with page contents. Using responsive variations like stackable menu can help make contents adjust to different device sizes."
|
|
197
|
+
|
|
198
|
+
____
|
|
199
|
+
<!-- -->
|
|
200
|
+
> Attached Stackable Menu:
|
|
201
|
+
> > Container:
|
|
202
|
+
> > [_Home Icon_ Home]()
|
|
203
|
+
> > [_Grid Layout Icon_ Browse]()
|
|
204
|
+
> > [_Mail Icon_ Messages]()
|
|
163
205
|
> >
|
|
164
206
|
> > <!-- -->
|
|
165
|
-
> >
|
|
166
|
-
> > >
|
|
167
|
-
> > >
|
|
168
|
-
> > > > Segment Fluid Container:
|
|
169
|
-
> > > > "Fluid"
|
|
207
|
+
> > > Simple Dropdown Item:
|
|
208
|
+
> > > More
|
|
209
|
+
> > > _Dropdown Icon_
|
|
170
210
|
> > >
|
|
171
211
|
> > > <!-- -->
|
|
172
|
-
> > >
|
|
212
|
+
> > > > Menu:
|
|
213
|
+
> > > > [_Edit Icon_ Edit Profile]()
|
|
214
|
+
> > > > [_Globe Icon_ Choose Language]()
|
|
215
|
+
> > > > [_Settings Icon_ Account Settings]()
|
|
173
216
|
> >
|
|
174
217
|
> > <!-- -->
|
|
175
|
-
> >
|
|
218
|
+
> > > Right Item:
|
|
219
|
+
> > > <div class="ui input"><input type="text" placeholder="Search..."></div>
|
|
220
|
+
|
|
221
|
+
____
|
|
222
|
+
<!-- -->
|
|
223
|
+
> Container:
|
|
224
|
+
> > Grid:
|
|
176
225
|
> > > Sixteen Wide Column:
|
|
177
226
|
> > > ##### Markdown Syntax
|
|
178
227
|
> > > > Inverted Very Padded Segment:
|
|
179
|
-
> > >
|
|
180
|
-
> > >
|
|
181
|
-
> >
|
|
182
|
-
> >
|
|
183
|
-
> >
|
|
228
|
+
> > > ``` > Attached Stackable Menu： ``` <br />
|
|
229
|
+
> > > ``` > > Container： ``` <br />
|
|
230
|
+
> > > ``` > > [_Home Icon_ Home]() ``` <br />
|
|
231
|
+
> > > ``` > > [_Grid Layout Icon_ Browse]() ``` <br />
|
|
232
|
+
> > > ``` > > [_Mail Icon_ Messages]() ``` <br />
|
|
233
|
+
> > > ``` > > ``` <br />
|
|
234
|
+
> > > ``` > > <!-- --> ``` <br />
|
|
235
|
+
> > > ``` > > > Simple Dropdown Item： ``` <br />
|
|
236
|
+
> > > ``` > > > More ``` <br />
|
|
237
|
+
> > > ``` > > > _Dropdown Icon_ ``` <br />
|
|
238
|
+
> > > ``` > > > ``` <br />
|
|
239
|
+
> > > ``` > > > <!-- --> ``` <br />
|
|
240
|
+
> > > ``` > > > > Menu： ``` <br />
|
|
241
|
+
> > > ``` > > > > [_Edit Icon_ Edit Profile]() ``` <br />
|
|
242
|
+
> > > ``` > > > > [_Globe Icon_ Choose Language]() ``` <br />
|
|
243
|
+
> > > ``` > > > > [_Settings Icon_ Account Settings]() ``` <br />
|
|
244
|
+
> > > ``` > > ``` <br />
|
|
245
|
+
> > > ``` > > <!-- --> ``` <br />
|
|
246
|
+
> > > ``` > > > Right Item： ``` <br />
|
|
247
|
+
> > > ``` > > > <div class="ui input"><input type="text" placeholder="Search..."></div> ``` <br />
|
|
248
|
+
>
|
|
249
|
+
> <!-- -->
|
|
250
|
+
> > Basic Segment:
|
|
251
|
+
> > #### Container Segment::container-segment
|
|
252
|
+
> > "A container can be used with a segment"
|
|
253
|
+
|
|
254
|
+
____
|
|
255
|
+
<!-- -->
|
|
256
|
+
> Raised Very Padded Text Container Segment:
|
|
257
|
+
> ## Header
|
|
258
|
+
> "Lorem Ipsum Dolor"
|
|
259
|
+
|
|
260
|
+
____
|
|
261
|
+
<!-- -->
|
|
262
|
+
> Container:
|
|
263
|
+
> > Grid:
|
|
264
|
+
> > > Sixteen Wide Column:
|
|
265
|
+
> > > ##### Markdown Syntax
|
|
266
|
+
> > > > Inverted Very Padded Segment:
|
|
267
|
+
> > > > ``` > Raised Very Padded Text Container Segment： ``` <br />
|
|
268
|
+
> > > > ``` > ## Header ``` <br />
|
|
269
|
+
> > > > ``` > "Lorem Ipsum Dolor" ``` <br />
|