-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
121 lines (110 loc) · 5.36 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>silc grid module</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./dist/index.css">
<style>
body {
font-family: sans-serif;
}
.panel {
background: #f1f1f1;
padding: 1em;
}
.panel p {
margin: 0;
}
</style>
</head>
<body>
<h1>silc grid demo</h1>
<h2>Basic grid</h2>
<p>Columns are 6 wide at small breakpoint, and collapse to 3 wide at medium breakpoint.</p>
<div class="silc-grid">
<div class="silc-grid__col silc-grid__col--6-small silc-grid__col--3-medium">
<div class="panel">4</div>
</div>
<div class="silc-grid__col silc-grid__col--6-small silc-grid__col--3-medium">
<div class="panel">4</div>
</div>
<div class="silc-grid__col silc-grid__col--6-small silc-grid__col--3-medium">
<div class="panel">4</div>
</div>
<div class="silc-grid__col silc-grid__col--6-small silc-grid__col--3-medium">
<div class="panel">4</div>
</div>
</div>
<h2>Grid with no gutters</h2>
<div class="silc-grid silc-grid--no-gutters">
<div class="silc-grid__col silc-grid__col--6-small silc-grid__col--3-medium">
<div class="panel">4</div>
</div>
<div class="silc-grid__col silc-grid__col--6-small silc-grid__col--3-medium">
<div class="panel">4</div>
</div>
<div class="silc-grid__col silc-grid__col--6-small silc-grid__col--3-medium">
<div class="panel">4</div>
</div>
<div class="silc-grid__col silc-grid__col--6-small silc-grid__col--3-medium">
<div class="panel">4</div>
</div>
</div>
<h2>Grid with justification</h2>
<p>Grid justifies right at small breakpoint, left at medium breakpoint and center at large breakpoint.</p>
<div class="silc-grid silc-grid--justify-right-small silc-grid--justify-left-medium silc-grid--justify-center-large">
<div class="silc-grid__col silc-grid__col--6-small">
<div class="panel">
<p>Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
<div class="silc-grid__col silc-grid__col--4-small">
<div class="panel">
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.</p>
</div>
</div>
</div>
<h2>Grid with alignment</h2>
<p>Grid aligns top at small breakpoint, center at medium breakpoint and bottom at large breakpoint.</p>
<div class="silc-grid silc-grid--align-top-small silc-grid--align-center-medium silc-grid--align-bottom-large">
<div class="silc-grid__col silc-grid__col--6-small">
<div class="panel">
<p>Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
<div class="silc-grid__col silc-grid__col--6-small">
<div class="panel">
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.</p>
</div>
</div>
</div>
<h2>Grid with auto width and space between</h2>
<div class="silc-grid silc-grid--justify-between-medium">
<div class="silc-grid__col silc-grid__col--6-small silc-grid__col--auto-medium">
<div class="panel">This is a larger column</div>
</div>
<div class="silc-grid__col silc-grid__col--6-small silc-grid__col--auto-medium">
<div class="panel">right</div>
</div>
</div>
<h2>Nested Grid</h2>
<div class="silc-grid silc-grid--justify-between-medium silc-grid--collapse">
<div class="silc-grid__col silc-grid__col--6">
<div class="silc-grid">
<div class="silc-grid__col silc-grid__col--6">
<div class="panel">Nested 6</div>
</div>
<div class="silc-grid__col silc-grid__col--6">
<div class="panel">Nested 6</div>
</div>
</div>
</div>
<div class="silc-grid__col silc-grid__col--6">
<div class="panel">6</div>
</div>
</div>
</body>
</html>