-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
73 lines (73 loc) · 3.38 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
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</head>
<body>
<main class="page">
<header>
<div class="grid no-cols">
<h1>Responsive Grids</h1>
<p class="intro">I know, I know another Grid system, but bear with us, this one is pretty cool and we have been using it on all our large scale projects at Beyond for the last few years and thought it was time to share.</p>
</div>
</header>
<section>
<div class="grid no-cols">
<h2>12 Column grid example</h2>
<p>A basic 12 column example</p>
</div>
<div class="grid">
<div class="col-1-1">1 of 1</div>
<div class="col-6-12">1 of 2</div>
<div class="col-6-12">1 of 2</div>
<div class="col-4-12">1 of 3</div>
<div class="col-4-12">1 of 3</div>
<div class="col-4-12">1 of 3</div>
<div class="col-3-12">1 of 4</div>
<div class="col-3-12">1 of 4</div>
<div class="col-3-12">1 of 4</div>
<div class="col-3-12">1 of 4</div>
<div class="col-8-12">8 of 12</div>
<div class="col-4-12">4 of 12</div>
<div class="col-9-12">9 of 12</div>
<div class="col-3-12">3 of 12</div>
</div>
</section>
<section>
<div class="grid-custom no-cols">
<h2>Custom grid example</h2>
<p>A custom grid allows you handcraft exactly how each column will behave across the different breakpoints.</p>
</div>
<div class="grid-custom">
<div class="grid-custom__col">Custom 1</div>
<div class="grid-custom__col">Custom 2</div>
<div class="grid-custom__col">Custom 3</div>
<div class="grid-custom__col">Custom 4</div>
<div class="grid-custom__col">Custom 5</div>
<div class="grid-custom__col">Custom 6</div>
</div>
</section>
<section>
<div class="grid no-cols">
<h2>Broken 12 Column grid example</h2>
<p>The alternate class names do not work properly</p>
</div>
<div class="grid">
<div class="col-1-1">1 of 1</div>
<div class="col-1-2">1 of 2</div>
<div class="col-1-2">1 of 2</div>
<div class="col-1-3">1 of 3</div>
<div class="col-1-3">1 of 3</div>
<div class="col-1-3">1 of 3</div>
<div class="col-1-4">1 of 4</div>
<div class="col-1-4">1 of 4</div>
<div class="col-1-4">1 of 4</div>
<div class="col-1-4">1 of 4</div>
<div class="col-8-12">8 of 12</div>
<div class="col-4-12">4 of 12</div>
<div class="col-9-12">9 of 12</div>
<div class="col-3-12">3 of 12</div>
</div>
</section>
</body>
</html>