Sponsorised links
15 April 2008
Yahoo! UI Library: Grids CSS
by sbrothier
& 14 others
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. The 4kb file provides over 1000 page layout combinations. Other features include:
* Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number.
* Supports easy customization of the width for fixed-width layouts.
* Flexible in response to user initiated font-size adjustments.
* Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (SEO).
* Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
* Layouts less than 100% are automatically centered.
* Accommodates IAB's Ad Unit Guidelines for common ad dimensions.
* Offers full A-grade browser support.
30 March 2008
Grid-Based Design: Six Creative Column Techniques | How-To | Smashing Magazine
by gregg
& 1 other
Grid systems bring visual structure and balance to site design. As a tool grids are useful for organizing and presenting information. Used properly, they can enhance the user experience by creating predictable patterns for users to follow. From designer’s point of view they allow for an organized methodology for planning systematic layouts.
Allan Jardine | Design
by gregg
& 4 others
Design is a suite of web-design and development assistive tools which can be utilised on any web-page. Encompassing utilities for grid layout, measurement and alignment, Design is a uniquely powerful JavaScript bookmarklet.
Sponsorised links
28 March 2008
27 March 2008
GridFox - The Grid Layout Firefox Extension » Eric Puidokas » Programming and Designing for the Web
by sbrothier
& 1 other
Enter GridFox. GridFox is a Firefox extension that overlays a grid on any website. 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.
Grid-Based Design: Six Creative Column Techniques | How-To | Smashing Magazine
by sbrothier
& 1 other
Grid systems bring visual structure and balance to site design. As a tool grids are useful for organizing and presenting information. Used properly, they can enhance the user experience by creating predictable patterns for users to follow. From designer’s point of view they allow for an organized methodology for planning systematic layouts.
29 January 2008
Allan Jardine | Design
by sbrothier
& 4 others
Design is a suite of web-design and development assistive tools which can be utilised on any web-page. Encompassing utilities for grid layout, measurement and alignment, Design is a uniquely powerful JavaScript bookmarklet.
09 October 2007
Grid Layout
by sbrothier
& 2 others
Khoi Vinh has been touting Grid Layouts for years. From his efforts there have been many, many solutions to helping people use Grid Layouts successfully. Thanks to a recent brilliant idea of Jon Hicks and code execution by Teevio, I present to you Grid Layout JS.
GridMaker Reboot - Article - andrewingram
by sbrothier
A few months ago I wrote GridMaker to aid in producing grid-based web design mock-ups in Photoshop (and later Fireworks). Whilst very primitive it was well-received and many have informed me how useful they’ve found it. At the same time it was clear that there were a number of issues so I went back to GridMaker and made a number of changes.
Grid Calculator
by sbrothier
& 7 others
(via)
Change the settings (by dragging the sliders, clicking on the bars, or editing the values) to calculate the overall width of your grid.
08 October 2007
Information Architects Japan » iA Notebook » Web Toolbox and the Ideal Website
by sbrothier
We are currently adapting iA’s website to meet the new requirements. We will base the new design on an idea that has haunted us since we began making websites. A website with a basic grid fully based on Fibonacci’s Golden Cut. After weeks of pushing and pulling here it is – the ideal website:
06 June 2007
Type that keeps the beat - (37signals)
by sbrothier
i’ve been delving in my typo/design books lately, and i learned a concept i didn’t know before the idea of type being “in phase” the idea is that for a column of type, you choose a line-height and if every line locks into that grid, the lines are “in phase”
16 May 2007
Design By Grid
by sbrothier
& 4 others
Grid based design for websites is becoming more popular, but the technique is till somewhat unknown.
Design By Grid is a resource to promote websites design with grids, and the tools and techniques used to make websites with grids.
10 April 2007
Andy Budd::Blogography: Layout Grid Bookmarklet
by sbrothier
& 3 others
(via)
Inspired by Khoi Vinh’s post about using a background image of a grid for layout, and a subsequent post over at Smiley Cat about the same thing, I decided to knock up a quick Photoshop style Layout Grid Bookmarklet
A List Apart: Articles: Setting Type on the Web to a Baseline Grid
by sbrothier
& 4 others
We web designers get excited about the littlest things. Our friends in the print world must get a kick out of watching us talk about finally being able to achieve layouts on the web that they’ve taken for granted for years. Let’s face it: it’s easier these days to embed a video on the web than it is to set type consistently or align elements to a universal grid.
30 November 2006
Amazon.com: Grid Systems in Graphic Design: Books: Josef Muller-Brockmann,Josef Muller - Brockmann
by sbrothier
From a professional for professionals, here is the definitive word on using grid systems in graphic design. Though Muller-Brockman first presented hi interpretation of grid in 1961, this text is still useful today for anyone working in the latest computer-assisted design. With examples on how to work correctly at a conceptual level and exact instructions for using all of the systems (8 to 32 fields), this guidebook provides a crystal-clear framework for problem-solving. Dimension: 81/2 x 113/4 inches, English & German Text, 357 b&w examples and illustrations.
12 December 2005
Subtraction: The Funniest Grid You Ever Saw
by sbrothier
(via)
An in-depth look at the complicated layout grid behind The Onion.
Five simple steps to designing grid systems - Part 4 : Journal : Mark Boulton | Information design
by sbrothier
& 2 others
Layout seems to be a hot topic at the moment, mostly prompted by the ALA redesign and the numerous discussions of the choice by Jason and the ALA team to go 1024 for a fixed width. I'm not going to go into my thoughts on ALA in too much depth here, there's been a lot of that already, but it seems like the right time to get this article out.
1
(18 marks)
