Using CSS Shapes to enhance visual storytelling.

UPDATE August 2014:

The full demo is obsolete because the shape-inside property was removed from browser implementations of CSS Shapes. What remains here is only a redux of the original demo. It demonstrates just one use-case with the shape-outside property.

The original source still exists in the archive tag. Use an old Chromium build and enable experimental Web Platform features in chrome://flags to run the demo.

There is a video recording of the original demo.

See "Using CSS Shapes to Enhance Visual Storytelling" to learn more about the project.

Requirements:

• Use Google Chrome.
• If you're using Chrome version 36 or below (see chrome://version), enable the flags to support CSS Shapes. Learn how.

You'll need:

• Node.JS
• SASS
• grunt

Clone repo and change to directory:

git clone https://github.com/adobe-webplatform/alice.git

Install dependencies defined in package.json:

npm install

Watch for changes:

grunt watch

CSS files are overwritten by SASS with source from .scss files. Do not edit .css files directly.

All code is offered under the Apache License Version 2.0. For licenses on third-party libraries used see NOTICE file.

All assets are offered under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 license.