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
-
there is a version for rapid prototyping (0.413 kb): https://web.archive.org/web/20100219211530/http://www.ez-css.org/rapid_prototyping
-
there is also a set of 5 templates ("ready-made" files called "starters"): https://web.archive.org/web/20100219211530/http://www.ez-css.org/css_templates
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:
- https://web.archive.org/web/20100219211530/http://www.ez-css.org/layouts
- https://web.archive.org/web/20100219211530/http://www.ez-css.org/rapid_prototyping
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
-
Develop more layouts or add to the style sheets
-
git clone git://github.com/thierryk/ez-css.git
-
Report bugs at https://web.archive.org/web/20100219211530/http://www.ez-css.org/contact-us
-
Open issues at http://github.com/thierryk/ez-css/issues
Licensed under the MIT and BSD
Thanks, Thierry Koblentz