grid
Get flash to fully experience Pearltrees
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
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.