bootstrap_cover

Bootstrap Grid

author     date10/26/2012     date12 Comments

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
 

Premium HTML & Fireworks Resources

Get your hands on premium resources that will make your job much easier.