Create complex layouts with ez-css; a light, easy to use, CSS framework.
- This screencast shows how things work (warning: the audio auto-play)
Tar http://github.com/thierryk/ez-css/tarball/master
- 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
-
there is a version for rapid prototyping (0.413 kb): http://www.ez-css.org/rapid_prototyping
-
there is also a set of 5 templates ("ready-made" files called "starters"): http://www.ez-css.org/css_templates
1- Get the style sheet: 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:
1- Choose the layout of your choice: 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
-
Develop more layouts or add to the style sheets
-
git clone git://github.com/thierryk/ez-css.git
-
Report bugs at http://ez-css.org/contact-us
-
Open issues at http://github.com/thierryk/ez-css/issues
Thanks, Thierry Koblentz
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent