ef_featured

Bootstrap Fireworks

| 112 Comments

For the latest Bootstrap 2.1 Toolkit for Fireworks, go to http://fireworkstoolkits.com

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!?!

For the latest Bootstrap 2.1 Toolkit, go to http://fireworkstoolkits.com

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

112 Comments

  1. Is this Twitter Bootstrap version 1.4 or 2.0?

    Also: Have you tried this Fw version (1.4) and what are the main differences?… :)

    • Hey Michel, I added a section at the end of the post to address your question. First, this UI tool kit is of the 2.0 Bootstrap. Second, I was trying to be as accurate as I could with the look. I was literally creating them on top of the screenshots to make them as pixel perfect as I could.

      Hope that helps!

      • Thanks for the clarification! (I also think you should mention that this is Twitter Bootstrap version 2.0, as Adobe Fireworks library (Fw PNG), right at the beginning of the post.)

  2. Hey Grady,

    Thanks for the mention. This is awesome!
    Another resource for the Fireworks Community! :)

  3. Pingback: FireNews Week 1 | FWPolice

  4. Grady,

    Thanks for this work and for sharing it!

  5. Is it difficult to convert it for Illustrator ?

  6. this is awesome, nice job! :)

  7. Fantastic!!! great job

  8. Seriously you are a legend, we need more people making these sort of things. Especially for Fireworks, i mean k’mon nobody should be using PS for webdesign anyway.

    I’m just going to say thank you again before i start rambling =]

    Nick

  9. Pingback: Bootstrap Fireworks « « Design References Design References

  10. Pingback: Veteran Design | Smart Design for Entrepreneurs and Small Businesses

  11. You just made my week! I’m actually in the process of creating these Fireworks assets myself; this saves me hours!

    Excellent work. Thanks : )

  12. Pingback: Smashing Magazine Roundup | Jean-Paul Carmichael

  13. Hey! I was looking for this!
    I was wornking on a project with Bootstramp (great framework) and I was needed this kit to send some mockups to my client.

    Many thanks!

    PS: Sooner I hope launch Fireworks Love http://fireworkslove.com

  14. Great work !
    Thanks a lot for the time you spend :)

  15. Thank you very much for this!

    It’s a really good work :D

  16. Great work- very helpful.

    Would be great if you created a github project for this so people could follow and contribute, etc as Bootstrap itself is updated.

  17. Pingback: VIA20+ Beautiful Resources That Complement Twitter Bootstrap | My footmark

  18. Great stuff, man! Exactly what I’m looking for.

    Thanks a ton.

  19. this is awesome.. fine work

  20. Pingback: Jean-Paul Carmichael :: Blog

  21. The badges seem to be missing.
    http://twitter.github.com/bootstrap/components.html#badges

    I understand it’s a super easy object, but it still will save us some time.

    Do you have any plans of adding them to your great work?

  22. This resource is very useful. Just saved me hours. I tried searching for this online and found nothing comparable to what you have here. Thanks to IxDA Utah and Grady Kelly I wouldn’t have found it.

    Thanks.

  23. Pingback: Takula » 20+ Beautiful Resources That Complement Twitter Bootstrap » Takula

  24. Amazing, thank you so much. I love seeing support for Fireworks. Keep the good work up!

  25. Awesome set of graphics. Now just wondering why you didn’t convert them into symbols.

    • Thanks Alex! – I was planning on making symbols of the elements at first, but then realized that I just wanted to get the resource out there. Symbols are on the list!

      Grady

  26. Pingback: Bootstrap Fireworks (just like it says in the logo silly) | Bootstrap Fireworks.com

  27. Pingback: Customizing Bootstrap | Cognizo

  28. Pingback: Обзор свежих материалов, март 2012 « Юрий Ветров. Проектирование интерфейсов и управление проектами

  29. Pingback: Bootstrap Fireworks | · Software Downloads

  30. Thanks alot. I also had hoped they would be symbols, and then I saw how many pages and elements there are and knew it would take a LONGGG time to make symbols out of everything. and boring.

    But thanks so much.

  31. Fantastic! Thank you SO MUCH!

  32. what an fantastic contribution to such an amazing tool as BS 2.0, but I’m getting a little confused as to what width to design when building a template is it 940px or 1170px as you have set out in your template?

    • Glad you like it Rodger! In creating this, I just copied the scaffolding found here: http://twitter.github.com/bootstrap/scaffolding.html

      According to their documentation, you can do a 940px grid. I guess you could resize any of the vectors there to accommodate.

      • I’ve designed a template to 1170px as all the assets you have drawn up in Bootstrap Fireworks relate to this width, so would this be the wrong approach?

        • Can anyone please advise on what width to use when designing with Bootstrap Fireworks……Thanks!

          • Hey Roger,

            If you look at the docs from Twitter Bootstrap … http://twitter.github.com/bootstrap/scaffolding.html

            “The default grid system provided in Bootstrap utilizes 12 columns that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically.”

            So you can do any of those widths. 724px, 940px and 1170px. When you get smaller, say iphone size, the widths fit the iphone screen resolution and stack vertically.

            Hope that helps!

  33. thanks – it’s great!

  34. Pingback: Delicious Bookmarks for July 14th through July 15th « Lâmôlabs

  35. Pingback: Resources That Complement Twitter Bootstrap « C++

  36. Thank you! This is awesome pack!

  37. Is it possible to get this in an .eps or .ai version that will open in Adobe Illustrator?

  38. Pingback: eJussie | 14 Resources for Twitter Bootstrap Lovers

  39. Pingback: Javalees

  40. great work just wondering how i can use these pngs to customise my own bootstrap ui. Not seeing any info relating to how you customise the ui except colours for buttons and bgs etc..I mean how can i use your pngs to create my own custom forms.

    • Jimmy,

      If you are using Adobe Fireworks, you can simply open the png and edit any of the vector images to your liking. The vectors are intended for creating designs and prototypes, you can design forms, but it will not create working forms.

      If you are looking for tools to customize the bootstrap css, there are may resources for that … http://stylebootstrap.info/

      Hope that answers your question

      Grady

  41. Pingback: 向Web开发人员推荐12款优秀的 Twitter Bootstrap 组件和工具 | 编程·早晨

  42. Pingback: 向Web开发人员推荐12款优秀的 Twitter Bootstrap 组件和工具 « DrWang86's Wiki & More

  43. Pingback: 异元生活 » Blog Archive » 向Web开发人员推荐12款优秀的 Twitter Bootstrap 组件和工具

  44. Pingback: FWPolice | FireNews Week 1

  45. Pingback: Você já conhece o Twitter Bootstrap? Resources, links, e muito mais sobre o framework | João Vagner

  46. Pingback: 20 Awesome Resources for Twitter Bootstrap Lovers « Creative Digital Media

  47. Pingback: 向Web开发人员推荐12款优秀的组件和工具 | 顾大侠

  48. Pingback: The Best BootStrap Resources | lotshe

  49. Pingback: 38 Useful Resources for Twitter BootStrap Fans : Webdistortion

  50. Pingback: 前端框架利器-Bootstrap – CSSwang-CSS网站

  51. Pingback: 前端框架利器-Bootstrap

  52. Pingback: Figuring Out Bootstrap, Basic Tools and Tutorials | Template Monster Blog

  53. Pingback: 向前端开发人员推荐12款优秀的Twitter Bootstrap组件和工具 – CSSwang-CSS网站

  54. Pingback: Bootstrap: Ride on the Wave (Tuning Tips) - Designzzz

  55. Pingback: BootStrap资源 | 易老师课堂

  56. Pingback: » Keep an Eye on These Web Design Trends in 2013 - Dynam Host ICT Solution

  57. Pingback: Keep an Eye on These Web Design Trends in 2013 | Mobile Apps Now

  58. Pingback: Keep an Eye on These Web Design Trends in 2013 | Website Design Guide

  59. Pingback: Keep an Eye on These Web Design Trends in 2013

  60. Pingback: Keep an Eye on These Web Design Trends in 2013 | SEO Crazy

  61. Pingback: Keep an Eye on These Web Design Trends in 2013 - GEEKKENYA

  62. Pingback: Keep an Eye on These Web Design Trends in 2013 | Web Design Basic

  63. Pingback: Menilik Tren Desain Web di Tahun 2013 (Part 1)Festoville | 24 Carat Humans |

  64. Pingback: Keep an Eye on These Web Design Trends in 2013 | Web Design | Iconic Web Designs

  65. Pingback: Psy's Gangnam Style tops list of NZ video trends - Oppa Gangnam Style

  66. Pingback: Is this the next Gangnam Style? - Oppa Gangnam Style

  67. Pingback: iPhone Sales to Top 173 Million in 2013 - Lastest iPhone news

  68. Pingback: The Best BootStrap Resources - 华子博客 - 前端技术博客,一起研究关于前端的那点事

  69. Pingback: Keep an Eye on These Web Design Trends in 2013 - Typeyourcomment

  70. Pingback: The Best BootStrap Resources(优秀的BootStrap教程) | JSUED ·前端开发· 视觉设计· 交互设计· 用户体验

  71. Pingback: Tendenze di webdesign da tenere assolutamente d’occhio nel 2013 | Giovanni Fracasso

  72. Pingback: 向Web开发人员推荐12款优秀的 Twitter Bootstrap 组件和工具 @ dodo糯

  73. Pingback: The Best BootStrap Resources学习BootStrap的一个最好最全的资源 | JSUED ·前端开发· 视觉设计· 交互设计· 用户体验· 界面设计

  74. Pingback: 12款优秀的 Twitter Bootstrap 组件和工具 | 耕耘网络

  75. Pingback: Mesut Dağ » Arşiv » Bootstrap

  76. Pingback: 向Web开发人员推荐12款优秀的 Twitter Bootstrap 组件和工具 | LifeRefactor

  77. I bought a few months ago and I would like to know if I can re-download because I bought a new computer, thank you, my email is
    ricardoscarpim@hotmail.com

  78. Pingback: The Best BootStrap Resources | 觉

  79. Pingback: Get More web design with Bootstrap. Tools & Tuts Anton Art Network, Jamaica Website Design & Hosting Services, Graphic design and Marketing

  80. Pingback: FireWorks Newsletter 1 | dwh-uk.com : dwhukcom - Free Wordpress Themes, Tutorials and Resources

  81. Companies Previously used to Laugh at japan – However Right Now I actually laugh at them

  82. Pingback: Keep an Eye on These Web Design Trends in 2013 | Naperville Web Design and SEO

  83. Howdy! This is my first visit to your blog! We are a group of
    volunteers and starting a new initiative in a community in the same niche.
    Your blog provided us beneficial information to work on.

    You have done a extraordinary job!

  84. Answer: Yes, but ONLY on cracked (offline mode) servers.
    You will not be able to play on a premium server for paid members.

  85. Pingback: Обзор свежих материалов, март 2012 | Юрий Ветров об интерфейсах

  86. My partner and I absolutely love your blog and find the majority of your post’s to be just what I’m looking for.

    Would you offer guest writers to write content to suit your needs?
    I wouldn’t mind producing a post or elaborating on most of the subjects you write related to here. Again, awesome web site!

  87. What i don’t understood is actually how you’re no longer actually a lot more well-liked than you
    may be right now. You are so intelligent.
    You realize therefore significantly when it comes to this matter,
    produced me personally imagine it from so many numerous angles.
    Its like women and men don’t seem to be interested except it’s one thing to accomplish with Lady gaga!

    Your own stuffs outstanding. Always take care of it up!

  88. Pingback: 40 Recursos para combinar con nuestro desarrollo web basado en Bootstrap | AnIsGOtt Creativo

  89. I am regular visitor, how are you everybody?
    This article posted at this site is genuinely pleasant.

  90. Hello, i think that i saw you visited my weblog so i got
    here to go back the want?.I am trying to in finding issues to
    enhance my web site!I assume its good enough to use a few of your ideas!!

  91. This post is very interesting but it took me a long time
    to find it in google. I found it on 18 spot, you should focus on quality backlinks building, it will help you to increase traffic.
    And i know how to help you, just type in google – k2 seo tips and tricks

  92. My brother suggested I may like this web site. He was entirely right.
    This publish actually made my day. You can not imagine just how a
    lot time I had spent for this info! Thank
    you!

  93. I see a lot of interesting content on your website. You have
    to spend a lot of time writing, i know how to save you a lot of time, there is a tool that creates unique, SEO friendly articles
    in couple of minutes, just type in google – k2 unlimited content

  94. Finally i quit my day job, now i earn decent money on-line you should
    try too, just type in google – bluehand roulette
    system

  95. I really like your blog.. very nice colors & theme.

    Did you make this website yourself or did you hire someone to do it for you?
    Plz respond as I’m looking to design my own blog and would like to find
    out where u got this from. cheers

  96. These are perfect for sitting out on the porch and watching
    the waves crash towards the beach. Once they got hooked, the tobacco executives knew they’d have
    those kids as regular customers for about the next seventeen years.

    One is located in the main building complex, and the other in the North Tower boutique
    hotel, seven blocks north.

  97. Hello there, You have done a fantastic job. I’ll certainly digg it and
    personally recommend to my friends. I am confident they’ll be benefited from
    this site.

  98. Adore all of these steam showers

  99. Awesome steam showers, my family had a unit hooked up approximately five years ago and
    it could maybe do with replacing, would never get a dull or
    boring old typical kind of shower again

  100. That looks a lot like my own shower I purchased recently, extremely satisfied
    with it for someone upon the fence with regards to acquiring one, do it
    now, you will not regret it

Leave a Reply

Required fields are marked *.