ZURBexpo ZURBexpo »
×

ZURBplayground

Joyride

A sweet jQuery plugin that makes creating feature tours a breeze!
Creative Experiments
from ZURB.

Welcome to the ZURBplayground where we share creative interaction design tools and experiments from the design and engineering teams here at ZURB. We create tools, implementation examples, and other interesting projects that help people design for people.

ZURBplayground

Joyride

A sweet jQuery plugin that makes creating feature tours a breeze!.
ZURB Creative Experiments.

Welcome to the ZURBplayground where we share creative interaction design tools and experiments from the design and engineering teams here at ZURB. We create tools, implementation examples, and other interesting projects that help people design for people.

Axe

A tablet web app that lets you kill bad web designs, cut out the fat, and share the meaty results.
Spur

Capture websites and provide a quick critique on visual design and layout.
Reel

Upload mockups, sketches or PDF/PPT presos to get thumbs up/down feedback.
HTML5 Video Voting

Vote on your favorite moments with HTML5 Video.
Rapid Prototyping

Use flickrBomb to quickly fill your pages with relevant images from Flickr.
Spur

Capture websites and provide a quick critique on visual design and layout.
Reel

Upload mockups, sketches or PDF/PPT presos to get thumbs up/down feedback.
HTML5 Video Voting

Vote on your favorite moments with HTML5 Video.
Rapid Prototyping

Use flickrBomb to quickly fill your pages with relevant images from Flickr.
Reveal jQuery
Modal

The sexiest, most lightweight jQuery modal plugin this side of ever.

Playing With JavaScript

Experiments in javascript to create awesome toys and tools you can interact with, or use yourself.

HTML5 Video Voting

Vote on your favorite parts of the video and jump to popular segments.

Demo

Rapid Prototyping

Use flickrbomb to quickly fill your pages with relevant images from Flickr.

Demo

ZURB JavaScript Annotation Plugin

Our jQuery plugin makes it dead simple to add and save annotations on images.

Demo

Wooly ZURBian!

For our 2009 holiday card, we sent everyone a Wooly Willy along with a link to our own digital version built with Google Closure.

Create a Wooly ZURBian

AJAX Image Upload

We've got a sweet solution that uploads an image with AJAX and then immediately displays a thumbnail.

Demo

jQuery Text Events

Need some hot new events to watch for on text inputs? We've got you covered with an easy to use new set of text change events for jQuery.

Demo

Orbit: jQuery Slider Plugin

Sick of confusing and bloated image sliders that never work? Rock ZURB's Orbit for a mere 4KB.

Demo

jQuery Raptorize Plugin

Want to put an animated prehistoric easter egg on your site? We've got what you need.

Demo

Reveal: jQuery Modal Plugin

We've made the sexiest, most lightweight jQuery modal plugin this side of ever.

Demo

jQuery Joyride Plugin

Want to take users through a tour of your app? We've got the right tool.

Demo

Have you tried our apps?

Check out our web apps that help design teams get stuff done.

Resolve

Our second Web app and the perfect add-on to Notable, Resolve helps teams get stuff done online through simple task lists, milestones, and private workspaces.

Visit Resolve

Strike

Strike makes task lists and collaboration easy and fun. Just line 'em up and knock 'em down!

Visit Strike

Bounce

Like giving feedback and want a fast, free way to give some? Check out Bounce, a fun, free way to give feedback on websites.

Visit Bounce

TinyBounce

Bounce too big for you? Check out TinyBounce, our entrant in the 10k Apart competition. Everything you love about Bounce in under 10k.

Check Out TinyBounce

Clue

Want a fun and easy way to test what people remember on your website.? Check out Clue to create a memory test for your website with the click of a button.

Visit Clue

Parade

Schedule your photos and build your audience! Don’t let your photo stream fade away; keep eyes on your work with daily uploads. Parade takes the work out of curating your photo stream.

Visit Parade

Chop

Chop makes it dead simple to drop in code, add notes, and share them with other nerds. Perfect for code reviews, sharing snippets, and all kinds of geeky pursuits.

Visit Chop

Reel

Reel is a great way to present sketches, mockups, or PDF/PPT preso for quick thumbs up/down feedback (or just to show it off). It's pretty rad.

Visit Reel

Spur

Spur is a fun and easy way for anyone to capture websites and provide a quick critique on visual design and layout.

Visit Spur

Axe

A tablet web app from ZURB that lets you kill bad web designs, cut out the fat, and share the meaty results.

Visit Axe

Visual Effects & Animation with CSS3

