Omnigraffle stencil, template, and color picker modeled after Twitter Bootstrap

Home Page: https://github.com/vigetlabs/Twitter-Bootstrap-for-Omnigraffle

License: MIT License

twitter-bootstrap-for-omnigraffle's Introduction

TWITTER BOOTSTRAP FOR OMNIGRAFFLE

Note: These tools were created for Omnigraffle 6 and 7. While they will likely work with Omnigraffle 7, they haven't been tested in that version of the app.

This is a set of Omnigraffle stencils, colors, and templates that mirror Twitter Bootstrap as closely as possible.

INSTALLATION

Install as few or as many items as you need.

Stencils/Twitter-Bootstrap.gstencil
- Stencils grouped by type, along with one all-encompassing stencil.
Templates/Twitter-Bootstrap.gtemplate and Templates/Twitter-Bootstrap-classic.gtemplate
- Starter template with grid system and guides.
- The first one uses guides most faithful to Bootstrap, even though they are often placed at decimal points.
- The -classic version is retained from the previous release. It's less faithful to the current grid system, but more usable for people who rely on Omnigraffle's pixel grid.
Colors/Twitter-Bootstrap.clr
- Swatches for your color picker.

Install the stencils and templates (OmniGraffle 6 and Omnigraffle 7)

Double-click the stencil or template to open it in OmniGraffle
Click the Move button to install it locally

Install the stencils and template (OmniGraffle 5)

Drag or copy the stencil file to ~/Library/Application Support/The Omni Group/OmniGraffle/Stencils
Drag or copy the template file to ~/Library/Application Support/The Omni Group/OmniGraffle/Templates

(If you have an older version of OmniGraffle these folders may be in ~/Library/Application Support/OmniGraffle/)

Install the color swatches

Drag or copy the colors file to ~/Library/Colors

Note: Recent versions of OSX hide the user's Library folder by default. You can access it in Finder by holding down Option while opening the Go menu then clicking on Library.

CREDITS

Crafted by Elliott, Todd, and Lance at Viget.

Special thanks to the Twitter Bootstrap crew and contributors. Those kids are alright.

Visit code.viget.com to see more projects from Viget.

twitter-bootstrap-for-omnigraffle's People

Contributors

Stargazers

Watchers

twitter-bootstrap-for-omnigraffle's Issues

/-: new OG update broke these )-: ?

r185490 seems to have broken these stencils/templates )-:

Various Suggestions / Questions

This is fantastic! One suggestion and three questions:

You have two typos in the template canvases: you want "Portrait" not "Potrait".
Did I overlook vertical spacing in the stencils? I'd like to use the recommended vertical spacing from Bootstrap. Would it make sense to add something?
I found myself accidentally moving the guides, so I selected "Lock Guides". Can you lock the guides before putting into version control?
Can you split apart the stencils so they show up nested in the tree view like the default stencils? (Currently, there is a whole lot of scrolling going on.)

cannot open template

I'm using OmniGraffle/5.3.6/GM-v138.33
I have unzipped the file and placed the Template in Library>Application Support/The Onmi Group/OmniGraffle/Templates.
The error message reads "The document “Twitter-Bootstrap-grid.graffle” could not be opened. Encountered unknown tag html on line 5"
Changing the extension from .graffle to .gtemplate has no effect.

Thanks in advance for looking into this, and for a nice set of stencils.

Bootstrap 3?

👍

Some elements are not visible. Instead labels are displayed.

On the Stencils panel some icons are missing.
Instead of an icon its label is displayed, like "icon-hand-down", "icon-head-up" or "icon-lock".

Width of navbar should be 940px

See screenshot. The black bar shouldn't go over that red line
http://akshatpradhan.dropmark.com/50023/525955

gTemplate settings

These should be the default Canvas settings of the 960 template.

Major Grid Spacing: 60px
Minor Grid Step: 6

Grid in front: unchecked
Show grid lines: checked

That allows you to calculate baseLineHeight as 6*3 = 18px and you get some good horizontal dimensions as well.

Bootstrap 3 Support?

More of a question than an ask. Do you all have plans to update this for Bootstrap 3?

form should have snippet placeholder

This part of the stencil: http://akshatpradhan.dropmark.com/50023/556688

Needs to have a little snippet text below like this: http://akshatpradhan.dropmark.com/50023/556689

Words on form must appear on right, not left hand side

http://spoutlets.dropmark.com/50023/512623

See "Woo hoo"
http://twitter.github.com/bootstrap/base-css.html#forms

Bootstrap 2.2.1 is out

There's a lot of goodness in it. You guys rock for making this omnigraffle stencil. I've been telling everybody about it. We can't wait to see the new stencil.

Readme has incomplete/outdated file paths

According to https://support.omnigroup.com/documentation/omnigraffle/mac/7.1/en/using-and-creating-stencils/, OG 7.18 is now a containerized application, and the paths to the stencil, template, and color folders has changed. In that link the paths are given as:

If you need to access the Stencils folder from a script you are writing, the Unix path to use is:

Non-Mac App Store purchases:
~/Library/Containers/com.omnigroup.OmniGraffle7/Data/Library/Application\ Support/The\ Omni\Group/OmniGraffle/Stencils
Mac App Store purchases:
~/Library/Containers/com.omnigroup.OmniGraffle7.MacAppStore/Data/Library/Application\ Support/The\ Omni\Group/OmniGraffle/Stencils

Hopefully important features of the template work properly on v5, but I'm not sure what they are or how to test to make sure they are working properly.

There's no well

Why doesn't the stencil include a Well like this:

http://twitter.github.com/bootstrap/components.html#misc

vigetlabs / twitter-bootstrap-for-omnigraffle Goto Github PK