Skip to content

Commit 3e4bc84

Browse files
jaspermdegrootjaspermdegroot
committed
Demos: added collapsing border styling to custom responsive grid example
1 parent fef5da9 commit 3e4bc84

File tree

1 file changed

+133
-110
lines changed

1 file changed

+133
-110
lines changed

‎docs/widgets/grids/grid-custom.php

Lines changed: 133 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -14,76 +14,96 @@
1414
<!-- We're using a style block to make it easy to view the custom styles -->
1515
<!-- In production, these should be added to a custom.css file loaded in the head -->
1616
<style>
17-
/* Basic styles */
18-
.rwd-example div {
19-
text-align: left;
20-
border-color: #ddd;
21-
}
22-
.rwd-example p {
23-
color: #777;
24-
line-height: 140%
25-
}
26-
27-
/* Stack all blocks to start */
28-
.rwd-example .ui-block-a,
29-
.rwd-example .ui-block-b,
30-
.rwd-example .ui-block-c {
31-
width: 100%;
32-
float: none;
33-
}
34-
35-
/* 1st breakpoint - Float B and C, leave A full width on top */
36-
@media all and (min-width: 42em){
37-
.rwd-example div {
38-
min-height:14em;
39-
}
40-
.rwd-example .ui-block-b,
41-
.rwd-example .ui-block-c {
42-
float:left;
43-
width: 49.95%;
17+
/* Basic styles */
18+
.rwd-example .ui-body {
19+
text-align: left;
20+
border-color: #ddd;
4421
}
45-
.rwd-example .ui-block-b p,
46-
.rwd-example .ui-block-c p {
47-
font-size:.8em;
48-
49-
}
50-
}
51-
52-
/* 2nd breakpoint - Float all, 50/25/25 */
53-
@media all and (min-width: 55em){
54-
55-
.rwd-example div {
56-
min-height:17em;
57-
}
58-
.rwd-example .ui-block-a,
59-
.rwd-example .ui-block-c {
60-
float:left;
61-
width: 49.95%;
22+
.rwd-example p {
23+
color: #777;
24+
line-height: 140%
6225
}
26+
27+
/* Stack all blocks to start */
28+
.rwd-example .ui-block-a,
6329
.rwd-example .ui-block-b,
6430
.rwd-example .ui-block-c {
65-
float:left;
66-
width: 24.925%;
31+
width: 100%;
32+
float: none;
6733
}
68-
}
69-
70-
/* 3rd breakpoint - Bump up font size at very wide screens */
71-
@media all and (min-width: 75em){
72-
73-
.rwd-example {
74-
font-size:125%;
75-
}
76-
.rwd-example .ui-block-a,
77-
.rwd-example .ui-block-c {
78-
float:left;
79-
width: 49.95%;
34+
35+
/* Collapsing borders */
36+
.rwd-example > div + div .ui-body {
37+
border-top-width: 0;
8038
}
81-
.rwd-example .ui-block-b,
82-
.rwd-example .ui-block-c {
83-
float:left;
84-
width: 24.925%;
39+
40+
/* 1st breakpoint - Float B and C, leave A full width on top */
41+
@media all and (min-width: 42em) {
42+
.rwd-example {
43+
overflow: hidden; /* Use this or a "clearfix" to give the container height */
44+
}
45+
.rwd-example .ui-body {
46+
min-height: 14em;
47+
}
48+
.rwd-example .ui-block-b,
49+
.rwd-example .ui-block-c {
50+
float: left;
51+
width: 49.95%;
52+
}
53+
.rwd-example .ui-block-b p,
54+
.rwd-example .ui-block-c p {
55+
font-size: .8em;
56+
}
57+
.rwd-example > div + div .ui-body {
58+
border-top-width: 1px;
59+
}
60+
.rwd-example > div:first-child .ui-body {
61+
border-bottom-width: 0;
62+
}
63+
.rwd-example > div:last-child .ui-body {
64+
border-left-width: 0;
65+
}
66+
}
67+
68+
/* 2nd breakpoint - Float all, 50/25/25 */
69+
@media all and (min-width: 55em) {
70+
.rwd-example .ui-body {
71+
min-height: 18em;
72+
}
73+
.rwd-example .ui-block-a,
74+
.rwd-example .ui-block-c {
75+
float: left;
76+
width: 49.95%;
77+
}
78+
.rwd-example .ui-block-b,
79+
.rwd-example .ui-block-c {
80+
float: left;
81+
width: 24.925%;
82+
}
83+
.rwd-example > div:first-child .ui-body {
84+
border-bottom-width: 1px;
85+
}
86+
.rwd-example > div + div .ui-body {
87+
border-left-width: 0;
88+
}
89+
}
90+
91+
/* 3rd breakpoint - Bump up font size at very wide screens */
92+
@media all and (min-width: 75em) {
93+
.rwd-example .ui-body {
94+
font-size: 125%;
95+
}
96+
.rwd-example .ui-block-a,
97+
.rwd-example .ui-block-c {
98+
float: left;
99+
width: 49.95%;
100+
}
101+
.rwd-example .ui-block-b,
102+
.rwd-example .ui-block-c {
103+
float: left;
104+
width: 24.925%;
105+
}
85106
}
86-
}
87107
</style>
88108
</head>
89109
<body>
@@ -98,53 +118,56 @@
98118

99119
<div data-role="content" class="jqm-content">
100120

101-
<h2>Custom responsive grid</h2>
102-
103-
<p>It's easy to extend the basic grid styles into a custom responsive layout by using CSS media queries to adjust the layout and design across various screen width breakpoints. </p>
104-
<p>This example is a typical news feature block that changes its layout across screen widths and illustrates how to change the grid ratios and overall layout with simple CSS. It starts as a simple set of stacked stories on phones, that goes to a layout with the lead story full width stacked over a 50/50 layout of the secondary stories. At wider widths, these secondary stories float next to the lead story in a 50/25/25 layout. When the screen gets very wide, the font size is bumped up to keep line lengths short.</p>
105-
<p>Use the view source button below to see how the media queries work for each of these breakpoints.</p>
106-
107-
<!-- view source utilty wrapper -->
108-
<div data-demo-html="true" data-demo-css="true">
109-
110-
<div class="rwd-example">
111-
112-
<!-- Lead story block -->
113-
<div class="ui-block-a">
114-
<div class="ui-body ui-body-d">
115-
<h2>Apple schedules 'iPad Mini' event for October 23</h2>
116-
<p>One of the worst-kept secrets in tech has been confirmed: Apple will hold an event October 23 in San Jose, California, at which the company is widely expected to unveil a smaller, cheaper version of its popular iPad called "Mini".</p>
117-
</div>
118-
</div>
119-
120-
<!-- secondary story block #1 -->
121-
<div class="ui-block-b">
122-
<div class="ui-body ui-body-d">
123-
<h4>Microsoft Surface tablet goes on sale for $499</h4>
124-
<p>The Microsoft Surface tablet picture has come into focus. The Redmond giant filled in the blanks on the new tablet's availability and specs.</p>
125-
</div>
126-
</div>
127-
128-
<!-- secondary story block #2 -->
129-
<div class="ui-block-c">
130-
<div class="ui-body ui-body-d">
131-
<h4>AOL unveils Alto, an email service that syncs 5 accounts</h4>
132-
<p>AOL, struggling to shed its outdated image, is reimagining one of the most visibly aging parts of its platform: Its email service. </p>
133-
</div>
134-
</div>
135-
136-
</div><!-- /rwd-example -->
137-
138-
</div><!-- /data-demo -->
139-
140-
</div><!-- /content -->
141-
142-
<div data-role="footer" class="jqm-footer">
143-
<p class="jqm-version"></p>
144-
<p>Copyright 2013 The jQuery Foundation</p>
145-
</div><!-- /footer -->
146-
147-
<?php include( '../../global-nav.php' ); ?>
121+
<h2>Custom responsive grid</h2>
122+
123+
<p>It's easy to extend the basic grid styles into a custom responsive layout by using CSS media queries to adjust the layout and design across various screen width breakpoints.</p>
124+
125+
<p>This example is a typical news feature block that changes its layout across screen widths and illustrates how to change the grid ratios and overall layout with simple CSS. It starts as a simple set of stacked stories on phones, that goes to a layout with the lead story full width stacked over a 50/50 layout of the secondary stories. At wider widths, these secondary stories float next to the lead story in a 50/25/25 layout. When the screen gets very wide, the font size is bumped up to keep line lengths short.</p>
126+
<p>Use the view source button below to see how the media queries work for each of these breakpoints.</p>
127+
128+
<!-- view source utilty wrapper -->
129+
<div data-demo-html="true" data-demo-css="true">
130+
131+
<div class="rwd-example">
132+
133+
<!-- Lead story block -->
134+
<div class="ui-block-a">
135+
<div class="ui-body ui-body-d">
136+
<h2>Apple schedules 'iPad Mini' event for October 23</h2>
137+
<p>One of the worst-kept secrets in tech has been confirmed: Apple will hold an event October 23 in San Jose, California, at which the company is widely expected to unveil a smaller, cheaper version of its popular iPad called "Mini".</p>
138+
</div>
139+
</div>
140+
141+
<!-- secondary story block #1 -->
142+
<div class="ui-block-b">
143+
<div class="ui-body ui-body-d">
144+
<h4>Microsoft Surface tablet goes on sale for $499</h4>
145+
<p>The Microsoft Surface tablet picture has come into focus. The Redmond giant filled in the blanks on the new tablet's availability and specs.</p>
146+
</div>
147+
</div>
148+
149+
<!-- secondary story block #2 -->
150+
<div class="ui-block-c">
151+
<div class="ui-body ui-body-d">
152+
<h4>AOL unveils Alto, an email service that syncs 5 accounts</h4>
153+
<p>AOL, struggling to shed its outdated image, is reimagining one of the most visibly aging parts of its platform: Its email service. </p>
154+
</div>
155+
</div>
156+
157+
</div><!-- /rwd-example -->
158+
159+
</div><!-- /data-demo -->
160+
161+
<a href="./" class="jqm-button" data-ajax="false" data-role="button" data-mini="true" data-inline="true" data-icon="arrow-l" data-iconpos="left">Back to Grids</a>
162+
163+
</div><!-- /content -->
164+
165+
<div data-role="footer" class="jqm-footer">
166+
<p class="jqm-version"></p>
167+
<p>Copyright 2013 The jQuery Foundation</p>
168+
</div><!-- /footer -->
169+
170+
<?php include( '../../global-nav.php' ); ?>
148171

149172
</div><!-- /page -->
150173
</body>

0 commit comments

Comments
 (0)