How it works!
Follow these simple steps and you'll be up and running in no time.
First, include the rules into your document(s). You have a few options to do so:
Linking to an external file:
<link rel="stylesheet" type="text/css" media="screen,projection" href="/css/ez-min.css">
The above code assumes you've saved the ez.css file in a CSS directory inside your root folder. Note that you could also use
linkis better for performance.
Inserting rules in your own style sheet: Copy all rules from the ez.css file and paste them in your style sheet (top or bottom should make no difference).
This may be better as it saves you an HTTP-request.
Inserting ez-css rules in the
headof your document(s):
<style type="text/css"> /* all rules from ez-min.css go below */ ... <style>
Do this if you only want to use this solution as a quick fix on a page you have trouble styling.
Check the downloads page for file names and CSS rules.
Once you know that your page includes all rules, you may copy code snippets from the layouts page.
One at a time, paste the snippets of code into your document. The goal is to nest blocks of code inside blocks of code to achieve the layout you want (if in doubt, check the screencast).
Replace the class
ez-mwin the main wrapper (topmost container) to:
- center aligned the whole layout (after you give that wrapper an explicit width),
- left-align the text inside that container,
- prevent your new layout from clearing any previous (left) floats.
Now that your grid is done, you can tune it to fit your needs.
Set the width you want on all floats. These floats are the DIVs with either a
ez-fr classes. They also have a class containing numbers (i.e.,
ez-50). If that's not the width you want then remove that class and set the width of that container via your own class or ID (see Tips and Tricks)
Check our FAQ, it answers the most common questions.