├── .gitignore ├── README.md ├── css ├── ez-filters-min.css ├── ez-filters.css ├── ez-min.css ├── ez-plug-filters-min.css ├── ez-plug-filters.css ├── ez-plug-min.css ├── ez-plug.css ├── ez-proto-min.css ├── ez-proto.css └── ez.css ├── html ├── div │ ├── layout_1.txt │ ├── layout_2.txt │ ├── layout_3.txt │ ├── module_2a.txt │ ├── module_2b.txt │ ├── module_3a.txt │ ├── module_3b.txt │ ├── module_4a.txt │ ├── module_4b.txt │ └── plain_box.txt └── fieldset │ ├── layout_1.txt │ ├── layout_2.txt │ ├── layout_3.txt │ ├── module_2a.txt │ ├── module_2b.txt │ ├── module_3a.txt │ ├── module_3b.txt │ ├── module_4a.txt │ ├── module_4b.txt │ └── plain_box.txt ├── licenses ├── BSD_License.txt └── MIT_License.txt └── starters ├── starter-2A.html ├── starter-2B.html ├── starter-2C.html ├── starter-3A.html └── starter-3B.html /.gitignore: -------------------------------------------------------------------------------- 1 | .idea -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ez-css 2 | Create complex layouts with ez-css; a light, easy to use, CSS framework. 3 | 4 | ## Screencast 5 | 6 | * This [screencast](https://web.archive.org/web/20100219211530/http://www.ez-css.org/screencast) shows how things work (_warning_: the audio auto-play) 7 | 8 | ## Demos 9 | 10 | * [http://www.ez-css.org/demo_page](https://web.archive.org/web/20100219211530/http://www.ez-css.org/demo_page) 11 | * [http://www.ez-css.org/demo-proto_page](https://web.archive.org/web/20100219211530/http://www.ez-css.org/demo-proto_page) 12 | 13 | ## Download 14 | 15 | Tar http://github.com/thierryk/ez-css/tarball/master 16 | 17 | ## Features 18 | 19 | * ez-css has a very small footprint (only 915 bytes for the version that uses the "_property" hack) for a fast download time 20 | * ez-css facilitates deep nesting (because it does not use descendant selectors) 21 | * ez-css allows you create multiple columns of any width, with or without a gutter 22 | * ez-css lets you apply any width you want to containers and gutters 23 | * ez-css is framework agnostic (it integrates well with any other style sheet) 24 | * ez-css prevents rounding issues and rounding errors 25 | * ez-css creates self-clearing containers (every box will contain floats) 26 | * ez-css prevents collapsing margin across all containers 27 | 28 | ### Extras 29 | 30 | * there is a version for rapid prototyping (0.413 kb): [https://web.archive.org/web/20100219211530/http://www.ez-css.org/rapid_prototyping](http://www.ez-css.org/rapid_prototyping) 31 | 32 | * 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](https://web.archive.org/web/20100219211530/http://www.ez-css.org/css_templates) 33 | 34 | ## Usage 35 | 36 | ### From scratch: 37 | 38 | 1- Get the style sheet: [https://web.archive.org/web/20100219211530/http://www.ez-css.org/downloads](http://www.ez-css.org/downloads) 39 | 40 | 2- Insert the style sheet or rules in your document's <head>: 41 | 42 | 43 | 44 | or 45 | 46 | 154 | 155 | 156 | 157 |

158 |

159 |

#header

160 |

161 |

162 |

163 |

164 |

1: #article

165 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis facilisis viverra. Curabitur luctus, nibh ac rhoncus ultrices, turpis mauris mattis dui, quis pharetra odio orci vitae risus. Nunc ultricies gravida facilisis. Pellentesque ante mauris, blandit id condimentum non, tristique non urna. Integer nec erat eros. Curabitur ullamcorper semper est, ut egestas est bibendum in. Nulla scelerisque diam eget sapien sollicitudin accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus pharetra mauris a mattis. Morbi gravida velit nec lectus semper vitae porta sapien semper. Sed blandit tempus tristique. Aenean libero enim, gravida eget egestas et, dapibus in odio. Aenean nisl nunc, ornare porttitor aliquam non, lacinia in leo. Cras viverra mi in justo ultrices ac mattis mi imperdiet. Proin at rhoncus libero. Mauris quis urna eros, dapibus porta lectus.

166 |

167 |

168 |

169 |

2: #aside

170 |

171 |

172 |

173 |

174 |

#footer

175 |

176 |

177 |

178 | 179 | 180 | -------------------------------------------------------------------------------- /starters/starter-2B.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | starter 2A: Two columns with header and footer, sidebar on the left hand side, main content comes last 6 | 152 | 153 | 154 | 155 |

156 |

157 |

#header

158 |

159 |

160 |

161 |

162 |

1: #aside

163 |

164 |

165 |

166 |

2: #article

167 |

168 |

169 |

170 |

171 |

172 |

#footer

173 |

174 |

175 |

176 | 177 | 178 | -------------------------------------------------------------------------------- /starters/starter-2C.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | starter 2C: Two columns with header and footer, sidebar on the right hand side, main content comes first 6 | 154 | 155 | 156 | 157 |

158 |

159 |

#header

160 |

161 |

162 |

163 |

164 |

1: #article

165 |

166 |

167 |

168 |

169 |

2: #aside

170 |

171 |

172 |

173 |

174 |

#footer

175 |

176 |

177 |

178 | 179 | 180 | -------------------------------------------------------------------------------- /starters/starter-3A.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | starter 3A: Three columns with header and footer, main content (middle column) comes second 6 | 158 | 159 | 160 | 161 |

162 |

163 |

#header

164 |

165 |

166 |

167 |

168 |

1: #aside (id)

169 |

170 |

171 |

172 |

2: #article

173 |

174 |

175 |

176 |

177 |

3: .aside (class)

178 |

179 |

180 |

181 |

182 |

#footer

183 |

184 |

185 |

186 | 187 | 188 | -------------------------------------------------------------------------------- /starters/starter-3B.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | starter 3B: Three columns with header and footer, main content (middle column) comes last 6 | 155 | 156 | 157 | 158 |

159 |

160 |

#header

161 |

162 |

163 |

164 |

165 |

1: #aside (id)

166 |

167 |

168 |

169 |

2: .aside (class)

170 |

171 |

172 |

173 |

3: #article

174 |

175 |

176 |

177 |

178 |

179 |

180 |

#footer

181 |

182 |

183 |

184 | 185 | 186 | --------------------------------------------------------------------------------