A handful of useful applications of CSS animations, transitions, and transforms.

Works in Safari Works in Chrome

Sliding Vinyl with CSS3

We take an image of an album cover, some basic HTML, and a little fancy CSS3 that, on hover, slides out the pure-CSS vinyl record behind it.

Demo

Works in Safari Works in Chrome Works Somewhat in Firefox

Polaroid Images with Only CSS3

Using nothing more than a grid of linked images and CSS3, we echo the title text of our links and use CSS3 to create "randomly" tilted polaroid-style images.

Demo

Works in Safari Works in Chrome

Recreating the OS X Dock

We experiment with what you can do using CSS3 and a tiny bit of javascript.

Demo

Works in Safari Works in Chrome Works in Firefox

Awesome Overlays with CSS3

An example of using border-image and other new properties to make killer image overlays in Notable.

Demo

Works in Safari Works in Chrome

Shadow Experiments

We use CSS box shadows to take a trip to the dark side of the moon, create a periodical table and make a radioactive love concoction. We even throw some CSS animations in there to add to the party.

Demo

Stronger, Better, Faster Website Design with CSS3

Examples of using CSS3 to speed up website development, improve usability, and enhance your presentation.

Works in Safari Works in Chrome Works in Firefox

Inline Form Labels

With some CSS tricks and a few lines of javascript we can create inline labels that don't suck.

Demo

Works in Safari Works in Chrome Works Somewhat in Firefox

Simple Drop-In Modals

How to create a very simple modal element using CSS3 and a single line of javascript.

Demo

Works in Safari Works in Chrome Works in Firefox

Newspaper Layouts with CSS Columns

Creating a newspaper-like layout is easy using the new CSS column elements.

Demo

All About the Buttons

Killer buttons using cutting-edge CSS technology.

Works in Safari Works in Chrome Works in Firefox

Super Awesome Buttons with CSS3 and RGBa

Using a combination of CSS3 and new RGBa color values, we can create an easily scalable suite of awesome buttons, complete with gradient, drop shadow, and more.

Demo

Works in Safari Works in Chrome

Radioactive Buttons with RGBa and Animations

Create killer button focus effects using some very simple RGBa colors and -webkit-animations.

Demo

Works in Safari Works in Chrome

Make Your Own Google Buttons

Creating compelling buttons with nothing but CSS3.

Demo

Tools to Help You Design Better

Download our sketchsheets and grid paper.

ZURB CSS Grid Builder

Plug in number of columns, width and gutter size to generate robust, flexible, QA'd grids for your projects.

Build a Grid

ZURB Sketchsheets

We've developed a set of editable PDF sketchsheets we print out to improve our presentation of rough ideas to clients.

Download PDFs

ZURB iPad Omnigraffle Stencils & Sketchsheets

Use our iPad stencils and sketchsheets to make your work process a lot more efficient.

Get Some iPad Goodies

ZURB iPhone Omnigraffle Stencils & Sketchsheets

Use our iPhone stencils and sketchsheets to prototype faster.

Get Some iPhone Goodies

ZURB Android Honeycomb Omnigraffle Stencils & Sketchsheet

Use our Android Honeycomb stencils and sketchsheets to prototype faster.

Get Honeycomb Goodies

ZURB Android Gingerbread Omnigraffle Stencils & Sketchsheet

Use our Android Gingerbread stencils and sketchsheets to create mockups faster.

Get Gingerbread Goodies

ZURB Grid Paper

What's paper if it doesn't have dots? Connect the dots to give your sketches a little more structure while exploring refined concepts on paper.

Download PDF

Since you like our playground...

Why not check out some of our rapid iteration tools?

Since you
like our playground...

Why not check out some of our other projects?

Notable

Our first Playground graduate! Notable lets your team quickly and easily capture webpages and give feedback.

Visit Notable

Verify

Verify allows you to quickly gather data from testers, before development and implementation.

Visit Verify

Foundation

An easy to use, powerful, and flexible framework
for building prototypes and production code
on any kind of device.

Visit Foundation

Visit Notable

Visit Verify

Visit Foundation

Creative Experiments from ZURB.

Welcome to the ZURB Playground, creative interaction design tools and experiments by the design and engineering teams here at ZURB. We create tools, implementation examples, and other interesting projects that help people design for people.

Made by ZURB

ZURB is a close-knit team of interaction designers who help companies design better web sites, services, and online products. We've worked with more than 150 start-ups since 1998.

Subscribe to ZURBnews

Get our monthly newsletter, ZURBnews.
Check out the latest news and buzz