{Carrer web log}

CSS Specificity - Cheat Sheet

Tuesday, September 29, 2009 { 13 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.



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:

• Calculating a selector's specificity


• CSS Specificity: Things You Should Know


• CSS: Specificity Wars


• Everything You Need To Know About CSS Selector Specificity


• Link Specificity


• Specificity | HTML Dog


• Understanding Specificity

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:

• 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)