Bootstrap Grid

bootstrap_cover

Twitter Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other interface components, as well as optional JavaScript extensions. One of the big feature of Bootstrap is the grid system. Being one of the popular, the Bootstrap grid comes with both static and responsive grid system that allows it to be used in any form of web-development. However designing for Bootstrap using Fireworks has become a bit worry some. There are numerous Bootstrap UI kits available on the web, but none come with the grid system. We wanted to change that. Today we are happy to bring you Bootstrap Grid System for Adobe Fireworks.

Grid features:

  1. Based on the 1170 Bootstrap responsive grid.
  2. Comes with 3, 4, 6 and 12 columns option.
  3. Comes with 24px line-height system
  4. Comes with Eye-Strain reducer.

Specific sizes:

  1. Overall .fw.png width: 1400 px.
  2. Eye-Strain reducer (equates to the container class in Bootstrap): 1230 px.
  3. Overall grid size: 1170 px.
  4. Gutter size: 30 px.
  5. 12 column grid size: 70 px.
  6. 6 column grid size: 170 px.
  7. 4 column grid size: 270 px.
  8. 3 column grid size: 370 px.

Requested Updates:

  • Standard bootstrap grid system
  • Tutorial on how to use grid system

About Sazzad

Hey there. I’m Sazzad, a User Experience Developer from New York City. I work with many talented folks who find ways of re-inventing the way users look at the web. I am the founder of the FWPolice and co-founder of Fleech Media. You can follow me on Twitter by the handle @IamShipon1988 .