You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Illustrates how container queries could be used for both modular layout, and finessing smaller responsive design details (in this case, the position of the “add to cart” button).
11
+
12
+
## Quick Setup
13
+
14
+
These demos can only be viewed via HTTP—you can’t 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:
15
+
16
+
### PHP Server
17
+
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:
18
+
19
+
```shell
20
+
$ php -S localhost:7777
21
+
```
22
+
23
+
You should see something like:
24
+
25
+
```shell
26
+
Listening on http://localhost:7777
27
+
Document root is /Users/wilto/Sites/ricg/eq-demos
28
+
Press Ctrl-C to quit.
29
+
```
30
+
31
+
Then open http://localhost:7777/demos/(demo-name) in your browser
32
+
33
+
### NodeJS
34
+
35
+
If you don’t have it installed already, you’ll need to install Node from https://nodejs.org/ (or `brew install node`, if you use Homebrew).
36
+
37
+
Once you have Node installed, navigate to the repo’s root directory in your terminal and enter the following:
38
+
39
+
```shell
40
+
$ npm install
41
+
```
42
+
43
+
This will install the node server’s dependencies. Once complete, enter:
44
+
45
+
```shell
46
+
$ node server.js
47
+
```
48
+
49
+
You should see something like:
50
+
51
+
```shell
52
+
Listening on http://localhost:7777
53
+
Document root is /Users/wilto/Sites/ricg/eq-demos
54
+
Press Ctrl-C to quit.
55
+
```
56
+
57
+
Then open http://localhost:7777/demos/(demo-name) in your browser
58
+
59
+
## Demo Syntax
60
+
61
+
Only `.element:media( min-width ) {} ` and `.element:media( max-width ) {} ` are available so far.
62
+
63
+
The container query pseudo-polyfill used here is a modified version of <ahref="https://github.com/Mr0grog/element-query">element-query</a>.
0 commit comments