{Carrer web log}


Blog about web design & development

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:
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.
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 Anonymous // 12/29/2009

    Keep working ,great job!  

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

    fantastic! thanks!  

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

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

Post a Comment

<< Home

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons
Photoshop Wireframing Kit Ad
 

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License