Skip to content

Commit 2930d9b

Browse files
toddparkertoddparker
committed
Added a RWD basics and stacked grid demo page
The RWD basics probably needs a new home eventually
1 parent da1ada7 commit 2930d9b

File tree

3 files changed

+252
-0
lines changed

3 files changed

+252
-0
lines changed

‎docs/demos/grids/grid-stack.html‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Listviews - jQuery Mobile Demos</title>
7+
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
8+
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
9+
<script src="../../../js/jquery.js"></script>
10+
<script src="../_assets/js/jqm-demos.js"></script>
11+
<script src="../../../js/"></script>
12+
</head>
13+
<body>
14+
<div data-role="page">
15+
16+
<div data-role="header" data-theme="f">
17+
<h1>Grids</h1>
18+
<a href="../" data-icon="home" data-iconpos="notext" data-ajax="false">Home</a>
19+
</div><!-- /header -->
20+
21+
<div data-role="content">
22+
23+
<div class="content-primary">
24+
25+
<h2>Responsive grids</h2>
26+
27+
<style>
28+
29+
.rwd-stack div {
30+
text-align:center;
31+
min-height:40px;
32+
border-color:#eee
33+
}
34+
35+
/* Stack all blocks to start */
36+
.rwd-stack .ui-block-a,
37+
.rwd-stack .ui-block-b,
38+
.rwd-stack .ui-block-c,
39+
.rwd-stack .ui-block-d,
40+
.rwd-stack .ui-block-e {
41+
width: 100%;
42+
float:none;
43+
}
44+
45+
/* Float and set widths above 576px (36em * 16px) */
46+
@media all and (min-width: 36em){
47+
/* Float all blocks */
48+
.rwd-stack .ui-block-a,
49+
.rwd-stack .ui-block-b,
50+
.rwd-stack .ui-block-c,
51+
.rwd-stack .ui-block-d,
52+
.rwd-stack .ui-block-e {
53+
float:left;
54+
}
55+
/* Set widths for 2-up grids */
56+
.rwd-stack.ui-grid-a .ui-block-a,
57+
.rwd-stack.ui-grid-a .ui-block-b {
58+
width: 49.95%;
59+
}
60+
/* Set widths for 3-up grids */
61+
.rwd-stack.ui-grid-b .ui-block-a,
62+
.rwd-stack.ui-grid-b .ui-block-b,
63+
.rwd-stack.ui-grid-b .ui-block-c {
64+
width: 33.25%;
65+
}
66+
/* Set widths for 4-up grids */
67+
.rwd-stack.ui-grid-c .ui-block-a,
68+
.rwd-stack.ui-grid-c .ui-block-b,
69+
.rwd-stack.ui-grid-c .ui-block-c,
70+
.rwd-stack.ui-grid-c .ui-block-d {
71+
width: 24.925%;
72+
}
73+
/* Set widths for 4-up grids */
74+
.rwd-stack.ui-grid-d .ui-block-a,
75+
.rwd-stack.ui-grid-d .ui-block-b,
76+
.rwd-stack.ui-grid-d .ui-block-c,
77+
.rwd-stack.ui-grid-d .ui-block-d,
78+
.rwd-stack.ui-grid-d .ui-block-e {
79+
width: 19.925%;
80+
}
81+
}
82+
</style>
83+
84+
<p>It's straightforward to take the standard grids and make them responsive. In this example, all the grid blocks are stacked at narrow widths like a smartphone. Above 36em (576 pixels) wide, the side-by-side grids are created by floating the blocks and setting percentage widths.</p>
85+
86+
87+
88+
<h2>Responsive grid demo</h2>
89+
90+
<p>Each of these grids will display as a stacked set of blocks at narrow widths.</p>
91+
92+
<h3>Grid A (50/50)</h3>
93+
94+
<div class="ui-grid-a rwd-stack">
95+
<div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
96+
<div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
97+
</div><!-- /grid-a -->
98+
99+
100+
<h3>Grid B (33/33/33)</h3>
101+
102+
<div class="ui-grid-b rwd-stack">
103+
<div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
104+
<div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
105+
<div class="ui-block-c"><div class="ui-body ui-body-d">Block C</div></div>
106+
</div><!-- /grid-b -->
107+
108+
109+
<h3>Grid C (25/25/25/25)</h3>
110+
111+
<div class="ui-grid-c rwd-stack">
112+
<div class="ui-block-a"><div class="ui-body ui-body-d">A</div></div>
113+
<div class="ui-block-b"><div class="ui-body ui-body-d">B</div></div>
114+
<div class="ui-block-c"><div class="ui-body ui-body-d">C</div></div>
115+
<div class="ui-block-d"><div class="ui-body ui-body-d">D</div></div>
116+
</div><!-- /grid-c -->
117+
118+
119+
<h3>Grid D (20/20/20/20/20)</h3>
120+
121+
<div class="ui-grid-d rwd-stack">
122+
<div class="ui-block-a"><div class="ui-body ui-body-d">A</div></div>
123+
<div class="ui-block-b"><div class="ui-body ui-body-d">B</div></div>
124+
<div class="ui-block-c"><div class="ui-body ui-body-d">C</div></div>
125+
<div class="ui-block-d"><div class="ui-body ui-body-d">D</div></div>
126+
<div class="ui-block-e"><div class="ui-body ui-body-d">E</div></div>
127+
</div><!-- /grid-d -->
128+
129+
130+
131+
<h2>Example styles</h2>
132+
<p>Here are the styles you need to stack all the grids. These all work by adding the <code>rwd-stack</code> to each the grid container.</p>
133+
134+
<pre><code>
135+
/* Stack all blocks to start */
136+
.rwd-stack .ui-block-a,
137+
.rwd-stack .ui-block-b,
138+
.rwd-stack .ui-block-c,
139+
.rwd-stack .ui-block-d,
140+
.rwd-stack .ui-block-e {
141+
width: 100%;
142+
float:none;
143+
}
144+
145+
/* Float and set widths above 576px (36em * 16px) */
146+
@media all and (min-width: 36em){
147+
/* Float all blocks */
148+
.rwd-stack .ui-block-a,
149+
.rwd-stack .ui-block-b,
150+
.rwd-stack .ui-block-c,
151+
.rwd-stack .ui-block-d,
152+
.rwd-stack .ui-block-e {
153+
float:left;
154+
}
155+
/* Set widths for 2-up grids */
156+
.rwd-stack.ui-grid-a .ui-block-a,
157+
.rwd-stack.ui-grid-a .ui-block-b {
158+
width: 49.95%;
159+
}
160+
/* Set widths for 3-up grids */
161+
.rwd-stack.ui-grid-b .ui-block-a,
162+
.rwd-stack.ui-grid-b .ui-block-b,
163+
.rwd-stack.ui-grid-b .ui-block-c {
164+
width: 33.25%;
165+
}
166+
/* Set widths for 4-up grids */
167+
.rwd-stack.ui-grid-c .ui-block-a,
168+
.rwd-stack.ui-grid-c .ui-block-b,
169+
.rwd-stack.ui-grid-c .ui-block-c,
170+
.rwd-stack.ui-grid-c .ui-block-d {
171+
width: 24.925%;
172+
}
173+
/* Set widths for 5-up grids */
174+
.rwd-stack.ui-grid-d .ui-block-a,
175+
.rwd-stack.ui-grid-d .ui-block-b,
176+
.rwd-stack.ui-grid-d .ui-block-c,
177+
.rwd-stack.ui-grid-d .ui-block-d,
178+
.rwd-stack.ui-grid-d .ui-block-e {
179+
width: 19.925%;
180+
}
181+
}
182+
</code></pre>
183+
184+
185+
</div><!--/content-primary -->
186+
187+
</div><!-- /content -->
188+
189+
<div class="jqm-footer">
190+
<p class="jqm-version"></p>
191+
<p>&copy; 2012 jQuery Foundation and other contributors</p>
192+
</div><!-- /jqm-footer -->
193+
194+
</div><!-- /page -->
195+
</body>
196+
</html>

