Over a million developers have joined DZone.

Introduction to Emastic - CSS Framework

DZone's Guide to

Introduction to Emastic - CSS Framework

· Web Dev Zone
Free Resource

Add user login and MFA to your next project in minutes. Create a free Okta developer account, drop in one of our SDKs to your application and get back to building.

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/

Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!


Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}