|
1 | 1 | # Whitworth Demos
|
2 | 2 |
|
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. |
4 | 27 |
|
5 | 28 | ## Quick Setup
|
6 | 29 |
|
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: |
8 | 31 |
|
9 | 32 | ### PHP Server
|
10 | 33 | 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