The Grid System » layout

#grid

Antonio Carusone — Wed, 03 Mar 2010 03:08:40 +0000

A tool that inserts a layout grid in web pages, allows you to hold it in place, and toggle between displaying it in the foreground or background.

Eternal Network

Antonio Carusone — Wed, 06 Jan 2010 15:42:34 +0000

Lovely minimal grid based site design that’s reminiscent of old computer paper.

Fluid 960 Grid System

Antonio Carusone — Wed, 06 Jan 2010 15:40:55 +0000

A jQuery based fluid grid system template based on Nathan Smith’s 960 Grid System. Allows multiple layouts including 12 or 16 fluid columns and 12 or 16 fixed columns.

Masonry

Antonio Carusone — Wed, 06 Jan 2010 15:36:49 +0000

Masonry is a layout plugin for jQuery that arranges elements vertically then horizontally according to a grid.

Slammer 1.0

Antonio Carusone — Mon, 23 Nov 2009 04:00:05 +0000

A new, robust version of Slammer that superimposes a customizable grid over any window.

Create a Grid Based Resume

Antonio Carusone — Mon, 23 Nov 2009 03:52:08 +0000

Use the power of grid based designs to create a structured and professional page layout in InDesign.

Evo4 CMS Wordpress Theme

Antonio Carusone — Thu, 08 Oct 2009 18:46:22 +0000

A Wordpress theme based on a 4-column grid system.

Rule of Thirds

Antonio Carusone — Thu, 08 Oct 2009 18:44:03 +0000

A Wikipedia entry that defines the Rule of Thirds and how it should be applied.

Adaptive Grid System based on the Golden Section

Antonio Carusone — Thu, 08 Oct 2009 18:40:51 +0000

A two column grid system based on Mark Boulton’s Adaptive Grid Systems article.

Making a Perfect Grid-aligned Website using Gridfox and Firebug

Antonio Carusone — Thu, 08 Oct 2009 18:36:59 +0000

Have you ever sliced a layout, only for it not to be grid-aligned once it’s scripted?

45+ CSS Grid Systems, Layout Generators and Tutorials

Antonio Carusone — Fri, 18 Sep 2009 13:59:30 +0000

In this article tripwire magazine presents a large collection of CSS Grid Systems, online generators and tutorial on how to use these in your design.

From Golden Mean to “Rule of Thirds”

Antonio Carusone — Mon, 24 Aug 2009 19:58:32 +0000

An article by Garr Reynolds that explains the basic technique of the Rule of Thirds and how it relates to the Golden Mean or Golden Section.

Process: Airside by Airside

Antonio Carusone — Tue, 30 Jun 2009 04:39:38 +0000

Airside explains it’s process of creating their book Airside By Airside. The article features a section on the grid system used for the layout.

Quiet Structure

Antonio Carusone — Mon, 04 May 2009 15:31:47 +0000

Quiet structure is achieved when you de–emphasize the structural elements and bring a rhythmical consistency to the layout.

Columns & Grids

Antonio Carusone — Mon, 20 Apr 2009 18:35:40 +0000

Article on Mezzoblue exploring the different column options for grid based designs.

Cutting and Sewing Grid-Based Design

Antonio Carusone — Tue, 07 Apr 2009 14:35:31 +0000

Discusses the steps taken when measuring and cutting a comp layed over a grid and turning that data into CSS.

Layout Essentials: 100 Design Principles for Using Grids

Antonio Carusone — Mon, 23 Mar 2009 16:59:29 +0000

This book outlines and demonstrate basic layout/grid guidelines and rules through 100 entries.

Grid Design Basics: Grids for Web Page Layouts

Antonio Carusone — Wed, 11 Mar 2009 14:15:01 +0000

An article on the Dev Opera site on how to implement grids for the web through the use of CSS.

Plumb

Antonio Carusone — Thu, 12 Feb 2009 15:56:40 +0000

Plumb is a tool by Michael Daines for composing web layouts for use with the Blueprint CSS framework.

Making and Breaking the Grid

Antonio Carusone — Mon, 05 Jan 2009 16:43:57 +0000

A layout design workshop that assumes that to effectively break the rules of grid-based design one must first understand those rules and see them applied to real-world projects.