In this article we have 30 WordPress themes have been developed using a popular CSS Grid Frameworks such as the 960.gs, Blueprint, YUI2 and The Golden Grid.
Design & Build a Grid Based Web Design with CSS
Step by step walkthrough of the design and build process of a grid based WordPress theme. From the initial Photoshop concept, through development.
Web Design with Grids
People, including myself are building sites using grids. Now it seems to me that when you’re designing in a browser you want to be able to follow the grid’s principals all the way through the process.
Fluid 960 Grid System
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
Masonry is a layout plugin for jQuery that arranges elements vertically then horizontally according to a grid.
Evo4 CMS WordPress Theme
A WordPress theme based on a 4-column grid system.
Adaptive Grid System based on the Golden Section
A two column grid system based on Mark Boulton’s Adaptive Grid Systems article.
Making a Perfect Grid-aligned Website using Gridfox and Firebug
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
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.
Designing With Grid-Based Approach
Smashing Magazine takes a look at over 50 articles about grid-based designs and selected some of the most important and interesting facts.
Baseline
Baseline is a CSS typographic framework that makes it easy to develop a website with a pleasing grid and good typography and uses a “real” baseline grid as its foundation.
Taking the Grids on the Web
An article by Italian designer Andrea Peltrin on how to effectively use grids for web design.
nP: Grid Generator
An online grid generating tool that pumps out the CSS source code as well as a downloadable png file of your grid.
NineSixty (960 Grid System)
NineSixty is a Drupal theme that is based on the 960 Grid System.
DixonBaxi
UK based creative agency, DixonBaxi, has just launched a new site designed on a beautiful grid.
Auer
A site by Dan Auer, a graphic designer from North Carolina, that allows you to view the sites grid.
1Kb CSS Grid
A lightweight grid system tool that generates a simple, clean and small CSS framework
CSS with Vertical Rhythm
This tool will help you compute CSS that has a consistent vertical rhythm.
Baseline Rhythm Deciphered
When this occurs, your page is said to have vertical rhythm — the text is easier to read than text that doesn’t line up, as it feels more cohesive and less disjointed.
Grid System Generator
The grid system generator will create fixed grid systems in valid css/xhtml for rapid prototyping, development and production.
Variable Grid System
The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.
Boks
An AIR application that provides a User Interface for Blueprint CSS’s framework with control over grid configuration and baseline rhythm.
Cutting and Sewing Grid-Based Design
Discusses the steps taken when measuring and cutting a comp layed over a grid and turning that data into CSS.
Setting Web Type to a Baseline Grid
Another excellent article on the Dev Opera site covering baseline grids and how they can be applied to the web.
Grid Design Basics: Grids for Web Page Layouts
An article on the Dev Opera site on how to implement grids for the web through the use of CSS.
Fluid Grids
An experiment in creating a fluid grid system using CSS that resizes with the browser window.
The Golden Grid
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.
Building the Golden Grid
An article explaining the structure and uses of the Golden Grid, a CSS tool for grid based web sites.
Plumb
Plumb is a tool by Michael Daines for composing web layouts for use with the Blueprint CSS framework.
TypoGridder
A jQuery based tool that generates an image with a baseline grid based on the lineheight of an element.
LegiStyles
LegiStyles™ are a series of custom styles for the RSS reader NetNewsWire that focus on design and typography.
Grid Designer
A CSS tool used for creating scalable grids and calculating typographic settings and that generates CSS and XHTML templates.
Golden Ratio in Modern CSS
Harmony. A word that sounds so beautiful, like its own meaning. But how is it possible to achieve it in every place of our layout design? “Golden Ratio” is the answer.
Yahoo! UI Library CSS Grid Builder
A grid building tool as part of the Yahoo! UI Library that allows you to set the amount of columns and rows.
Typogridphy
Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts.
Grid Computing and Design
Khoi Vinh writes about establishing a rational and sustainable layout grid for his Subtraction site. He explains how he shoehorns previous articles into the new framework.
Grids In The Real World
It’s one thing to write about how useful and important grids are for a design, it’s another thing to utilize them in a real world project.
Grid-A-Licious
A WordPress theme that places Divs in chronological order on a special grid using a jQuery framework.
Yahoo! UI Library: Grids CSS
The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns.
Making Modular Layout Systems
A flexible CSS system by Jason Santa Maria for dealing with a variety of images sizes by using multiple CSS classes.
Setting Type on the Web to a Baseline Grid
The main principle of the baseline grid is that the bottom of every line of text (the baseline) falls on a vertical grid set in even increments all the way down the page.
Blueprint CSS Framework
Blueprint is a CSS framework that gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.
Compose to a Vertical Rhythm
On the Web, vertical rhythm is contributed to by three factors: font size, line height and margin or padding. All of these factors must calculated with care in order that the rhythm is maintained.
Incremental leading
In editorial design, there is a technique used for sidenotes and boxouts that aligns to the baseline grid, or vertical rhythm. It’s called incremental leading.
Baseline Rhythm Calculator
Generate a basic CSS stylesheet with the proper calculations for a consistent baseline.
