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:
This article is for web designers and front-end web developers who are interested in grid-based layout systems but are at a loss on how to decipher them. 04.Mar.2012 A PDF written by Andrew Maher to help you design grids and to give you the resources to delve further into the grid world. Mark Boulton pulls together some of his thoughts and concerns regarding CSS grids and how they could (or, maybe, should) be created. A folding grid for responsive design. An HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.
There are things css guys don't like. Equal height columns and rounded corners are two industry favorites. Especially when the design combines rounded corners together with borders. css columns with borders - onderhond blog - onderhond.com
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:
– August 30th, 2005 – 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. So, fixed width grid design for the web. What is it, how do we do it and how do we implement it? For the purposes of this article, I’m going to be focussing on the theory of creating the grid rather than the implementation. Five simple steps to designing grid systems - Part 4 : Journal : Mark Boulton | Information design