Create complex layouts with ez-css, a light, easy to use, CSS framework.
Failed to load latest commit information.
css Removed the "." from the clearfix rule May 25, 2012
html Some formatting Jan 19, 2010
licenses Initial commit Jan 4, 2010
starters Fixed a typo in a comment Jun 19, 2011
.gitignore Add .idea to the list Aug 11, 2014 Fixed typo around the BSD_License Apr 8, 2012


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


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





  • 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



From scratch:

1- Get the style sheet:

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

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


 * all rules from ez-min.css go below

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:

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

3- Insert your content and customize the page further


Licensed under the MIT and BSD

Thanks, Thierry Koblentz