Search results

One of my biggest problems with grids included with frameworks is that they offer little or no help in deciding proportional relationships between elements. Ratios can be an enormous help in determining these relationships, but they’re rarely written about in relation to web design. I want to change that.

As I’ve said plenty of times before, a well-chosen grid can do much, much more than align content. Our choice of grid can influence how we approach a design and it can change how we think about layout. That’s especially true of modular grids.

I’ve said over and over again that a well-chosen grid can do much, much more than align content. The choice of grid can influence how we approach a design, it can change how we think.

Compound grids offer exciting and often unconventional layout possibilities. Most importantly, they also encourage us to think differently about the choices we make when we’re designing layouts. If you’re familiar with the grid made ubiquitous by Bootstrap, a 3+4 compound grid is a great place to start learning about compound grids.

I’m not a framework user. I’ve never once used Bootstrap and I didn’t use 960gs or Blueprint before that. I can understand the benefits of using a framework or off-the-shelf templates, but they weren’t ever for me. Still, I wanted a simple set of layout modules I could call on for design projects, so I developed my own. I call them Layout Love.

I’ve been reading Jonathon Snook’s Scalable and Modular Architecture for CSS book this week. (It’s well written, practical and perfectly formatted for Kindle. I learned a lot and I’d highly recommend it.) In SMACSS, Jon recommends breaking down stylesheets into rules for:

Not since the turn of the century, when we largely shifted from using CSS positioning to floats, has CSS layout been so interesting. Here are three great reads from just today that are all worth your time:

• Strong Layout Systems by Eric Meyer

  Jeremy is at An Event Apart in Atlanta, and reports on Eric Meyer’s new talk, Strong Layout Systems in which Eric speaks about flexbox and grids, both new CSS modules that were created specifically to allow us to create layouts.

• Using Flexbox: Mixing Old and New for the Best Browser Support

  Chris Coyer Coyier (who deserves a medal for the work he does (and his name spelling correctly, sorry)) weaves together old and new flexbox syntaxes for better browser support. Anything lower than or equal to Internet Explorer 9 is still tricky though, so you’ll still need to get handy at designing around that problem.

• CSS3 Layout presentation at In Control Orlando

  Back at a conference, this time in Orlando, Zoe Mickley Gillenwater also spoke about CSS layout techniques including Grid Layout and Flexible Box Layout. Her slides are available on Slideshare, then check out her post as it’s full of examples and resources.

PS: If you can remember either The Noodle Incident or Position Is Everything, it’s past your bedtime.

I know some people swear by frameworks and I do understand why, although my work rarely needs them. I also appreciate why some people find the grids component in frameworks useful. But, to me, including a framework just for its grid has always seemed excessive. Particularly when there are other ways to develop reusable layout components which are far less generic, but no less flexible than a framework.

A generation of product and website designers has grown up with 12 or 16 column grids from Bootstrap-style frameworks. In those frameworks, columns are used mostly for aligning content. In my new design for Stuff & Nonsense, I wanted to go beyond that and use a compound grid to influence the entire design.

This week I’m taking a deep dive into how I approach projects, using a recent design for Zombie Hunt as an example. Yesterday, I wrote about designing dark and light themes.. Today is all about the choices I make when designing a layout grid.

Changingman, a liquid three column CSS layout with a fixed positioned and width centre column, released under a Creative Commons Attribution 2.0 license. (This entry was originally posted on 23rd November 2005 and has been updated in 2009.)

Flights are booked and visas are in hand^* and I’m getting very excited, because in only a few weeks, Sue and I are heading back to Australia to join Espen, Jina and Una, as well as our friends in Perth at the very first Mixin conference.