Design Great Products Faster
About | ZURBlog | Sitemap






ZURBplayground

Interchange
For Foundation 4

A responsive image solution for Foundation 4.
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

Brand New Stencils for Foundation 4!

Now you can wireframe for our responsive framework faster than ever before!
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.

Foundation 4 stencil sets

Wireframe for our responsive framework faster than ever.
Right-to-Left Foundation 4

Super easy right-to-left layouts in Foundation 4.
The Clambake

Add a Retina Logo to Your Responsive Emails.
Responsive Email Templates

Email templates that will make your email campaigns responsive!
Social Web Icons

Resolution-Independent Icons for Foundation, from Adam Fairhead
Right-to-Left Foundation 4

Super easy right-to-left layouts in Foundation 4.
The Clambake

Add a Retina Logo to Your Responsive Emails.
Responsive Email Templates

Email templates that will make your email campaigns responsive!
Social Web Icons

Resolution-Independent Icons for Foundation, from Adam Fairhead
Responsive Sketchsheets

Sketch responsively with these sketchsheets.

Playing With JavaScript

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

Foundation Interchange

Use media queries and Interchange to deliver the right images to your users.

Demo

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

jQuery Joyride Plugin

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

Demo

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

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

Plunk

Plunk Down on Your Mobile Targets. An easy way to test clicks on a mobile phone.

Visit Plunk

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.

Right-to-Left Foundation 4

Super easy right-to-left layouts in Foundation 4.

Get RTL Foundation 4

Social Web Icons

Resolution-independent SVG icons for all your social networking needs.

Get Social Web Icons

Off-Canvas Layouts

Sweet layout patterns to use, built with and for Foundation 3.

Demo

Crafty Responsive Tables

You know how tables mess up responsive layouts? Not any more.

Demo

Foundation Icon Fonts

Fresh icon font sets that you can use on your next project!

Demo

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.

Foundation 4 Stencil Sets

All the goodies you need to create awesome wireframes in OmniGraffle or extensive set of vectors you can use for about anything.

Get Foundation 4 Stencils

The Clambake

Add retina-ready logos and other graphics to your emails. Use it with our responsive email templates.

Add a Logo

Responsive Email Templates

Ensure your email campaigns look good on any device with our responsive email templates.

Get Email Templates

Responsive Sketchsheets

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

Get Responsive Sketcsheets



Foundation Stencil Sets

An extensive set of wireframing icons made for Omnigraffle or anything that can edit vector PDFs.

Get Foundation Stencil Sets

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

Playground from ZURB.

Welcome to the ZURB Playground, creative product 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.

Creative Commons License
Playground from ZURB is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
Made by ZURB

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

Wanna talk? Call us at (408) 341-0600.

Hmm, not a big talker? Email us at playground@zurb.com.

Subscribe to ZURBnews

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