/ez-css

Create complex layouts with ez-css, a light, easy to use, CSS framework.

Primary LanguageHTML

ez-css

Create complex layouts with ez-css; a light, easy to use, CSS framework.

Screencast

  • This screencast shows how things work (warning: the audio auto-play)

Demos

Download

Tar http://github.com/thierryk/ez-css/tarball/master

Features

  • ez-css has a very small footprint (only 915 bytes for the version that uses the "_property" hack) for a fast download time
  • ez-css facilitates deep nesting (because it does not use descendant selectors)
  • ez-css allows you create multiple columns of any width, with or without a gutter
  • ez-css lets you apply any width you want to containers and gutters
  • ez-css is framework agnostic (it integrates well with any other style sheet)
  • ez-css prevents rounding issues and rounding errors
  • ez-css creates self-clearing containers (every box will contain floats)
  • ez-css prevents collapsing margin across all containers

Extras

Usage

From scratch:

1- Get the style sheet: https://web.archive.org/web/20100219211530/http://www.ez-css.org/downloads

2- Insert the style sheet or rules in your document's <head>:

<link rel="stylesheet"  media="screen,projection" href="/css/ez-min.css">

or

<style>
/**
 * all rules from ez-min.css go below
 */
 ...
<style>

3- Include the markup to create the layout you need:

4- Edit the class name of the main wrapper and set the width of your columns

5- Read these pages for more info:

Using a template:

1- Choose the layout of your choice: https://web.archive.org/web/20100219211530/http://www.ez-css.org/css_templates

2- Save the HTML file locally (it contains the styles sheet)

3- Insert your content and customize the page further

Contribute

Licensed under the MIT and BSD

Thanks, Thierry Koblentz