Twitter Bootstrap Stencil for Omnigraffle

Description

The purpose of this stencil is to make it easy to mockup web sites or web applications using the Twitter Bootstrap CSS Toolkit from http://twitter.github.com/bootstrap.

Requirements

• Mac computer (physical or virtual)
• Omnigraffle

Installation

To install the stencil, do the following:

1. Download the stencil to your computer.
2. Double-click on the stencil to open OmniGraffle
3. In the Stencil Inspector you should see the stencil, click the "Install" buton
4. Enjoy!

Replace Existing Stencil

If you already have this stencil installed, here's how to get the latest version:

1. Open OmniGraffle
2. Open the Stencil Inspector
3. Select the current "Twitter-Bootstrap" stencil
4. Right-click on the stencil name, select "Uninstall stencil"
5. Download the newer stencil to your computer.
6. Double-click on the stencil to open OmniGraffle
7. In the Stencil Inspector you should see the stencil, click the "Install" buton
8. Enjoy!

Use

I suggest the following as you use this template:

• Create or rename a canvas to be "Default"
• Right-click on the "Default" canvass and select "New Shared Layer"
• Renamed the new shared layer (which is brown in color) to "Grid"
• Open the Canvas Inspector (Command + 3) and set the following properties:
  • "Size is multiple of printer sheets" = unchecked
  • "Auto-adjust the canvass size" = unchecked
  • "Print canvas on one printer sheet" = unchecked
  • "Orientation" = Use Page Setup
  • "Ruler units" = pixels (px)
  • "Unit scale" = No Scale
  • "Canvas size" = 940 x 940
• Click on the "View" menu and unselect "Page Breaks"
• Drag the grid in the stencil to the "Grid" layer
• With the grid selected, open the "Properties: Geometry" inspector (Command + 2) and set the following properties:
  • X = 0
  • Y = 0
  • Width = 940
  • Height = 940
• Right-click the "Grid" shared layer, select layer settings then uncheck "unlocked"

You should now see the grid on each new canvass that you add. This will help you align elements to the grid columns. You can "hide" the grid at any time by right-clicking the "Grid" shared layer, select layer settings then uncheck "visible". You can re-enable it by doing the reverse.

License

• You are free to use this stencil in your personal or commercial work
• You are free to redistribute or change the stencil

Copyright 2011, Troy Murray