Export to GitHub

emastic - Tutorial.wiki


Tutorial- emastic

Instalation

Put the following css files into your page: ```

```

CSS Files

  • 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 (new) - plugin

How emastic works?

The grid sistem is based on ems elastic layout.

The grid sistem is not limited only on ems. You can use px or % for the page width. (e.g: width:xx em or width:xx px or width:xx %).

The grid is made from blocks from 5em to 75em. If the body tag font-size is 100% (1em = 16px). If the body tag font-size is 75% (1em = 12px). This is default!

Take a look at the spreadsheet.

I added blocks of 1 and 2 ems for fine tuning.

There is also one block widh 100% and one for fluid columns. The block can be floated left or right. And that is it!

legend

All css classes have min. names in order to preserve space.

  • dl - div left
  • dr - div right
  • ml - margin left
  • mr - margin right
  • hp - hundred percent

(e.g dl20 = div floated left, with width of 20em(240px)

Some code

The basic container is "main" class, by default is 70em(840px).

Inside the main container we can put 1,2,3,4 or more columns.

If we need 3 columns we can do:

  • 20em + 20em + 30em = 70em or

  • 10em + 30em + 30em = 70em or

  • 50em + 10em + 10em = 70em ...

```

20 em 20 em 30 em 10 em 30 em 30 em 50 em 10 em 10 em

```

What if the main container is 80%?

Then we use fluid columns. If we need 3 columns layout we will use 1 fluid and 2 fixed columns.

```

20 em 20 em fluid

```

Just use them like lego blocks!

You can also use Div inside Div.

```

20 em 10 em 10 em

```

OR:

```

20 em 20 em (The structure won't break)

```