Introduction to Emastic - CSS Framework

DZone 's Guide to

Introduction to Emastic - CSS Framework

· Web Dev Zone ·
Free Resource

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


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


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/


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}