-
Notifications
You must be signed in to change notification settings - Fork 0
/
gridtest.cfm
235 lines (222 loc) · 7.3 KB
/
gridtest.cfm
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
<!doctype html>
<cfparam name="cols" type="integer" default=12>
<cfif isDefined("form.cols")>
<cfset cols = form.cols>
</cfif>
<cfswitch expression="cols">
<cfcase value="12">
<cfset styles = "_css/flexible-grid-12-columns.css">
<cfset ieStyles = "_css/ie8-flex-12.css">
</cfcase>
<cfcase value="16">
<cfset styles = "_css/flexible-grid.css">
<cfset ieStyles = "_css/ie8-flex-16.css">
</cfcase>
<cfdefaultcase>
<cfset styles = "_css/flexible-grid-12-columns.css">
<cfset ieStyles = "_css/ie8-flex-12.css">
</cfdefaultcase>
</cfswitch>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title>Testing the Responsive Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex, nofollow" />
<style>
div.columns { background-color: #ddd; }
body::before{
font-weight: bold;
display: block;
text-align: center;
background: rgba(255,255,0, 0.9); /* Semi-transparent yellow */
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
@media only screen and (max-width: 240px) {
body::before{
content: "Dumb Phone media query (< 240) fired";
}
}
@media only screen and (min-width: 241px) and (max-width: 360px) {
body::before{
content: "Smartphone media query (241 < 360) fired";
}
}
@media only screen and (min-width: 361px) and (max-width: 480px) {
body::before{
content: "Smartphone (Landscape) media query (361 < 480) fired";
}
}
@media screen and (min-width: 481px) and (max-width: 640px) {
body::before{
content: "Small Tablet media query (481 < 640) fired";
}
}
@media only screen and (min-width: 641px) and (max-width: 768px) {
body::before{
content: "Tablet media query (641 < 768) fired";
}
}
@media only screen and (min-width: 769px) {
body::before{
content: "Full-Size media query (> 768) fired";
}
}
</style>
<link rel="stylesheet" href="<cfoutput>#styles#</cfoutput>" type="text/css" media="all and (min-width: 14em)" />
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="<cfoutput>#ieStyles#</cfoutput>" media="all" />
<![endif]-->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div id="header" class="banner" role="banner">
<h1>Responsive Grid</h1>
<p>This page serves to demonstrate a fluid, responsive grid system in 12- and 16-column flavors. Using media queries, the page reflows and serves screens from 240px wide to full-size desktop resolutions. IE 7 and 8 are served a separate stylesheet that preserves the fluid layout; positioning and media query support is helped along with use of IE9.js and css3-mediaqueries.js.</p>
<p><strong>TODO:</strong> Test on Windows Phone mobile browser.</p>
</div>
<div class="row">
<div class="one columns">1 Column</div>
<div class="one columns">1 Column</div>
<div class="one columns">1 Column</div>
<div class="one columns">1 Column</div>
<div class="one columns">1 Column</div>
<div class="one columns">1 Column</div>
<div class="one columns">1 Column</div>
<div class="one columns">1 Column</div>
<div class="one columns">1 Column</div>
<div class="one columns">1 Column</div>
<div class="one columns">1 Column</div>
<cfif cols EQ 16>
<div class="one columns">1 Column</div>
<div class="one columns">1 Column</div>
<div class="one columns">1 Column</div>
<div class="one columns">1 Column</div>
</cfif>
<div class="one columns last">1 Column</div>
</div>
<div class="row">
<div class="two columns">2 Columns</div>
<div class="two columns">2 Columns</div>
<div class="two columns">2 Columns</div>
<div class="two columns">2 Columns</div>
<div class="two columns">2 Columns</div>
<cfif cols EQ 16>
<div class="two columns">2 Columns</div>
<div class="two columns">2 Columns</div>
</cfif>
<div class="two columns last">2 Columns</div>
</div>
<div class="row">
<div class="three columns">3 Columns</div>
<div class="three columns">3 Columns</div>
<div class="three columns">3 Columns</div>
<cfif cols EQ 16>
<div class="three columns">3 Columns</div>
<div class="one columns">1 Columns</div>
</cfif>
<div class="three columns last">3 Columns</div>
</div>
<div class="row">
<div class="four columns">4 Columns</div>
<div class="four columns">4 Columns</div>
<cfif cols EQ 16>
<div class="four columns">4 Columns</div>
</cfif>
<div class="four columns last">4 Columns</div>
</div>
<div class="row">
<div class="five columns">5 Columns</div>
<div class="five columns">5 Columns</div>
<cfif cols EQ 16>
<div class="three columns">3 Columns</div>
<div class="one columns">1 Columns</div>
</cfif>
<div class="two columns last">2 Columns</div>
</div>
<div class="row">
<div class="six columns">6 Columns</div>
<cfif cols EQ 16>
<div class="four columns">4 Columns</div>
</cfif>
<div class="six columns last">6 Columns</div>
</div>
<div class="row">
<div class="seven columns">7 Columns</div>
<cfif cols EQ 16>
<div class="four columns">4 Columns</div>
</cfif>
<div class="five columns last">5 Columns</div>
</div>
<div class="row">
<div class="eight columns">8 Columns</div>
<cfif cols EQ 16>
<div class="four columns">4 Columns</div>
</cfif>
<div class="four columns last">4 Columns</div>
</div>
<div class="row">
<div class="nine columns">9 Columns</div>
<cfif cols EQ 16>
<div class="two columns">2 Columns</div>
<div class="two columns">2 Columns</div>
</cfif>
<div class="three columns last">3 Columns</div>
</div>
<div class="row">
<div class="ten columns">10 Columns</div>
<cfif cols EQ 16>
<div class="two columns">2 Columns</div>
<div class="two columns">2 Columns</div>
</cfif>
<div class="two columns last">2 Columns</div>
</div>
<div class="row">
<div class="eleven columns">11 Columns</div>
<cfif cols EQ 16>
<div class="four columns">4 Columns</div>
</cfif>
<div class="one columns last">1 Columns</div>
</div>
<div class="row">
<div class="twelve columns">12 Columns</div>
<cfif cols EQ 16>
<div class="four columns last">4 Columns</div>
</cfif>
</div>
<cfif cols EQ 16>
<div class="row">
<div class="thirteen columns">13 Columns</div>
<div class="three columns last">3 Columns</div>
</div>
<div class="row">
<div class="fourteen columns">14 Columns</div>
<div class="two columns last">2 Columns</div>
</div>
<div class="row">
<div class="fifteen columns">15 Columns</div>
<div class="one columns last">1 Columns</div>
</div>
<div class="row">
<div class="sixteen columns">16 Columns</div>
</div>
</cfif>
<div style="clear: both;">
<form name="switchCols" action="" method="post">
<fieldset>
<legend>Select Number of Columns</legend>
<input type="radio" name="cols" id="cols" value="12" /> 12 Column Grid<br />
<input type="radio" name="cols" id="cols" value="16" /> 16 Column Grid<br /><br />
<input type="submit" name="submit" value="Go!" /> <input type="reset" name="reset" value="Clear Form" />
</fieldset>
</form>
</div>
</body>
</html>