Foundation 3 Stencils!

Use our Foundation Omnigraffle stencils to develop Foundation mock-ups faster than ever before. They're available for Omnigraffle and as vector PDFs.

What's this all about?

We're always wireframing—a lot! Sometimes we'll jump straight into code for wireframes, but that isn't always the best option. We wanted something that would help us develop and layout sites that we planned to build with Foundation for our clients and internal projects.

One of the great things about Foundation is the ability to create coded wireframes quickly, but sometimes you need to get more granular with your details or don't have enough layouts or interactions solved to start coding efficiently. This is where static wireframes do a great job, especially if you have an awesome set of stencils to work with!

Get All Omnigraffle Stencils Get All Vector PDFs

To avoid constantly recreating elements, we've designed this stencil to help speed up the process and get your brain focused on the important things like interactions.

Yeti stencil 2

Buttons

Foundation has a really extensive set of buttons to use on every project. We represented each buttons style and size, including:

  • Square
  • Radius
  • Rounded
  • Square
  • Button Groups
  • Dropdown Buttons
  • Split Buttons

Omnigraffle Download »

Vector PDF Download »

Buttons

Forms

Foundation 3 uses the grid to size the forms and with these stencils you have just as much flexibility! We've included things like:

  • Label Positions
  • Inline Labels
  • Radio Buttons
  • Checkboxes
  • Select Lists
  • Post/Prefix Labels & Actions
  • Error States

Omnigraffle Download »

Vector PDF Download »

Forms

Navigation

Our navigation elements are simple and clean to help structure your site, this stencil set includes:

  • Navbar Options
  • Sub Nav Options
  • Breadcrumbs
  • Link Lists

Omnigraffle Download »

Vector PDF Download »

Nav

Tabs

Tabs are a great way to separate content. This set includes:

  • Open Tabs
  • Contained Tabs
  • Pill Tabs
  • Vertical Tabs

Omnigraffle Download »

Vector PDF Download »

Tabs

UI Elements

This stencil includes all the little UI goodies that are handy for any web project. We've included some new elements like the progress bars and pricing tables. Check out what this extensive stencil set includes:

  • Alerts
  • Labels
  • Tooltips
  • Panels
  • Tables
  • Block Grids
  • Image Placeholders
  • Orbit Placeholder
  • Reveal Modals
  • Joyride Feature Tour

Omnigraffle Download »

Vector PDF Download »

Ui

Typography

A big part of Foundation 3 was redoing the typography based on a modular scale. The default typography is based on the golden ratio and includes:

  • Headers
  • Paragraphs
  • Lists
  • Blockquotes

Omnigraffle Download »

Vector PDF Download »

Type

Wanna Know Why We Created This?

Hop on over to our blog post to find out why we created these stencils. We'd also love to hear any ideas on how these stencils could be improved!


Product Design Training from the Experts at ZURB


Reveal Modal Goodness

This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.

This is just a simple modal with the default styles, but any type of content can live in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis sem vel enim eleifend tristique. Etiam tincidunt faucibus pharetra.

×

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?
×

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in

×