Over a million developers have joined DZone.

Introduction to Emastic - CSS Framework

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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/

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}