{Carrer web log} ←

Blog prototyping with Emastic using the Golden Proportion

Tuesday, September 22, 2009 { 3 Comments }

Our goal is to build blog web layout using the Golden Proportion and Emastic – CSS Framework.

More details on the Golden Proportion you can find at:

• Golden ratio - Wikipedia


• Golden Ratio in modern CSS - CSS Globe


• Design and the Divine Proportion - Mark Boulton

I build 6 CSS Libraries(Frameworks) but Emastic is probably my favorite, because it is most likely one of the most complete CSS Frameworks.

Few things about Emastic.

• Emastic is built with ems to improve usability.


• There are three layout systems inside Emastic the basic built width em, one based on % and one based on positioning.


• Emastic supports fixed and fluid columns.


• The typography is based on baseline grid.

Let’s start prototyping!

First we need some measurements in order to start. We can take some modern layout 955 to 980 px . We know that the golden ratio is 1 : 1.618.

How can the golden ratio fit in Emastic?

If we take that the default width is 980px than will have: 606px and 374px columns. Closest to 606px in emastic is 600px(or 50em) and we add 600px to 371px which is equal to 971px(GP).

Ok,so we have one 50em(600px) column. What about the other 371px column?

No problem, we can always use the fluid column and the problem is solved.

So we need main column(container) with 971px or (917/12 = 80.916em). One column of 600px = (600/12 = 50em) in emastic is dl60 meaning div left 60em and for 371px column we need to use the fluid class.

<div class="main">

<div class="dl50"></div>

<div class="fluid"></div>

</div>

And this is it. We have blog template respecting the golden proportion.



Download the template (.zip)

3 Responses to “Blog prototyping with Emastic using the Golden Proportion”

1. //  Anonymous // 12/29/2009

   Keep working ,great job!  

2. //  is_null // 1/11/2010

   fantastic! thanks!  

3. //  Anonymous // 2/16/2010

   www.vcarrer.com; You saved my day again.  

Post a Comment

<< Home