Skip to content

Commit bbe1381

Browse files
committed
Link to demos, now that gh-pages is published.
1 parent 227885c commit bbe1381

File tree

1 file changed

+25
-2
lines changed

1 file changed

+25
-2
lines changed

README.md

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,33 @@
11
# Whitworth Demos
22

3-
These demos accompany [Element Queries: Once More Unto the Breach](http://alistapart.com/article/element-queries), illustrating the how media queries are flawed in terms of modular design, and the proposed function of an “element query” syntax.
3+
[These demos](http://responsiveimagescg.github.io/ALA-Whitworth-Demo/) accompany [Element Queries: Once More Unto the Breach](http://alistapart.com/article/element-queries), illustrating the how media queries are flawed in terms of modular design, and the proposed function of an “element query” syntax.
4+
5+
## Demos
6+
7+
### [Demo 1](http://responsiveimagescg.github.io/ALA-Whitworth-Demo/demo1/index.html)
8+
A single breakpoint where the layout changes from linear to a primary content area and a sidebar.
9+
10+
### [Demo 2](http://responsiveimagescg.github.io/ALA-Whitworth-Demo/demo2/index.html)
11+
Module styles, using a single breakpoint not scoped to any specific contexts. The “featured” module is broken at meduium viewport widths.
12+
13+
### [Demo 3](http://responsiveimagescg.github.io/ALA-Whitworth-Demo/demo3/index.html)
14+
Modules now have a second breakpoint and set of styles scoped to the “featured” container context.
15+
16+
### [Demo 4](http://responsiveimagescg.github.io/ALA-Whitworth-Demo/demo4/index.html)
17+
“Add to cart” button and “Only 3 left” text are aligned right regardless of available space.
18+
19+
### [Demo 5](http://responsiveimagescg.github.io/ALA-Whitworth-Demo/demo5/index.html)
20+
“Add to cart” button and “Only 3 left” text are aligned right based on modules’ available space, using several media queries and duplicated styles.
21+
22+
### [Demo 6](http://responsiveimagescg.github.io/ALA-Whitworth-Demo/demo6/index.html)
23+
Module layouts using a single set of “element query” styles.
24+
25+
### [Demo 7](http://responsiveimagescg.github.io/ALA-Whitworth-Demo/demo7/index.html)
26+
“Add to cart” button and “Only 3 left” text are aligned right based on available space using a single set of “element query” styles.
427

528
## Quick Setup
629

7-
The demos illustrating a theoretical element query syntax (Demo 6 and Demo 7) can only be viewed via HTTP—you can’t just open the index files in your browser. So, you have two options for running this locally without wading through a bunch of Apache nonsense:
30+
The demos illustrating a theoretical element query syntax (Demo 6 and Demo 7) can only be viewed via HTTP—you can’t just open the index files in your browser, if you’ve cloned the repo and want to tinker with these pages locally. You have two options for running this locally without wading through a bunch of Apache nonsense:
831

932
### PHP Server
1033
OSX ships with PHP, which makes it _very_ easy to spin up a quick server. Naviate to the repo’s root directory in your terminal and enter the following:

0 commit comments

Comments
 (0)