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 PDFsTo 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
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
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
Tabs
Tabs are a great way to separate content. This set includes:
- Open Tabs
- Contained Tabs
- Pill Tabs
- Vertical 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
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
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!
Check out other Playground experiments
Morse Code for Foundation
Pizza Pie Charts
Prototyping Mobile First
Foundation 4 Stencil Sets
