The Modular Grid

What is it?

The Modular Grid provides a set of grid overlays in web pages so web authors can better implement translations of design comps to web pages. The user is able to create baseline, or leading, grids, column grids, and modular (simultaneous baseline and column) grids. Some key options include changing baseline distances, altering column and gutter widths, and updating baseline and column colors.

Install

The Modular Grid is in beta, so installation is manual. Read instructions here. Once released, the extension will be available via the Chrome Web Store or Chrome’s Extensions page, with new features available in beta releases via GitHub.

Examples

The Modular Grid can render basic grids. For example:

A Leading Grid

[A screen shot of a leading grid.]

A Column Grid

[A screen shot of a column grid.]

A Modular Grid

[A screen shot of a modular grid, consisting of the combination of a leading and column grid.]

A Single-Pixel Grid

[A screen shot of a box-like grid consisting of 1-pixel columns where gutter width is equal to vertical distance.]

The Options Page

[A screen schot of The Modular Grid’s options page.]

Contributing

As an open source project, The Modular Grid is open to contributions from everyone, and you don’t even need to be a web programmer. For example, we need German, French, Spanish, and Italian translations of The Modular Grid. If you are a web programmer, The Modular Grid uses HTML, CSS, Sass, core JavaScript, and Gulp. All open issues are filed on GitHub.

Feature Requests

Suggestions, feature requests, and bugs may be submitted via GitHub.

Contributors

  • Tova Borowski
  • Saman Tehrani
  • Brendan Tronconi
  • Roy Vanegas