ZURB Playground
The Playground is ZURB’s repository for technical experiments. When it comes to web technologies, anything goes on the Playground, whether it’s playing with JavaScript or crafting a love potion in CSS. You'll find everything from plugins to code snippets to downloadable tools to help you design better.
-
-
-
Morse Code for Foundation
Use our grid shortcuts for Coda and Sublime Text to help you code faster.
-
Responsive Ads
Our prototype responsive ads allow you to design one ad for every screen.
-
Image Blur Texture
Create a slick blurred texture using CSS transforms or HTML5 Canvas.
-
Pizza Amore!
Deliver up pie charts, bar charts and line graphs for your responsive site.
-
-
Prototyping Mobile First
Use our iOS 7, Android Jelly Bean and Windows 8 stencils and sketchsheets to prototype faster.
-
-
Wrangle jQuery Plugin
This responsive JavaScript plugin allows you to quickly multi-select with the drag of a mouse—or finger.
-
jQuery TwentyTwenty Plugin
Need an easy way to compare two images, photographs, or designs? Our visual diff tool brings changes into focus.
-
Interchange for Foundation 4
Use media queries and Interchange to deliver the right images to your users.
-
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.
-
-
The Clambake
Add retina-ready logos and other graphics to your emails. Use it with our responsive email templates.
-
Responsive Email Templates
Ensure your email campaigns look good on any device with our responsive email templates.
-
Social Web Icons
Resolution-independent SVG icons for all your social networking needs.
-
Responsive Sketchsheets
We've developed a set of Responsive sketchsheets we print out to improve our presentation of rough ideas to clients.
-
-
Foundation 3 Stencil Sets
An extensive set of wireframing icons made for Omnigraffle or anything that can edit vector PDFs.
-
-
jQuery Joyride Plugin
Want to take users through a tour of your app? We've got the right tool.
-
-
flickrBomb: Rapid Prototyping
Use flickrBomb to quickly fill your pages with relevant images from Flickr.
-
HTML5 Video Voting
Vote on your favorite parts of the video and jump to popular segments.
-
Orbit: jQuery Slider Plugin
Sick of confusing and bloated image sliders that never work? Rock ZURB's Orbit for a mere 4KB.
-
Reveal: jQuery Modal Plugin
We've made the sexiest, most lightweight jQuery modal plugin this side of ever.
-
jQuery Raptorize Plugin
Want to put an animated prehistoric easter egg on your site? We've got what you need.
-
ZURB JavaScript Annotation Plugin
Our jQuery plugin makes it dead simple to add and save annotations on images.
-
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.
-
Simple Drop-In Modals
How to create a very simple modal element using CSS3 and a single line of javascript.
-
Inline Form Labels
With some CSS tricks and a few lines of JavaScript we can create inline labels that don't suck.
-
-
Radioactive Buttons with RGBa and Animations
Create killer button focus effects using some very simple RGBa colors and -webkit-animations.
-
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.
-
Newspaper Layouts with CSS Columns
Creating a newspaper-like layout is easy using the new CSS column elements.
-
Awesome Overlays with CSS3
An example of using border-image and other new properties to make killer image overlays in Notable.
-
CSS 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.
-
Recreating the OS X Dock
We experiment with what you can do using CSS3 and a tiny bit of javascript.
-
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.
-
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.
-
ZURB CSS Grid Builder
Plug in number of columns, width and gutter size to generate robust, flexible, QA'd grids for your projects.
-
ZURB iPhone Omnigraffle Stencils & Sketchsheets
Use our iPhone stencils and sketchsheets to prototype faster.
-
ZURB iPad Omnigraffle Stencils & Sketchsheets
Use our iPad stencils and sketchsheets to make your work process a lot more efficient.
-
ZURB Android Gingerbread Omnigraffle Stencils & Sketchsheet
Use our Android Gingerbread stencils and sketchsheets to create mockups faster.
-
ZURB Android Honeycomb Omnigraffle Stencils & Sketchsheet
Use our Android Honeycomb stencils and sketchsheets to prototype faster.
-
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.
