The Playground
A showcase of creative experiments and new ideas
contributed by the ZURB team. Enjoy.
Awesome jQuery Text Change Events
See what changes and when, every time, with our jQuery plugin.
Need to validate text as the user types, or check for values in a textarea? Do that and much more with our simple to use, crazy-robust jQuery plugin.
View DemoFresh on the Playground
-
Polaroid Images A grid of images and a handful of styles = awesome.
-
Javascript Annotation Sleek jQuery annotations on any image.
-
Grid builder Simple, but powerful grid CSS generator.
-
Ajax Upload Cutting-edge uploads with image previews.
Visual Effects & Animation with CSS3
A handful of useful applications of CSS animations, transitions, and transforms.
-
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.
-
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.
-
Recreating the OS X Dock
We experiment with what you can do using CSS3 and a tiny bit of javascript.
-
Awesome Overlays with CSS3
An example of using border-image and other new properties to make killer image overlays in Notable.
Stronger, Better, Faster Website Design with CSS3
Examples of using CSS3 to speed up website development, improve usability, and enhance your presentation.
-
Inline Form Labels
With some CSS tricks and a few lines of javascript we can create inline labels that don't suck.
-
Simple Drop-In Modals
How to create a very simple modal element using CSS3 and a single line of javascript.
-
Newspaper Layouts with CSS Columns
Creating a newspaper-like layout is easy using the new CSS column elements.
All About the Buttons
Killer buttons using cutting-edge CSS technology.
-
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.
-
Radioactive Buttons with RGBa and Animations
Create killer button focus effects using some very simple RGBa colors and -webkit-animations.
-
Make Your Own Google Buttons
Creating compelling buttons with nothing but CSS3.
Tools to Help You Design Better
Download our sketchsheets and grid paper or check out our Web apps that help design teams get stuff done.
-
ZURB CSS Grid Builder
Plug in number of columns, width and gutter size to generate robust, flexible, QA'd grids for your projects.
-
ZURB Sketchsheets
We've developed a set of editable PDF sketchsheets we print out to improve our presentation of rough ideas to clients.
-
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.
-
Notable
Our first Playground graduate! Notable lets your team quickly and easily capture webpages and give feedback on their design, content, code, and SEO.
-
Scrumptious
Our second Web app and the perfect add-on to Notable, Scrumptious helps teams get stuff done online through simple task lists, milestones, and private workspaces.
-
Verify
Stop acting on intuition and start acting on data! Verify is ZURB's third app, allowing you to quickly gather data from testers, before you spend a lot of time on development and implementation.
Playing With Javascript
Experiments with using javascript to create awesome experiments you can interact with.
-
ZURB JavaScript Annotation Plugin
Our jQuery plugin makes it dead simple to add and save annotations on images.
-
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.
-
AJAX Image Upload
We've got a sweet solution that uploads an image with AJAX and then immediately displays a thumbnail.
-
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.
