Introduction to Emastic - CSS Framework

Emastic is em based CSS Grid Framework. The layout is based on em that gives extra elasticity. See more at: Elastic layout with CSS. Emastic main width can be in em, px or %

The columns(fixed or fluid) are in em from 1 to 75 and they can be floated left or right. Emastic weight only 4 kb.

Emastic Contains

• reset.css - based on Eric Meyer reset.css
• grid.css - the core CSS (building all the grids)
• type.css - basic css formatting
• ie.css - resolve some IE bugs
• gadgets.css - plugin

OR:

<link  href="reset.css" rel="stylesheet" type="text/css">
<link  href="grid.css" rel="stylesheet" type="text/css">
<link  href="type.css" rel="stylesheet"  type="text/css">
<!--[if IE]><link  href="ie.css" type="text/css" rel="stylesheet"><![endif]-->

How to use emastic

It’s very easy! 10 + 20 + 50 = 80 is this clear? Than you won’t have problems with emastic’s grids.

Lets say that main grid is 80em end we want 3 columns, the first 10em the second 20em and the third 50em.

<div class="dl10"> 10 em </div>
<div class="dl20"> 20 em </div>
<div class="dl50"> 50 em </div>
<br class="clear" />

This is it!

But how to use ems? By default 1em is 16px(All the browsers).

OR

body {

Font-size:100% /* 1em is 16px */

Font-size:75%  /* 1em is 12px default of Emastic */

Font-size:50%  /* 1em is 8px */

}

So if, 1em is 12 px

Then 10em is 120px

Then 20em is 240px ...

Then 80em is 960px

You can find more: http://code.google.com/p/emastic/