Unfolding the Box Model

Interactive slides that explore CSS 3D Transforms. Press left or right arrow key to advance. Watch in full-screen for best results.

Modifying or re-using

CSS in this presentation is generated using Sass and Compass. Make sure you install the required gems before trying to make changes to the source.

gem install bundler
bundle install

Bundler will install the right versions of all the gems that are needed. Now, when you fire up Compass append the bundler-specific commands:

bundle exec compass watch

Code and examples are copyright Chris Ruppel - CC BY-SA 3.0

Name	Name	Last commit message	Last commit date
Latest commit rupl 💰 new URL for Web Monetization Nov 25, 2021 8d94434 · Nov 25, 2021 History 132 Commits
css	css	💅 some updates and tweaks	Oct 14, 2016
img	img	Adding fallback warning to title slide.	Feb 1, 2013
js	js	💅 some updates and tweaks	Oct 14, 2016
sass	sass	💅 some updates and tweaks	Oct 14, 2016
.editorconfig	.editorconfig	Adding .editorconfig	Jan 12, 2013
.gitignore	.gitignore	Adding .gitignore	Jan 12, 2013
Gemfile	Gemfile	Adding Gemfile for bundler	Oct 21, 2013
Gemfile.lock	Gemfile.lock	Adding Gemfile for bundler	Oct 21, 2013
README.md	README.md	Update README with bundler instructions.	Dec 19, 2013
config.rb	config.rb	Adding 'unfold' directory to config.rb for gh-pages. whoops.	Feb 3, 2013
index.html	index.html	💰 new URL for Web Monetization	Nov 25, 2021
notes.md	notes.md	a note	Jan 31, 2013