Whitworth Demos

These demos accompany Container Queries: Once More Unto the Breach, illustrating the how media queries are flawed in terms of modular design, and the proposed function of a syntax that allows breakpoints based on element size rather than viewport size.

This repo uses a modified version of Rob Brackett’s element-query script.

Demos

Demo 1
A single breakpoint where the layout changes from linear to a primary content area and a sidebar.

Demo 2
Module styles, using a single breakpoint not scoped to any specific contexts. The “featured” module is broken at meduium viewport widths.

Demo 3
Modules now have a second breakpoint and set of styles scoped to the “featured” container context.

Demo 4
“Add to cart” button and “Only 3 left” text are aligned right based on modules’ available space, using several media queries and duplicated styles.

Demo 5
Module layouts using a breakpoint based on the element size rather than viewport size.

Demo 6
“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.

Quick Setup

The demos illustrating a theoretical CSS 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:

PHP Server

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:

$ php -S localhost:7777

You should see something like:

Listening on http://localhost:7777
Document root is /Users/wilto/Sites/ricg/whitworth
Press Ctrl-C to quit.

Open http://localhost:7777 in your browser and you’ll see the index page.

NodeJS

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).

Once you have Node installed, navigate to the repo’s root directory in your terminal and enter the following:

$ npm install

This will install the node server’s dependencies. Once complete, enter:

$ node server.js

You should see something like:

Listening on http://localhost:7777
Document root is /Users/wilto/Sites/ricg/whitworth
Press Ctrl-C to quit.

Open http://localhost:7777 in your browser and you’ll see the index page.