Tag: Tools

#grid

A tool that inserts a lay­out grid in web pages, allows you to hold it in place, and tog­gle between dis­play­ing it in the fore­ground or background.

Fluid 960 Grid System

A jQuery based fluid grid sys­tem tem­plate based on Nathan Smith’s 960 Grid Sys­tem. Allows mul­ti­ple lay­outs includ­ing 12 or 16 fluid columns and 12 or 16 fixed columns.

Masonry

Masonry is a lay­out plu­gin for jQuery that arranges ele­ments ver­ti­cally then hor­i­zon­tally accord­ing to a grid.

Slammer 1.0

A new, robust ver­sion of Slam­mer that super­im­poses a cus­tomiz­able grid over any window.

Atrise Golden Section

Atrise Golden Sec­tion allows you to design using the golden sec­tion pro­por­tion visu­ally over your pre­ferred design software.

45+ CSS Grid Systems, Layout Generators and Tutorials

In this arti­cle trip­wire mag­a­zine presents a large col­lec­tion of CSS Grid Sys­tems, online gen­er­a­tors and tuto­r­ial on how to use these in your design.

Grid Calculator 1.3

A new ver­sion of the excel­lent Grid Cal­cu­la­tor has been released for the Mac. The main fea­ture of this upgrade is the abil­ity to cal­cu­late grids for web design.

nP: Grid Generator

An online grid gen­er­at­ing tool that pumps out the CSS source code as well as a down­load­able png file of your grid.

Grid System Generator

The grid sys­tem gen­er­a­tor will cre­ate fixed grid sys­tems in valid css/xhtml for rapid pro­to­typ­ing, devel­op­ment and production.

Grid Calculator 10% Discount

Spe­cial 10% dis­count on Grid Cal­cu­la­tor for TGS read­ers. Offer only valid this week: 4/27  —  5/1. Enter in the fol­low­ing code upon check­out : Baseline.

Variable Grid System

The vari­able grid sys­tem is a quick way to gen­er­ate an under­ly­ing CSS grid for your site. The CSS gen­er­ated file is based on the 960 Grid System.

Grid Calculator

A sim­ple tool that cal­cu­lates the over­all width of your grid by set­ting the font size, num­ber of columns, col­umn width and gutter width.

960 Grid System

An effort to stream­line web devel­op­ment work­flow by pro­vid­ing com­monly used dimen­sions, based on a width of 960 pix­els. There are two vari­ants: 12 and 16 columns, which can be used sep­a­rately or in tandem.

Graph Paper by Konigi

This graph paper is made for visual design­ers, inter­ac­tion design­ers, and infor­ma­tion archi­tects. You’ll find styles for wire­fram­ing, story board­ing, plot­ting val­ues and for drafting sitemaps.

About

Made popular by the International Typographic Style movement and pioneered by legends like Josef Müller-Brockmann and Wim Crouwel, the grid is the foundation of any solid design. The Grid System is an ever-growing resource where graphic designers can learn about grid systems, the golden ratio and baseline grids.

Created by Antonio Carusone, graphic designer and author of the design and typography blog AisleOne. Special thanks to Duane King for his help and wisdom.

If you want to say hi or for general inquiries, send an email to: hello@thegridsystem.org

Have an article, tool, template or news you want to submit? Send an email to: submit@thegridsystem.org

Subscribe

Want to stay updated with the most recent content? Subscribe below via email for daily updates or to the RSS feed.

Colophon