Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Introduction to Emastic - CSS Framework

DZone's Guide to

Introduction to Emastic - CSS Framework

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

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/

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}