{Carrer web log}


Blog about web design & development

CSS Specificity - Cheat Sheet

Tuesday, September 29, 2009 { 14 Comments }

One of most common difficulties with CSS is determining what CSS rule will be applied on the page. That was my nightmare when I started with CSS.

But actually is not so hard to understand how these rules are applied and the order of CSS Specificity.

I created CSS Cheat Sheet that I hope it can help you understand CSS Specificity better.

CSS  Specificity - Cheat Sheet

Download:

CSS Specificity - Cheat Sheet(.png)

CSS Specificity - Cheat Sheet(.pdf)

CSS Specificity - Cheat Sheet(.xls)

CSS Specificity - Cheat Sheet(.ods)


There are many articles talking about this issue, here are some:

Cheers!


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)


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
 

§Archives <<<

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License