Design Great Products Faster
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 StencilsGet 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.
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
Vector PDF Download »
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 Actions
- Error States
Vector PDF Download »
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
Vector PDF Download »
Tabs
Tabs are a great way to separate content. This set includes:
- Open Tabs
- Contained Tabs
- Pill Tabs
- Vertical Tabs
Vector PDF Download »
UI Elements
Foundation includes tons of UI elements that are handy on any web project. This extensive stencil set includes:
- Alerts
- Labels
- Tooltips
- Panels
- Tables
- Block Grids
- Image Placeholders
- Orbit Placeholder
- Reveal Modals
- Joyride Feature Tour
Vector PDF Download »
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
Vector PDF Download »
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!
-
Sketching the iPhone
-
Sketching Honeycomb
-
Sketching Gingerbread
-
Foundation Icon Fonts
