Comments on: Five simple steps to designing grid systems – Part 5

By: How To Develop Elastic Grid Layouts In CSS | Van SEO Design

How To Develop Elastic Grid Layouts In CSS | Van SEO Design — Thu, 16 Jun 2011 12:32:21 +0000

[...] When setting up different grids it’s usually easier to think in terms of absolute measurements. Ethan offered a simple formula for then converting those measurements into relative ones to create the flexible grid. [...]

By: How to Use Golden Section Proportions In Your Designs | Van SEO Design

How to Use Golden Section Proportions In Your Designs | Van SEO Design — Mon, 16 May 2011 12:31:40 +0000

[...] Boulton has an excellent post running you through constructing an adaptive gird this way as well as providing the css to make it happen. Mark links to a simple demo in his article [...]

By: Learning on Progress: Grid System « Xun and Interaction Design

Learning on Progress: Grid System « Xun and Interaction Design — Sat, 14 May 2011 23:44:44 +0000

[...] Grid systems for web design: Part 3 Filed under Knowledge ← Quotes from “Critical Thinking as a Powerful Learning Tool” Seeing some New Interactions with Mouse → LikeBe the first to like this post. [...]

By: Week 9 Summary « Lizlowenthal's Blog

Week 9 Summary « Lizlowenthal's Blog — Mon, 25 Oct 2010 14:26:28 +0000

[...] http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-5 [...]

By: zomigi.com » 70+ essential resources for creating liquid and elastic layouts

Mon, 25 Jan 2010 20:06:53 +0000

[...] Five simple steps to designing grid systems — Part 5 (on liquid grids, by Mark Boulton) [...]

By: Ultimate Guide To Grid-Based Web Design: Techniques and Tools | qface & sowmo sky

Wed, 18 Nov 2009 05:54:08 +0000

[...] grid-based design and walks your through designing a grid from scratch. Here are parts 2, 3, 4, and 5, and the preface to the [...]

By: Ultimate Guide To Grid-Based Web Design: Techniques and Tools | Graphic Design Pro

Sat, 14 Nov 2009 05:21:01 +0000

[...] grid-based design and walks your through designing a grid from scratch. Here are parts 2, 3, 4, and 5, and the preface to the [...]

By: Ultimate Guide To Grid-Based Web Design: Techniques and Tools « Tech7.Net

Ultimate Guide To Grid-Based Web Design: Techniques and Tools « Tech7.Net — Tue, 10 Nov 2009 21:13:38 +0000

[...] grid-based design and walks your through designing a grid from scratch. Here are parts 2, 3, 4, and 5, and the preface to the [...]

By: Erik Larsson

Erik Larsson — Fri, 03 Feb 2006 21:45:21 +0000

The 62.5% percent font-size is there in order to having managable numbers

“BODY {font-size:62.5%}

This takes 16px down to 10px, which apart from being less huge is a nice round number. From now on it?s easy to think in pixels but still set sizes in terms of ems: 1em is 10px, 0.8em is 8px, 1.6em is 16px, etc. “

from Clagnut:
http://www.clagnut.com/blog/348/

By: oz

oz — Mon, 16 Jan 2006 09:58:57 +0000

can you explain why the body has 62% font -size
cheers

By: Ryan

Ryan — Thu, 29 Dec 2005 11:10:19 +0000

It seems that a big hack is needed to to cope with the w3c box model (which in my opinion is completley wrong and IEs model should have been adopted).

You have to guestimate % amounts for your margin and padding ems so the boxes aren’t larger than you think. eg, c1 has to be 62% - (margin_ems + padding_ems). Am I missing something?

Shudder. When do you ever want the internal measurements of a box? In my experience at least, you want a box that fills X amount of space. And to calculate that you have to take account of all the other little bits and pieces in your css.

Cheers,
Ryan