‎docs/demos/grids/rwd-basics.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Listviews - jQuery Mobile Demos</title>
7+
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
8+
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
9+
<script src="../../../js/jquery.js"></script>
10+
<script src="../_assets/js/jqm-demos.js"></script>
11+
<script src="../../../js/"></script>
12+
</head>
13+
<body>
14+
<div data-role="page">
15+
16+
<div data-role="header" data-theme="f">
17+
<h1>Grids</h1>
18+
<a href="../" data-icon="home" data-iconpos="notext" data-ajax="false">Home</a>
19+
</div><!-- /header -->
20+
21+
<div data-role="content">
22+
23+
<div class="content-primary">
24+
25+
<h2>Responsive Web Design (RWD) Basics</h2>
26+
<p>Creating responsive layouts is easy, but there are a few key things to keep in mind.</p>
27+
<ul>
28+
<li><strong>Create a style override stylesheet and include it after the jQuery Mobile framework stylesheet.</strong> This will hold all your custom styles, tweaks to the default widgets and media queries.</li>
29+
<li><strong>Start by writing the styles you want to see at the narrowest screen width (i.e. "mobile first").</strong> These should be outside a media query. For example, we'd start with each of our grid containers set to 100% width and not floated so they start off stacked at smartphone widths.</li>
30+
<li><strong>Choose the breakpoints based on your content, not a specific device.</strong> Since there are devices of every imaginable width, it's smarter to choose breakpoints based on how your <em>content</em> looks in your design system. As you re-size the window to wider widths, identify where where your content hits a point where it could adapt to take advantage of a wider width.</li>
31+
<li><strong>Write media queries using ems and min-widths</strong> Write a media query block that uses ems instead of pixels to ensure the layout will adapt to font size changes. To calculate the width, simply divide the target breakpoint (320px) with by 16px (the default font size) to get the em-based width (20em).
32+
<pre><code>@media all and (min-width: 36em){
33+
/* Styles that apply above 576px go here */
34+
}
35+
</code></pre>
36+
</li>
37+
<li><strong>Build additional breakpoints on top of each other at increasingly wider widths</strong> This means that the next breakpoint can add additional styles that build on top of the basic styles and those in the first breakpoint.</li>
38+
</ul>
39+
40+
41+
42+
</div><!--/content-primary -->
43+
44+
</div><!-- /content -->
45+
46+
<div class="jqm-footer">
47+
<p class="jqm-version"></p>
48+
<p>&copy; 2012 jQuery Foundation and other contributors</p>
49+
</div><!-- /jqm-footer -->
50+
51+
</div><!-- /page -->
52+
</body>
53+
</html>

‎docs/demos/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@ <h2>Demos</h2>
4949
<li><a href="listviews/listview-filter-autodividers.html" data-ajax="false">Listview Filter &amp; Autodividers</a></li>
5050
<li><a href="listviews/listview-forms.html" data-ajax="false">Listview Forms</a></li>
5151
<li><a href="listviews/collapsible-listview.html" data-ajax="false">Collapsible listview</a></li>
52+
<li data-role="list-divider">Grids</li>
53+
<li><a href="grids/rwd-basics.html" data-ajax="false">Responsive (RWD) basics</a></li>
54+
<li><a href="grids/grid-stack.html" data-ajax="false">Responsive grids, stack at mobile</a></li>
5255
</ul>
5356

5457
</div><!--/content-primary -->

0 commit comments

Comments
 (0)