Introduction to Emastic - CSS Framework
Join the DZone community and get the full member experience.Join For Free
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.
- 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
<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).
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/
Opinions expressed by DZone contributors are their own.