adobe-webplatform / Demo-for-Alice-s-Adventures-in-Wonderland

Demo of CSS Shapes using the Alice in Wonderland story.

Demo for Alice's Adventures in Wonderland, by Lewis Carroll

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.

Demo

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.

Contributing

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.

License

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.