Tags: grid

Layout in Flipboard for Web and Windows — Flipboard Engineering

A fascinating look at how Flipboard combines art direction and algorithms to generate layouts.

The State Of Responsive Web Design on Smashing Mobile

A comprehensive look at the current state of things in the world of responsive design, with a look to possible future APIs.

Text-align: Justify and RWD

Here’s a nifty trick: using text-align: justify to get a nice responsive grid layout.

On Responsive Layout and Grids by David Bushell

I agree with David: most pre-rolled grid “solutions” are way too complicated. And in any case, applying a pre-existing grid framework for a new project seems kind of like applying a pre-existing colour palette.

As David points out, it really needn’t be so complicated.

A New Canon | Journal | The Personal Disquiet of Mark Boulton

An excerpt from Mark’s forthcoming book, which promises to be magnificent.

Rhythm And Proportion In Grids And Type - Vanseo Design

A really nice piece on scale, ratio and rhythms in web design.

Grids, Design Guidelines, Broken Rules, and the Streets of New York City (Global Moxie)

Josh writes about the importance of using rules and systems as tools without being bound by them.

Toast | A simple CSS framework

This is interesting, not because it’s yet another grid framework (which I never use anyway) but because of the way it’s doing layout: with border-box and inline-block, rather than floats. If you’re only serving up your layout styles to browsers that support media queries (which would discount older versions of IE anyway), this could make a lot of sense.

LukeW | Multi-Device Layout Patterns

Luke catalogues layout patterns in responsive designs.

» Of Grids, Class Names, Responsiveness, and Lifecycles Bits Pushed Around

The thought process behind trying to abstract class names that are used for layout in responsive designs (and can therefore refer to different widths depending on the context). Here, the author settles on letters. In the past, I’ve approached the same kind of abstraction by using latinised names.

Responsive Design Essentials: Look Great on any Device - Facebook developers

The process behind the mobile-first responsive design of audiovroom.com.

Responsive Advertising| Mark Boulton

A great in-depth look at the tricky problem of advertising in responsive design from Mark.

ExtendNY - New York City Extended

Sheer brilliance: taking the street grid of Manhattan and extending it to cover the entire world. For the record, I live near the intersection of east 11,303rd avenue and 63,475th street.

You Say Responsive, I Say Adaptive | Sparkbox

On the importance of using a fluid grid in responsive design.

Foundation: Rapid Prototyping and Building Framework from ZURB

A framework for banging out ready-made responsive designs.

First Responder | Rob Weychert

Rob documents how he approached his first responsive design.

Caleb Ogden

The process behind a responsive realignment …and the end result is very nice indeed.

Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit

A set of default styles to get started on a mobile-first responsive design.

Mark Boulton on layouts and grid systems | Interview | .net magazine

In this interview Mark discusses the “content out” rather than “canvas in” thinking that informs his new canon.

Golden Grid System

I’m usually not a fan of CSS “frameworks” but I like the thinking that’s gone into this fluid, responsive system. I particularly like this advice:

Take it apart, steal the parts that you like, and adapt them to your own way of working.

Rethinking CSS Grids| Mark Boulton

Some great, considered thoughts from Mark on how CSS Grid Layout could work as part of a larger tradition in design.

The Goldilocks Approach to Responsive Web Design

A nice little demo of the “content out” approach to responsive design.

The 1140px CSS Grid System/Framework · Fluid down to mobile

A fluid grid that linearises at smaller viewport widths.

A New Visual Design Language for BBC Online — Paul Robert Lloyd

Paul takes an in-depth look at the new BBC design guidelines.

A List Apart: Articles: Fluid Grids

Superb article by Ethan on calculating percentages for liquid layouts. Read it. Do it.

gridr buildrrr

A handy tool for planning grids. Limited, alas, to pixels.

The Grid System

The Grid System is a resource for all designers to learn about the benefits of using grid systems, golden ratios and baseline grids.

Five Simple Steps | Books

Mark's book is almost ready. Really. It's got its own site and everything so it must be true.

web.without.words

Weekly gallery of popular websites reconstructed by removing all words and images, replacing them with blocks.

minimalsites | minimal design css gallery

A gallery of minimally designed websites. There are some lovely grid/type-based designs on view here.

On Nails, Lipstick, and Redesigns — Unstoppable Robot Ninja

Ethan has redesigned. It's shiny and beautifully proportioned.

A new design | Clagnut § Blogging · Information design · Clagnut news

Richard has launched the redesign he's had bubbling away for a while now. 'Tis lovely and gridilicous.

Grid Calculator

A handy tool for calculating grid and gutter widths although you'll still have to some calculating to get the figures to work in percentages (assuming you're designing for the Web).

960 Grid System

Here's another CSS framework for grids. It could prove to be very useful for wireframing.

kropp

Good typography + stylish grid + liquid layout = WIN!

Design View / Andy Rutledge - quiet structure

A nice overview of avoiding clutter in web design. It's not just about whitespace; the number of edges and gradients can also add up to an undifferentiated design.

Syncotype Your Baselines — RobGoodlatte.com

Here's a handy little bookmarklet that overlays a grid on a web page—very handy for tweaking vertical rhythm and aligning to a baseline.

Blueprint: A CSS Framework

Pulling together a bunch of CSS tricks from a range of sources: reseting, baseline typography and grids (fixed width, unfortunately).

International Chindogu Society

In the same way that moving a mouse on a desk corresponds to moving a cursor on a screen, you can now, using a simple grid, easily direct people to the area of the back you want scratched.

Mark Boulton Design : +44 (0)845 603 2399

Mark has launched his business site. Lovely grids and typography, as you'd expect.

Digital Web Magazine - Redesigning the ExpressionEngine Site

A really nice article by Jesse Bennett-Chamberlain detailing the process behind a site design.

Subtraction: Oh Yeeaahh!

Khoi has posted the slides from his grids workshop online. Download and learn.

YUI: CSS Grid Builder

A handy tool for creating grids using Yahoo's CSS.

A List Apart: Articles: Thinking Outside the Grid

Molly has written a great article about CSS and urban planning. The ensuing comments are sometimes thought-provoking, but mostly just plain antfucking.

Mark Boulton | Information design | Journal | Five simple steps to designing grid systems - Preface

Mark is beginning a new five part series similar to his one on typography. If you haven't done so yet, subscribe to his RSS feed.