Showcase
Archives
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.
Layout grids have been used in print publishing long before the Web. They're an invisible foundation used to achieve visual cohesion in magazine and newspaper page design and layout.
Australian News Websites provide an excellent example of grid based design.
This month, Inspiration Charge covers some great stuff about Grid systems on design.
Grids are meant to free your design. In fact, the thing about restrictive design principles is that they generally force you to think outside the box.
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.
Ever wondered how all those slick "magazine" themes for WordPress and other platforms were created? Many, if not all, were designed using a CSS Grid Framework - at least in essence if not in actual fact. That is, you can use an existing CSS framework or build your own from scratch. While it's possible to design complex web page layouts without a framework, it's arguably an act in masochism. In this article you'll get an overview of the current batch of Frameworks and which you should choose to use.
Emastic is a CSS Framework which is: * Lightweight (compressed weight less then 4kb) * Personalized width of the page in (em,px,%) * Use of fixed and fluid columns in the grid. * Elastic Layout with "em"s
Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typographically pleasing grid layouts.
DIRTY GIRL is a 990px wide/centered/two-column theme based on the famous Sandbox Theme and the Blueprint CSS Grid Framework.
If you can open it in Firefox, you can put a grid on top of it. It's easy to customize, allowing you to create the exact grid you designed your layout around.
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.