1 | <!DOCTYPE html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | <meta charset="UTF-8">
|
5 | <title>Demo: Grid Breakpoints</title>
|
6 |
|
7 | <link rel="stylesheet" href="../build/marble.css">
|
8 | <style>
|
9 | h1 {
|
10 | text-align: center;
|
11 | }
|
12 |
|
13 | .container-xs { max-width: 344px; }
|
14 | .container-sm { max-width: 584px; }
|
15 | .container-md { max-width: 984px; }
|
16 | .container-lg { max-width: 1224px; }
|
17 |
|
18 | [class^="col-"] {
|
19 | background-color: rgba(31, 122, 255, .2);
|
20 | color: white;
|
21 | height: 50px;
|
22 | text-align: center;
|
23 | display: flex;
|
24 | align-items: center;
|
25 | justify-content: center;
|
26 | font-size: 18px;
|
27 | margin-bottom: 24px;
|
28 | }
|
29 |
|
30 | [class^="col-"]:after {
|
31 | background-color: rgba(31, 122, 255, .5);
|
32 | content: '';
|
33 | display: block;
|
34 | position: absolute;
|
35 | top: 0;
|
36 | left: 12px;
|
37 | right: 12px;
|
38 | bottom: 0;
|
39 | z-index: -1;
|
40 | }
|
41 | </style>
|
42 | </head>
|
43 | <body>
|
44 | <h1>Extra Small (360px)</h1>
|
45 | <div class="container-hybrid container-xs">
|
46 | <div class="row">
|
47 | <div class="col-xs-8">xs</div>
|
48 | <div class="col-xs-8">xs</div>
|
49 | </div>
|
50 | </div>
|
51 |
|
52 | <h1>Small (600px)</h1>
|
53 | <div class="container-hybrid container-sm">
|
54 | <div class="row">
|
55 | <div class="col-xs-8 col-sm-4">sm</div>
|
56 | <div class="col-xs-8 col-sm-4">sm</div>
|
57 | <div class="col-xs-8 col-sm-4">sm</div>
|
58 | <div class="col-xs-8 col-sm-4">sm</div>
|
59 | </div>
|
60 | </div>
|
61 |
|
62 | <h1>Medium (960px)</h1>
|
63 | <div class="container-hybrid container-md">
|
64 | <div class="row">
|
65 | <div class="col-xs-8 col-sm-4 col-md-2">md</div>
|
66 | <div class="col-xs-8 col-sm-4 col-md-2">md</div>
|
67 | <div class="col-xs-8 col-sm-4 col-md-2">md</div>
|
68 | <div class="col-xs-8 col-sm-4 col-md-2">md</div>
|
69 | <div class="col-xs-8 col-sm-4 col-md-2">md</div>
|
70 | <div class="col-xs-8 col-sm-4 col-md-2">md</div>
|
71 | <div class="col-xs-8 col-sm-4 col-md-2">md</div>
|
72 | <div class="col-xs-8 col-sm-4 col-md-2">md</div>
|
73 | </div>
|
74 | </div>
|
75 |
|
76 | <h1>Large (1280px)</h1>
|
77 | <div class="container-hybrid container-lg">
|
78 | <div class="row">
|
79 | <div class="col-xs-8 col-sm-4 col-md-2 col-lg-1">lg</div>
|
80 | <div class="col-xs-8 col-sm-4 col-md-2 col-lg-1">lg</div>
|
81 | <div class="col-xs-8 col-sm-4 col-md-2 col-lg-1">lg</div>
|
82 | <div class="col-xs-8 col-sm-4 col-md-2 col-lg-1">lg</div>
|
83 | <div class="col-xs-8 col-sm-4 col-md-2 col-lg-1">lg</div>
|
84 | <div class="col-xs-8 col-sm-4 col-md-2 col-lg-1">lg</div>
|
85 | <div class="col-xs-8 col-sm-4 col-md-2 col-lg-1">lg</div>
|
86 | <div class="col-xs-8 col-sm-4 col-md-2 col-lg-1">lg</div>
|
87 | <div class="col-xs-8 col-sm-4 col-md-2 col-lg-1">lg</div>
|
88 | <div class="col-xs-8 col-sm-4 col-md-2 col-lg-1">lg</div>
|
89 | <div class="col-xs-8 col-sm-4 col-md-2 col-lg-1">lg</div>
|
90 | <div class="col-xs-8 col-sm-4 col-md-2 col-lg-1">lg</div>
|
91 | <div class="col-xs-8 col-sm-4 col-md-2 col-lg-1">lg</div>
|
92 | <div class="col-xs-8 col-sm-4 col-md-2 col-lg-1">lg</div>
|
93 | <div class="col-xs-8 col-sm-4 col-md-2 col-lg-1">lg</div>
|
94 | <div class="col-xs-8 col-sm-4 col-md-2 col-lg-1">lg</div>
|
95 | </div>
|
96 | </div>
|
97 | </body>
|
98 | </html>
|