What's the fuss?

It is light (1kb), flexible, browser-friendly and easy to use!

is a different kind of CSS framework. Authors are not bound to a “grid”. Plus, columns and gutters can be of any width.

works by forcing the final element in the HTML flow to become a block formatting context (we use “hasLayout” for Internet Explorer lt 8). If this makes no sense to you don't worry, because using is an easy 4-step process:

  1. Insert
  2. Copy
  3. Paste
  4. Edit

What are the advantages?

  • does not use descendant selectors, hence it facilitates deep nesting. This means that repeating steps #2 and #3 above (inserting modules inside modules) can produce complex layouts without the need to override the styling of nested containers.
  • lets you create multiple columns of any width, with or without gutters of any width.
  • The style sheet has such a small footprint that it can be integrated into any existing style sheet (or in a style element), which should make this solution “framework agnostic”.
  • Each module or layout contains a width-less container which prevents rounding issues (e.g., 1/3, 1/3, 1/3) or rounding errors (e.g. 1/2, 1/2 in Internet Explorer lt 7). The reason for this is that this element is fluid. This makes it possible to edit the width, border or padding values of one column without having to change the styling of its sibbling(s).
  • creates self-clearing containers which means every box will contain floats.

Did you say Rapid Prototyping?

relies on very light HTML markup and CSS rules, but we've pushed the envelope even further for those who need fast results without increasing the risk of breakage. Our "Quick & Dirty" solution is less semantic than the regular method, but it relies on fewer hooks in the markup, fewer rules in the style sheet and at the same time creates a width-less block formatting context without the caveats that come with using DIVs. Check it out!


Develop more layouts or add to the style sheets.

git clone git://github.com/thierryk/ez-css.git