Skip to content

Commit 6b3ddf3

Browse files
WiltoWilto
committed
Scratch demo 4
1 parent a875774 commit 6b3ddf3

File tree

8 files changed

+79
-525
lines changed

8 files changed

+79
-525
lines changed

‎README.md

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,12 @@ Module styles, using a single breakpoint not scoped to any specific contexts. Th
1616
Modules now have a second breakpoint and set of styles scoped to the “featured” container context.
1717

1818
**[Demo 4](http://responsiveimagescg.github.io/ALA-Whitworth-Demo/demo4/index.html)**<br>
19-
“Add to cart” button and “Only 3 left” text are aligned right regardless of available space.
20-
21-
**[Demo 5](http://responsiveimagescg.github.io/ALA-Whitworth-Demo/demo5/index.html)**<br>
2219
“Add to cart” button and “Only 3 left” text are aligned right based on modules’ available space, using several media queries and duplicated styles.
2320

24-
**[Demo 6](http://responsiveimagescg.github.io/ALA-Whitworth-Demo/demo6/index.html)**<br>
21+
**[Demo 5](http://responsiveimagescg.github.io/ALA-Whitworth-Demo/demo5/index.html)**<br>
2522
Module layouts using a breakpoint based on the element size rather than viewport size.
2623

27-
**[Demo 7](http://responsiveimagescg.github.io/ALA-Whitworth-Demo/demo7/index.html)**<br>
24+
**[Demo 6](http://responsiveimagescg.github.io/ALA-Whitworth-Demo/demo6/index.html)**<br>
2825
“Add to cart” button and “Only 3 left” text are aligned right based on available space using a breakpoint based on the element size rather than viewport size.
2926

3027
## Quick Setup

‎demo4/styles.css

Lines changed: 46 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -67,17 +67,55 @@
6767
}
6868
}
6969

70-
/* “Buy” Button Layout */
71-
.mod-cost {
72-
float: left;
73-
}
74-
.mod-buy {
75-
float: right;
70+
/* Medium viewport three-across breakpoint: */
71+
@media( min-width: 40em ) and ( max-width: 50em ) {
72+
.mod-cost {
73+
float: left;
74+
}
75+
.mod-buy {
76+
float: right;
77+
}
78+
.mod-buy .buy-remaining {
79+
text-align: right;
80+
}
7681
}
77-
.mod-buy .buy-remaining {
78-
text-align: right;
82+
/* Wide viewport three-across breakpoint, inc. sidebar treatment: */
83+
@media( min-width: 105em ) {
84+
.mod-cost {
85+
float: left;
86+
}
87+
.mod-buy {
88+
float: right;
89+
}
90+
.mod-buy .buy-remaining {
91+
text-align: right;
92+
}
7993
}
8094

95+
/* Featured module at medium widths: */
96+
@media( min-width: 40em ) and ( max-width: 60em ) {
97+
.featured .mod-cost {
98+
float: left;
99+
}
100+
.featured .mod-buy {
101+
float: right;
102+
}
103+
.featured .mod-buy .buy-remaining {
104+
text-align: right;
105+
}
106+
}
107+
/* Three-across layout on wide viewports: */
108+
@media( min-width: 75em) {
109+
.featured .mod-cost {
110+
float: left;
111+
}
112+
.featured .mod-buy {
113+
float: right;
114+
}
115+
.featured .mod-buy .buy-remaining {
116+
text-align: right;
117+
}
118+
}
81119

82120
/* Theme */
83121
img {

‎demo5/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010

1111
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Source+Code+Pro|Pathway+Gothic+One' rel='stylesheet' type='text/css'>
1212

13-
<script src="../../lib/element-query.js"></script>
14-
<script src="../../lib/parser.js"></script>
13+
<script src="../lib/element-query.js"></script>
14+
<script src="../lib/parser.js"></script>
1515
</head>
1616

1717
<body>

‎demo5/styles.css

Lines changed: 14 additions & 236 deletions
Original file line numberDiff line numberDiff line change
@@ -19,28 +19,6 @@
1919
}
2020
}
2121

22-
/* Module Layout: Phase 1 */
23-
.mod img {
24-
display: block;
25-
margin: 0 auto;
26-
width: 100%;
27-
max-width: 250px;
28-
}
29-
30-
@media( min-width: 25em ) and ( max-width: 49.9375em ) {
31-
.mod img {
32-
float: left;
33-
width: 30%;
34-
max-width: 9999px;
35-
}
36-
.mod .mod-header,
37-
.mod .mod-desc {
38-
float: right;
39-
width: 68%;
40-
padding-left: 2%;
41-
}
42-
}
43-
4422
@media( min-width: 50em ) {
4523
.three-col .mod {
4624
display: inline-block;
@@ -54,222 +32,22 @@
5432
}
5533
}
5634

57-
/* Module Layout: Phase 2 */
58-
@media( min-width: 40em ) and ( max-width: 60em ) {
59-
.featured .mod img {
60-
float: left;
61-
width: 30%;
62-
}
63-
.featured .mod .mod-header,
64-
.featured .mod .mod-desc {
65-
float: right;
66-
width: 68%;
67-
}
68-
}
69-
70-
/* Medium viewport three-across breakpoint: */
71-
@media( min-width: 40em ) and ( max-width: 50em ) {
72-
.mod-cost {
73-
float: left;
74-
}
75-
.mod-buy {
76-
float: right;
77-
}
78-
.mod-buy .buy-remaining {
79-
text-align: right;
80-
}
81-
}
82-
/* Wide viewport three-across breakpoint, inc. sidebar treatment: */
83-
@media( min-width: 105em ) {
84-
.mod-cost {
85-
float: left;
86-
}
87-
.mod-buy {
88-
float: right;
89-
}
90-
.mod-buy .buy-remaining {
91-
text-align: right;
92-
}
93-
}
94-
95-
/* Featured module at medium widths: */
96-
@media( min-width: 40em ) and ( max-width: 60em ) {
97-
.featured .mod-cost {
98-
float: left;
99-
}
100-
.featured .mod-buy {
101-
float: right;
102-
}
103-
.featured .mod-buy .buy-remaining {
104-
text-align: right;
105-
}
106-
}
107-
/* Three-across layout on wide viewports: */
108-
@media( min-width: 75em) {
109-
.featured .mod-cost {
110-
float: left;
111-
}
112-
.featured .mod-buy {
113-
float: right;
114-
}
115-
.featured .mod-buy .buy-remaining {
116-
text-align: right;
117-
}
118-
}
119-
120-
/* Theme */
121-
img {
122-
max-width: 100%;
123-
}
124-
* {
125-
-webkit-box-sizing: border-box;
126-
-moz-box-sizing: border-box;
127-
box-sizing: border-box;
128-
}
129-
130-
input {
131-
cursor: pointer;
132-
}
133-
134-
.demo {
135-
background: rgba(255,255,255,.95);
136-
width: 98%;
137-
}
138-
.demo {
139-
width: 97.5%;
140-
padding: 0 2%;
141-
margin: 0 auto;
142-
}
143-
.demo:after {
144-
content: "";
145-
clear: both;
146-
display: block;
147-
}
148-
html,
149-
body {
150-
background: #222;
151-
margin: 0;
152-
padding: 0;
153-
}
154-
.demo header {
155-
background: #333;
156-
margin: 0;
157-
padding: .5em 1.5em;
158-
float: left;
159-
width: 100%;
160-
}
161-
.page-hed {
162-
border-bottom: 2px solid rgba(0,0,0,.3);
163-
color: #222;
164-
font-size: 2.2em;
165-
font-family: 'Pathway Gothic One', sans-serif;
166-
padding-bottom: .1em;
167-
text-transform: uppercase;
168-
}
169-
.logo-hed {
170-
background: rgba(0,0,0,.8);
171-
color: #fafafa;
172-
font-size: 3em;
173-
display: inline-block;
174-
font-family: 'Pathway Gothic One', sans-serif;
175-
line-height: .9;
176-
margin: 1em 0 15% 0;
177-
padding: .15em .5em;
178-
text-transform: uppercase;
179-
}
180-
.demo-lead {
181-
background: url(../img/hutch-header.jpg);
35+
/* Module layout */
36+
.mod img {
18237
display: block;
18338
margin: 0 auto;
184-
min-height: 5em;
185-
width: 97.5%;
186-
background-size: cover;
187-
}
188-
189-
.mod {
190-
background: #fff;
191-
margin-bottom: 1em;
192-
box-shadow: 0 0 5px rgba(0,0,0,.2);
193-
}
194-
.mod:after {
195-
content: "";
196-
clear: both;
197-
display: block;
198-
}
199-
.mod-header,
200-
.mod-desc {
201-
background: #4e4f4e;
202-
padding: .1em 1em;
203-
}
204-
.mod-desc {
205-
padding-bottom: 1em;
206-
}
207-
.mod-desc:after {
208-
content: "";
209-
clear: both;
210-
display: block;
211-
}
212-
213-
.heading {
214-
color: #aaa;
215-
font-family: 'Pathway Gothic One', sans-serif;
216-
font-size: 1.8em;
217-
line-height: .95;
218-
margin: 0;
219-
padding: .5em 0 0 0;
220-
text-transform: uppercase;
221-
}
222-
.heading strong {
223-
display: inline-block;
224-
color: rgba(255,255,255,.85);
225-
}
226-
.meta {
227-
color: #999;
228-
font-family: 'Source Code Pro', monospace;
229-
font-size: .85em;
230-
margin: 0;
231-
padding: .4em 0 1em 0
232-
}
233-
234-
p {
235-
color: rgba(255,255,255,.85);
236-
font-family: 'Source Sans Pro', sans-serif;
237-
}
238-
.mod-desc > p {
239-
padding-right: 1em;
240-
}
241-
242-
.cost-prev {
243-
color: #888;
244-
font-family: 'Source Code Pro', monospace;
245-
font-size: 1.2em;
246-
margin: 0;
247-
}
248-
.cost-curr {
249-
color: rgba(255,255,255,.85);
250-
line-height: 1;
251-
font-family: 'Pathway Gothic One', sans-serif;
252-
font-size: 3.5em;
253-
margin: 0;
254-
}
255-
256-
.buy-remaining {
257-
color: #eee;
258-
font-family: 'Source Code Pro', monospace;
259-
font-size: .8em;
260-
font-style: italic;
261-
margin: 1.5em 0 .5em 0;
39+
width: 100%;
40+
max-width: 250px;
26241
}
263-
.btn-buy {
264-
background-image: linear-gradient( #fe9358, #fe6b1f );
265-
border: 1px solid #e77c3f;
266-
border-radius: .15em;
267-
color: #fff;
268-
display: block;
269-
font-family: 'Pathway Gothic One', sans-serif;
270-
font-size: 1.3em;
271-
padding: .15em 1.2em;
272-
text-transform: uppercase;
273-
text-shadow: 0 1px 1px #6b3011;
42+
.mod:media( min-width: 425px ) img {
43+
float: left;
44+
width: 30%;
45+
max-width: 9999px;
46+
}
47+
.mod:media( min-width: 425px ) .mod-header,
48+
.mod:media( min-width: 425px ) .mod-desc {
49+
float: right;
50+
width: 68%;
51+
padding-left: 2%;
27452
}
27553

‎demo6/styles.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
width: 100%;
4040
max-width: 250px;
4141
}
42+
4243
.mod:media( min-width: 425px ) img {
4344
float: left;
4445
width: 30%;
@@ -51,3 +52,15 @@
5152
padding-left: 2%;
5253
}
5354

55+
/* “Add to Cart” positioning */
56+
.mod:media( min-width: 320px ) .mod-cost {
57+
float: left;
58+
}
59+
.mod:media( min-width: 320px ) .mod-buy {
60+
float: right;
61+
}
62+
.mod:media( min-width: 320px ) .buy-remaining {
63+
text-align: right;
64+
}
65+
66+

0 commit comments

Comments
 (0)