Making Modular Layout Systems For all of the advantages the web has with distribution of content, I’ve always lamented the handiness of the WYSIWYG design tools from the print publishing world. When I set out to redesign my personal website, I wanted to have some of the same abilities that those tools have, laying out pages how I saw fit, and that meant a flexible system for dealing with imagery. Building on some of the CSS that Eric Meyer employed a few years back on the A List Apart design, I created a set of classes to use together to achieve the variety I was after. Employing multiple classes isn’t a new technique, but most examples aren’t coming at this from strictly editorial and visual perspectives; I wanted to have options to vary my layouts depending on content. If you want to skip ahead, you can view the example first.
Griddy: Simple Grid Overlay Plugin for JQuery Often when I’m designing layouts, I know I want to create x number of columns that are spaced y pixels apart. Usually I do the math in my head or if I’m feeling super lazy, I pull out my calculator. While playing with grid overlays earlier today, I decided to make a plugin that automatically calculates column width and row height based on the number of rows or columns present and overlays an appropriately sized grid. Griddy is a small JQuery plugin thats creates a simple, customizable grid overlay on top of any element. It can also calculate row heights and column widths automatically based on the number of rows/columns and gutter space. Initially the plugin was pretty limited and did only what I needed to, however after deciding to make it public I added a few options, including:
css columns with borders - onderhond blog - onderhond.com
Grid systems for web design: Part 1
Ratios and complex grid systems – July 16th, 2005 – In part one of this Simple Steps series I talked about how to use a simple ratio, that of the paper size you are using, to create a symmetrical grid on which to create your designs. This, the second part in the series, will deal with other ratios and how they can be combined to create more complex grid systems. I’ve talked a few times about using the Golden, or ‘Divine’, Section in the grid systems you design. So, before you continue I suggest you read the background in this article and my article in Design in Flight. For those who don’t want fork out your hard earned cash on the DiF article, I’ll summarise:
Five simple steps to designing grid systems - Part 4 : Journal : Mark Boulton | Information design