-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathlayout-fluid-percentages.html
241 lines (234 loc) · 10.9 KB
/
layout-fluid-percentages.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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html>
<head>
<title>
fluid baseline with responsive grid layout example
</title>
<meta charset="utf-8">
<!-- Optimized mobile viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet/less" type="text/css" href="less/layout-fluid-percentages.less">
</head>
<body class="show-baselines">
<header>
<section>
<h1>
Fluid Baseline Grid redux
</h1>
<h5>
This is a fluid column layout based upon percentages.
</h5>
<p>We'll assume a 12 column grid, as in most layout systems. At viewport widths below 36em, all columns will be full width.</p>
<p>You can also look at a <a href="index.html">golden ratio</a> and <a href="layout-fixed-fibonacci.html">Fibonacci sequence</a> layout examples.</p>
</section>
<div id="textsize"></div>
<div id="viewport"></div>
</header>
<main id="content">
<section id="primary">
<h3>
Primary content
</h3>
<p>I will span:</p>
<ul>
<li>8 columns of 12 starting at a viewport width of 36em</li>
<li>6 columns of 12 starting at a viewport width of 58.5em</li>
<li>4 columns of 12 starting at a viewport width of 94.5em</li>
<li>2 columns of 12 starting at a viewport width of 117em</li>
</ul>
<p>
Normally, both your asses would be dead as fucking fried chicken, but
you happen to pull this shit while I'm in a transitional period so I
don't wanna kill you, I wanna help you. But I can't give you this
case, it don't belong to me. Besides, I've already been through too
much shit this morning over this case to hand it over to your dumb
ass.
</p>
<p>
Look, just because I don't be givin' no man a foot massage don't make
it right for Marsellus to throw Antwone into a glass motherfuckin'
house, fuckin' up the way the nigger talks. Motherfucker do that shit
to me, he better paralyze my ass, 'cause I'll kill the motherfucker,
know what I'm sayin'?
</p>
<p>
Well, the way they make shows is, they make one show. That show's
called a pilot. Then they show that show to the people who make
shows, and on the strength of that one show they decide if they're
going to make more shows. Some pilots get picked and become
television programs. Some don't, become nothing. She starred in one
of the ones that became nothing.
</p>
<p>
Your bones don't break, mine do. That's clear. Your cells react to
bacteria and viruses differently than mine. You don't get sick, I do.
That's also clear. But for some reason, you and I react the exact
same way to water. We swallow it too fast, we choke. We get some in
our lungs, we drown. However unreal it may seem, we are connected,
you and I. We're on the same curve, just on opposite ends.
</p>
<p>
You think water moves fast? You should see ice. It moves like it has
a mind. Like it knows it killed the world once and got a taste for
murder. After the avalanche, it took us a week to climb out. Now, I
don't know exactly when we turned on each other, but I know that
seven of us survived the slide... and only five made it out. Now we
took an oath, that I'm breaking now. We said we'd say it was the snow
that killed the other two, but it wasn't. Nature is lethal but it
doesn't hold a candle to man.
</p>
<h3>
I'm serious as a heart attack
</h3>
<p>
Do you see any Teletubbies in here? Do you see a slender plastic tag
clipped to my shirt with my name printed on it? Do you see a little
Asian child with a blank expression on his face sitting outside on a
mechanical helicopter that shakes when you put quarters in it? That's
what you see at a toy store.
</p>
</section>
<section id="secondary">
<h3>
Secondary content
</h3>
<p>I will span:</p>
<ul>
<li>4 columns of 12 starting at a viewport width of 36em</li>
<li>3 columns of 12 starting at a viewport width of 58.5em</li>
<li>4 columns of 12 starting at a viewport width of 94.5em</li>
<li>2 columns of 12 starting at a viewport width of 117em</li>
</ul>
<p>
You think water moves fast? You should see ice. It moves like it
has a mind. Like it knows it killed the world once and got a taste
for murder. After the avalanche, it took us a week to climb out.
Now, I don't know exactly when we turned on each other, but I know
that seven of us survived the slide... and only five made it out.
Now we took an oath, that I'm breaking now. We said we'd say it was
the snow that killed the other two, but it wasn't. Nature is lethal
but it doesn't hold a candle to man.
</p>
<p>
Do you see any Teletubbies in here? Do you see a slender plastic
tag clipped to my shirt with my name printed on it? Do you see a
little Asian child with a blank expression on his face sitting
outside on a mechanical helicopter that shakes when you put
quarters in it? No? Well, that's what you see at a toy store. And
you must think you're in a toy store, because you're here shopping
for an infant named Jeb.
</p>
<p>
Look, just because I don't be givin' no man a foot massage don't make
it right for Marsellus to throw Antwone into a glass motherfuckin'
house, fuckin' up the way the nigger talks. Motherfucker do that shit
to me, he better paralyze my ass, 'cause I'll kill the motherfucker,
know what I'm sayin'?
</p>
<p>
Well, the way they make shows is, they make one show.
</p>
</section>
<section id="third">
<h3>
a 3rd column
</h3>
<p>I will span:</p>
<ul>
<li>4 columns of 12 starting at a viewport width of 36em</li>
<li>3 columns of 12 starting at a viewport width of 58.5em</li>
<li>2 columns of 12 starting at a viewport width of 94.5em</li>
</ul>
<p>
Normally, both your asses would be dead as fucking fried chicken,
but you happen to pull this shit while I'm in a transitional period
so I don't wanna kill you, I wanna help you. But I can't give you
this case, it don't belong to me. Besides, I've already been
through too much shit this morning over this case to hand it over
to your dumb ass.
</p>
</section>
<section id="fourth">
<h3>
a fourth column
</h3>
<p>I will span:</p>
<ul>
<li>4 columns of 12 starting at a viewport width of 36em</li>
<li>3 columns of 12 starting at a viewport width of 58.5em</li>
<li>2 columns of 12 starting at a viewport width of 94.5em</li>
</ul>
<p>
Well, the way they make shows is, they make one show. That show's
called a pilot. Then they show that show to the people who make
shows, and on the strength of that one show they decide if they're
going to make more shows. Some pilots get picked and become
television programs. Some don't, become nothing. She starred in one
of the ones that became nothing.
</p>
</section>
<section id="fifth">
<h3>
a fifth column
</h3>
<p>I will span:</p>
<ul>
<li>4 columns of 12 starting at a viewport width of 36em</li>
<li>3 columns of 12 starting at a viewport width of 58.5em</li>
<li>2 columns of 12 starting at a viewport width of 94.5em</li>
</ul>
<p>
You think water moves fast? You should see ice. It moves like it
has a mind. Like it knows it killed the world once and got a taste
for murder. After the avalanche, it took us a week to climb out.
Now, I don't know exactly when we turned on each other, but I know
that seven of us survived the slide... and only five made it out.
Now we took an oath, that I'm breaking now. We said we'd say it was
the snow that killed the other two, but it wasn't. Nature is lethal
but it doesn't hold a candle to man.
</p>
</section>
<section id="sixth">
<h3>
a sixth column
</h3>
<p>I will span:</p>
<ul>
<li>4 columns of 12 starting at a viewport width of 36em</li>
<li>3 columns of 12 starting at a viewport width of 58.5em</li>
<li>2 columns of 12 starting at a viewport width of 94.5em</li>
</ul>
<p>
You think water moves fast? You should see ice. It moves like it
has a mind. Like it knows it killed the world once and got a taste
for murder. After the avalanche, it took us a week to climb out.
Now, I don't know exactly when we turned on each other, but I know
that seven of us survived the slide... and only five made it out.
Now we took an oath, that I'm breaking now. We said we'd say it was
the snow that killed the other two, but it wasn't. Nature is lethal
but it doesn't hold a candle to man.
</p>
</section>
</main>
<footer>
<small>2013 - <span class="license">Adapted by <a href=
"http://peterhebert.com">Peter Hebert</a> from <a href=
"http://fluidbaselinegrid.com/">Fluid Baseline Grid</a> by <a href=
"http://twitter.com/thedayhascome">Josh Hopkins</a> <span class=
"amp">&</span> <a href="http://40horse.com">40 Horse</a></span>.
Released under <a href="http://unlicense.org">Unlicense</a>. Text
provided by <a href="http://slipsum.com/">Samuel L. Ipsum</a>.</small>
</footer>
<!-- JavaScript at the bottom for fast page loading -->
<!-- LESS CSS compiler -->
<script type="text/javascript" src="js/less-1.5.0.min.js"></script>
<!-- Minimized jQuery from Google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!-- HTML5 IE Enabling Script -->
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!-- CSS3 Media Queries -->
<script src="js/respond.min.js"></script>
<!-- display browser viewport and base font size in px / use to help determine your breakpoints -->
<script src="js/report-viewport.js"></script>
</body>
</html>