Today’s post is about …

A UI Toolkit for Twitter Bootstrap version 2.0. The entire UI recreated as vector images for Adobe Fireworks. (Fw PNG)

Hey, that’s not an extension!

Ok, so this is not about a Fireworks extension, but its the only Fireworks blog that I can post to. :o) Besides, if you think about it, anything that extends the use of Fireworks should be talked about here!

Bootstrap, from Twitter

Bootstrap is a neat little html, css and javascript toolkit that lets you create web apps quickly and easily.

That is, if you can code.

I was using Bootstrap the other week for a personal project that I am currently working on. First I designed the app in Fireworks. Next was finding a way to build it quickly. Bootstrap 2 had just been released, so I decided to give it a try. I was really surprised at how quickly I was able to build my app and customize it to look like my design.

What about non coder designers?

Not all designers are coders. So I thought it would be cool to recreate all the UI elements as vector images so that people who cannot code can still design Bootstrap lookin’ apps and sites.

So what is in it?

Other designers had created their own Bootstrap ui toolkits for Fireworks, but the fidelity was more for wireframing. I wanted to do something more hi-res. All the components are as close to looking like the screen grabs I got from the Bootstrap website as I could get them.

Because they are all vector images, you can select the points and extend them out or in as much as you need to.

All of the states are in there too. So you will find the hover and click state of buttons, tabs and other elements that have states. Also, if something can appear on the left, right, top or bottom, I created those too.

The Glyphicons provided are in a sprite for use in css. For the purposes of prototyping in Fireworks they needed to be broken up. In the icons section, you will see black and white versions of the icons. If you need another color, you only need to adjust the color settings.

All of the UI components are organized in pages within Fireworks. I did it this way because it just made sense to me to do it that way. If that is not working for some of you, let me know and I will reorganize them. They are also organized into the same hierarchy as they are on the Bootstrap site. Base CSS, Components and Javascript Plugins.

There are some things that I did not add. For instance, scrollspy. This is more of an interaction than it is a ui element. You can use the navbar to show this, so I did not include a separate page for scrollspy.

Enough already where can I get it!?!

I hope that this can help you in your designs! Let me know if there is anything I missed or if there is anything you would like to see added!

Comments welcome!

Little Differences

Some have asked what the difference is between this Bootstrap UI tool kit and this one by Hannah Milan. Let’s look at an example.

You can see from the image that there are differences between the Hannah’s 1.4 version and my 2.0 version. On Hannah’s site, http://fireworkswireframingkit.com/, she provides UI components that are primarily for wireframing. When I was creating these vectors, I was going for as hi-res close to the screen shot as I could. Hope that answers any questions! Hannah has done an awesome job on her site, if you are looking for wireframing resources, totally go to her site!

Some screenshots