An Omnigraffle Stencil for Twitter Bootstrap 2

Let’s start this off by saying we’re pretty big fans of Twitter Bootstrap.

We’ve had opportunities to use Twitter Bootstrap casually over the past year, mostly to fill in the gaps of assets that might otherwise get overlooked during the design phase. It served more as a visual checklist of assets to consider during buildout more than a framework for us from which to build a product.

Recently, we were tasked with building a robust CMS from the ground-up using Rails. At about the same time, Bootstrap 2 was released, bringing with it added tools for navigation, presentation and interactivity. After evaluating the new version, we decided to use Bootstrap as a base for the front-end.

Unfortunately, out of the box, Twitter Bootstrap doesn’t have any assets for mocking up UIs outside of code. And, unless your UX Designers are as fluent (and efficient) in markup as they are in Omnigraffle, Bootstrap’s not much help during the UX production phase.

So we created our own, exhaustive Twitter Bootstrap Omnigraffle Stencil and we’re releasing it here.

Some things to note

• We attempted to keep a healthy balance between utility and visual accuracy. The goal was to create assets that would be easy to edit. When given a choice to compromise on utility or visual details, we erred on visual details. Pixel-perfect highlights, perfect shadows, perfect borders, these are what we consider visual details.
• All the icons are redrawn for Omnigraffle. Big ups to Glyphicons for providing the icons to begin with.
• Stencils are broken out by Typography, Navigation, Forms, Buttons, Icons, Widgets, and the “Kitchen Sink” version.
• We’re open to feedback. See a mistake? Did we miss something? Suggest an improvement? Let us know in the comments and we’ll push an update.

The files

You can download a zipped version of the stencils here.

If you’re not familiar with installing these files, the README file provides instructions. And if you’d like to keep up with the latest version, you can visit the project on Github.

Special thanks to @fat, and @mdo at @twitter. Those kids are alright.