UNPKG

18.3 kBHTMLView Raw
1<!DOCTYPE html>
2<html>
3<head>
4 <!-- Standard Meta -->
5 <meta charset="utf-8" />
6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
8
9 <!-- Site Properties -->
10 <title>Responsive Elements - Semantic</title>
11 <link rel="stylesheet" type="text/css" href="../dist/semantic.css">
12
13 <script src="assets/library/jquery.min.js"></script>
14 <script src="../dist/semantic.js"></script>
15
16</head>
17<body>
18
19<h1 class="ui center aligned header">Responsive UI Examples</h1>
20
21
22<h2 class="ui center aligned header">Basic Responsive</h2>
23
24
25<h3 class="ui center aligned header">Container</h3>
26<div class="ui container">
27 <div class="ui segments">
28 <div class="ui segment">Content</div>
29 <div class="ui segment">Content</div>
30 <div class="ui segment">Content</div>
31 <div class="ui segment">Content</div>
32 </div>
33</div>
34<h3 class="ui center aligned header">Text Container</h3>
35<div class="ui text container">
36 <div class="ui segments">
37 <div class="ui segment">Content</div>
38 <div class="ui segment">Content</div>
39 <div class="ui segment">Content</div>
40 <div class="ui segment">Content</div>
41 </div>
42</div>
43
44<h3 class="ui center aligned header">Stackable Grid</h3>
45<div class="ui two column stackable grid">
46 <div class="column">
47 <div class="ui segment">Content</div>
48 </div>
49 <div class="column">
50 <div class="ui segment">Content</div>
51 </div>
52 <div class="three column row">
53 <div class="column">
54 <div class="ui segment">Content</div>
55 </div>
56 <div class="column">
57 <div class="ui segment">Content</div>
58 </div>
59 <div class="column">
60 <div class="ui segment">Content</div>
61 </div>
62 </div>
63 <div class="ten wide column">
64 <div class="ui segment">Content</div>
65 </div>
66 <div class="six wide column">
67 <div class="ui segment">Content</div>
68 </div>
69</div>
70
71
72<h3 class="ui center aligned header">Doubling Grid</h3>
73<div class="ui three column doubling grid">
74 <div class="column">
75 <div class="ui segment">Content</div>
76 </div>
77 <div class="column">
78 <div class="ui segment">Content</div>
79 </div>
80 <div class="column">
81 <div class="ui segment">Content</div>
82 </div>
83 <div class="column">
84 <div class="ui segment">Content</div>
85 </div>
86 <div class="column">
87 <div class="ui segment">Content</div>
88 </div>
89 <div class="column">
90 <div class="ui segment">Content</div>
91 </div>
92</div>
93
94<h3 class="ui center aligned header">Doubling Stackable Grid</h3>
95<div class="ui three column doubling stackable grid">
96 <div class="column">
97 <div class="ui segment">Content</div>
98 </div>
99 <div class="column">
100 <div class="ui segment">Content</div>
101 </div>
102 <div class="column">
103 <div class="ui segment">Content</div>
104 </div>
105 <div class="column">
106 <div class="ui segment">Content</div>
107 </div>
108 <div class="column">
109 <div class="ui segment">Content</div>
110 </div>
111 <div class="column">
112 <div class="ui segment">Content</div>
113 </div>
114</div>
115
116<h3 class="ui center aligned header">Nested Stackable Grid</h3>
117<div class="ui two column grid">
118 <div class="column">
119 <div class="ui stackable doubling two column grid">
120 <div class="column">
121 <div class="ui segment">Content</div>
122 </div>
123 <div class="column">
124 <div class="ui segment">Content</div>
125 </div>
126 </div>
127 </div>
128 <div class="column">
129 <div class="ui stackable doubling three column grid">
130 <div class="column">
131 <div class="ui segment">Content</div>
132 </div>
133 <div class="column">
134 <div class="ui segment">Content</div>
135 </div>
136 <div class="column">
137 <div class="ui segment">Content</div>
138 </div>
139 </div>
140 </div>
141</div>
142
143
144<h3 class="ui center aligned header">Stackable Grid Container</h3>
145<div class="ui two column stackable grid container">
146 <div class="column">
147 <div class="ui segment">Content</div>
148 </div>
149 <div class="column">
150 <div class="ui segment">Content</div>
151 </div>
152 <div class="column">
153 <div class="ui segment">Content</div>
154 </div>
155 <div class="column">
156 <div class="ui segment">Content</div>
157 </div>
158 <div class="column">
159 <div class="ui segment">Content</div>
160 </div>
161 <div class="column">
162 <div class="ui segment">Content</div>
163 </div>
164</div>
165
166
167<h3 class="ui center aligned header">Doubling Grid Container</h3>
168<div class="ui three column doubling grid container">
169 <div class="column">
170 <div class="ui segment">Content</div>
171 </div>
172 <div class="column">
173 <div class="ui segment">Content</div>
174 </div>
175 <div class="column">
176 <div class="ui segment">Content</div>
177 </div>
178 <div class="column">
179 <div class="ui segment">Content</div>
180 </div>
181 <div class="column">
182 <div class="ui segment">Content</div>
183 </div>
184 <div class="column">
185 <div class="ui segment">Content</div>
186 </div>
187</div>
188
189<h3 class="ui center aligned header">Doubling Stackable Grid Container</h3>
190<div class="ui three column doubling stackable grid container">
191 <div class="column">
192 <div class="ui segment">Content</div>
193 </div>
194 <div class="column">
195 <div class="ui segment">Content</div>
196 </div>
197 <div class="column">
198 <div class="ui segment">Content</div>
199 </div>
200 <div class="column">
201 <div class="ui segment">Content</div>
202 </div>
203 <div class="column">
204 <div class="ui segment">Content</div>
205 </div>
206 <div class="column">
207 <div class="ui segment">Content</div>
208 </div>
209</div>
210
211<h2 class="ui center aligned header">Device Adjustment</h2>
212
213<h3 class="ui center aligned header">Device Column Width</h3>
214<div class="ui grid">
215 <div class="three wide computer nine wide tablet six wide mobile column">
216 <div class="ui segment">Content</div>
217 </div>
218 <div class="four wide column">
219 <div class="ui segment">Content</div>
220 </div>
221 <div class="nine wide computer three wide tablet six wide mobile column">
222 <div class="ui segment">Content</div>
223 </div>
224 <div class="nine wide computer three wide tablet six wide mobile column">
225 <div class="ui segment">Content</div>
226 </div>
227 <div class="four wide column">
228 <div class="ui segment">Content</div>
229 </div>
230 <div class="three wide computer nine wide tablet six wide mobile column">
231 <div class="ui segment">Content</div>
232 </div>
233</div>
234
235<h3 class="ui center aligned header">Device Visibility</h3>
236<div class="ui four column grid">
237 <div class="widescreen only ten wide column">
238 <div class="ui segment">Widescreen</div>
239 </div>
240 <div class="widescreen only six wide column">
241 <div class="ui segment">Widescreen</div>
242 </div>
243 <div class="large screen only six wide column">
244 <div class="ui segment">Large Screen</div>
245 </div>
246 <div class="large screen only ten wide column">
247 <div class="ui segment">Large Screen</div>
248 </div>
249 <div class="tablet only mobile only eight wide column">
250 <div class="ui segment">Tablet and Mobile</div>
251 </div>
252 <div class="tablet only mobile only eight wide column">
253 <div class="ui segment">Tablet and Mobile</div>
254 </div>
255 <div class="mobile only sixteen wide column">
256 <div class="ui segment">Mobile</div>
257 </div>
258 <div class="computer only two column row">
259 <div class="column">
260 <div class="ui segment">Computer and Up</div>
261 </div>
262 <div class="column">
263 <div class="ui segment">Computer and Up</div>
264 </div>
265 </div>
266 <div class="tablet only column">
267 <div class="ui segment">Tablet Only Content</div>
268 </div>
269 <div class="tablet only column">
270 <div class="ui segment">Tablet Only Content</div>
271 </div>
272 <div class="tablet only column">
273 <div class="ui segment">Tablet Only Content</div>
274 </div>
275 <div class="tablet only column">
276 <div class="ui segment">Tablet Only Content</div>
277 </div>
278</div>
279
280
281<h2 class="ui center aligned header">Responsive Grid with Variations</h2>
282
283<h3 class="ui center aligned header">Stackable Divided Grid</h3>
284<div class="ui stackable two column divided grid container">
285 <div class="row">
286 <div class="column">
287 <div class="ui segment">Content</div>
288 </div>
289 <div class="column">
290 <div class="ui segment">Content</div>
291 </div>
292 </div>
293 <div class="row">
294 <div class="column">
295 <div class="ui segment">Content</div>
296 </div>
297 <div class="column">
298 <div class="ui segment">Content</div>
299 </div>
300 </div>
301 <div class="row">
302 <div class="column">
303 <div class="ui segment">Content</div>
304 </div>
305 <div class="column">
306 <div class="ui segment">Content</div>
307 </div>
308 </div>
309</div>
310
311<h3 class="ui center aligned header">Stackable Vertically Divided Grid</h3>
312<div class="ui stackable two column vertically divided grid container">
313 <div class="row">
314 <div class="column">
315 <div class="ui segment">Content</div>
316 </div>
317 <div class="column">
318 <div class="ui segment">Content</div>
319 </div>
320 </div>
321 <div class="row">
322 <div class="column">
323 <div class="ui segment">Content</div>
324 </div>
325 <div class="column">
326 <div class="ui segment">Content</div>
327 </div>
328 </div>
329 <div class="row">
330 <div class="column">
331 <div class="ui segment">Content</div>
332 </div>
333 <div class="column">
334 <div class="ui segment">Content</div>
335 </div>
336 </div>
337</div>
338
339<h3 class="ui center aligned header">Celled Stackable Grid</h3>
340<div class="ui stackable celled grid container">
341 <div class="two column row">
342 <div class="column">
343 <div class="ui segment">Content</div>
344 </div>
345 <div class="column">
346 <div class="ui segment">Content</div>
347 </div>
348 </div>
349 <div class="three column row">
350 <div class="column">
351 <div class="ui segment">Content</div>
352 </div>
353 <div class="column">
354 <div class="ui segment">Content</div>
355 </div>
356 <div class="column">
357 <div class="ui segment">Content</div>
358 </div>
359 </div>
360 <div class="two column row">
361 <div class="column">
362 <div class="ui segment">Content</div>
363 </div>
364 <div class="column">
365 <div class="ui segment">Content</div>
366 </div>
367 </div>
368</div>
369<h3 class="ui center aligned header">Consecutive Doubling Stackable Grid</h3>
370<div class="doubling stackable three column ui grid container">
371 <div class="column">
372 <div class="ui segment">Content</div>
373 </div>
374 <div class="column">
375 <div class="ui segment">Content</div>
376 </div>
377 <div class="column">
378 <div class="ui segment">Content</div>
379 </div>
380 <div class="column">
381 <div class="ui segment">Content</div>
382 </div>
383 <div class="column">
384 <div class="ui segment">Content</div>
385 </div>
386 <div class="column">
387 <div class="ui segment">Content</div>
388 </div>
389</div>
390<div class="doubling stackable three column ui grid container">
391 <div class="column">
392 <div class="ui segment">Content</div>
393 </div>
394 <div class="column">
395 <div class="ui segment">Content</div>
396 </div>
397 <div class="column">
398 <div class="ui segment">Content</div>
399 </div>
400 <div class="column">
401 <div class="ui segment">Content</div>
402 </div>
403 <div class="column">
404 <div class="ui segment">Content</div>
405 </div>
406 <div class="column">
407 <div class="ui segment">Content</div>
408 </div>
409</div>
410
411<h3 class="ui center aligned header">Grid Container</h3>
412<div class="ui three column grid container">
413 <div class="column">
414 <div class="ui segment">Content</div>
415 </div>
416 <div class="column">
417 <div class="ui segment">Content</div>
418 </div>
419 <div class="column">
420 <div class="ui segment">Content</div>
421 </div>
422 <div class="column">
423 <div class="ui segment">Content</div>
424 </div>
425 <div class="column">
426 <div class="ui segment">Content</div>
427 </div>
428 <div class="column">
429 <div class="ui segment">Content</div>
430 </div>
431</div>
432
433<h1 class="ui center aligned header">Responsive Elements</h1>
434
435
436<h3 class="ui center aligned header">Responsive Vertical Divider</h3>
437
438 <div class="ui stackable two column very relaxed grid container" style="position:relative;">
439 <div class="column">
440 <div class="ui segment">Content</div>
441 </div>
442 <div class="ui vertical divider">
443 Or
444 </div>
445 <div class="column">
446 <div class="ui segment">Content</div>
447 </div>
448 </div>
449
450
451<h3 class="ui center aligned header">Responsive Table</h3>
452
453<div class="ui container">
454 <table class="ui celled table">
455 <thead>
456 <th>Employee</th>
457 <th>Correct Guesses</th>
458 </thead>
459 <tbody>
460 <tr>
461 <td>
462 <h4 class="ui image header">
463 <img src="assets/images/wireframe/square-image.png" class="ui mini rounded image">
464 <div class="content">
465 Lena
466 <div class="sub header">Human Resources
467 </div>
468 </h4>
469 </td>
470 <td>
471 22
472 </td>
473 </tr>
474 <tr>
475 <td>
476 <h4 class="ui image header">
477 <img src="assets/images/wireframe/square-image.png" class="ui mini rounded image">
478 <div class="content">
479 Matthew
480 <div class="sub header">Fabric Design
481 </div>
482 </h4>
483 </td>
484 <td>
485 15
486 </td>
487 </tr>
488 <tr>
489 <td>
490 <h4 class="ui image header">
491 <img src="assets/images/wireframe/square-image.png" class="ui mini rounded image">
492 <div class="content">
493 Lindsay
494 <div class="sub header">Entertainment
495 </div>
496 </h4>
497 </td>
498 <td>
499 12
500 </td>
501 </tr>
502 <tr>
503 <td>
504 <h4 class="ui image header">
505 <img src="assets/images/wireframe/square-image.png" class="ui mini rounded image">
506 <div class="content">
507 Mark
508 <div class="sub header">Executive
509 </div>
510 </h4>
511 </td>
512 <td>
513 11
514 </td>
515 </tr>
516 </tbody>
517 </table>
518</div>
519
520<h3 class="ui center aligned header">Responsive Menu</h3>
521
522<div class="ui stackable container menu">
523 <div class="item">
524 <img src="assets/images/logo.png">
525 </div>
526 <a class="item">Features</a>
527 <a class="item">Testimonials</a>
528 <a class="item">Sign-in</a>
529</div>
530
531<h3 class="ui center aligned header">Responsive Item</h3>
532
533<div class="ui container">
534 <div class="ui relaxed divided items">
535 <div class="item">
536 <div class="ui small image">
537 <img src="assets/images/wireframe/image.png">
538 </div>
539 <div class="content">
540 <a class="header">Content Header</a>
541 <div class="meta">
542 <a>Date</a>
543 <a>Category</a>
544 </div>
545 <div class="description">
546 A description which may flow for several lines and give context to the content.
547 </div>
548 <div class="extra">
549 <img src="assets/images/wireframe/square-image.png" class="ui circular avatar image"> Username
550 </div>
551 </div>
552 </div>
553 <div class="item">
554 <div class="ui small image">
555 <img src="assets/images/wireframe/image.png">
556 </div>
557 <div class="content">
558 <a class="header">Content Header</a>
559 <div class="meta">
560 <a>Date</a>
561 <a>Category</a>
562 </div>
563 <div class="description">
564 A description which may flow for several lines and give context to the content.
565 </div>
566 <div class="extra">
567 <div class="ui right floated primary button">
568 Primary
569 <i class="right chevron icon"></i>
570 </div>
571 <div class="ui label">Limited</div>
572 </div>
573 </div>
574 </div>
575 <div class="item">
576 <div class="ui small image">
577 <img src="assets/images/wireframe/image.png">
578 </div>
579 <div class="content">
580 <a class="header">Content Header</a>
581 <div class="meta">
582 <a>Date</a>
583 <a>Category</a>
584 </div>
585 <div class="description">
586 A description which may flow for several lines and give context to the content.
587 </div>
588 <div class="extra">
589 <div class="ui right floated primary button">
590 Primary
591 <i class="right chevron icon"></i>
592 </div>
593 </div>
594 </div>
595 </div>
596 </div>
597</div>
598
599<h3 class="ui center aligned header">Responsive Steps</h3>
600
601<div class="ui last container">
602 <div class="ui three steps">
603 <div class="step">
604 <div class="content">
605 <div class="title">Shipping</div>
606 <div class="description">Choose your shipping options</div>
607 </div>
608 </div>
609 <div class="active step">
610 <div class="content">
611 <div class="title">Billing</div>
612 <div class="description">Enter billing information</div>
613 </div>
614 </div>
615 <div class="disabled step">
616 <div class="content">
617 <div class="title">Confirm Order</div>
618 <div class="description">Review your order details</div>
619 </div>
620 </div>
621 </div>
622</div>
623
624
625<!-- Content JS HERE !-->
626<style>
627 .last.container {
628 margin-bottom: 300px !important;
629 }
630 h1.ui.center.header {
631 margin-top: 3em;
632 }
633 h2.ui.center.header {
634 margin: 4em 0em 2em;
635 }
636 h3.ui.center.header {
637 margin-top: 2em;
638 padding: 2em 0em;
639 }
640</style>
641
642<script type="text/javascript">
643$(document).ready(function() {
644
645 var
646 $headers = $('body > h3'),
647 $header = $headers.first(),
648 ignoreScroll = false,
649 timer
650 ;
651
652 // Preserve example in viewport when resizing browser
653 $(window)
654 .on('resize', function() {
655 // ignore callbacks from scroll change
656 clearTimeout(timer);
657 $headers.visibility('disable callbacks');
658
659 // preserve position
660 $(document).scrollTop( $header.offset().top );
661
662 // allow callbacks in 500ms
663 timer = setTimeout(function() {
664 $headers.visibility('enable callbacks');
665 }, 500);
666 })
667 ;
668 $headers
669 .visibility({
670 // fire once each time passed
671 once: false,
672
673 // don't refresh position on resize
674 checkOnRefresh: true,
675
676 // lock to this element on resize
677 onTopPassed: function() {
678 $header = $(this);
679 },
680 onTopPassedReverse: function() {
681 $header = $(this);
682 }
683 })
684 ;
685});
686</script>
687
688</body>
689</html>