Showcase
Archives
For those just getting started or interested in learning it, I give you six of my favorite tips and tricks for designing with the 960 grid system.
Karl Gerstner designed this grid for his work on the CAPITAL magazine. This is actually a six-column grid with a four-column grid superimposed. Karl suggests that this grid requires considerable study, and a designer would have to spend a great deal of time working with it before he could make free use of it in a creative sense.
A highly flexible and human-readable system for layout manipulation from Jason Santa Maria.
When you take a set of intersecting vertical, and horizontal axis, and slam them together in some form, you usually end up with a grid. If you don’t, you’re doing something terribly wrong.
Interview with Kyle Blue (former Walker Design Fellow) about Dwell's (somewhat) recent redesign.
Use the power of grid based designs to create a structured and professional page layout in InDesign, which can then be populated with a range of information to produce a polished CV or Resume.
This tutorial will explain the basics of this framework so you can start developing with 960 pretty fast.
CSS grid systems have been creating a bit of a stir recently, so in this tutorial I'll show you how simple and easy it is to utilise the Blueprint grid system when coding up your web pages.
Since tables were co-opted for layout purposes, columns have become key to many Web design layouts, and this thinking continued when CSS took over from tables (at least in the minds of savvy designers) for Web-page presentation. However, other fields of layout design don’t think in arbitrary columns, they work with grids, and these form the basis for the structure of page designs. This article will provide the lowdown on grid design for Web pages.
This article covers the basics of baseline grids defined grid areas within which content is placed and how they can be applied effectively to the web medium.
As I observe other liquid based websites, I see two commonly used techniques on displaying columns, the fixed columns and the liquid columns. There are drawbacks to both that I would like to point out, and later would like to pitch my solution.
I'm a minimalist designer so I believe the grid is one of the most important elements of web design. There are many articles and resources on the web, I've chosen to pick through them all and compile my best resources/tools all in one fell swoop. Keep in mind, there are plenty of list posts out there but these are my go to grid resources.
The Golden Grid is a web grid system. It 's a product of the search for the perfect modern grid system. It 's meant to be a CSS tool for grid based web sites.
The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the Mootools JavaScript library. The idea for building these templates was inspired by Andy Clarke, author of Transcending CSS, who advocates a content-out approach to rapid interactive prototyping, crediting Jason Santa Maria with the grey box method.
Chris Coyier plays around with unitless line height and getting things to line up according to a strict horizontal and vertical grid.