How it works!

Follow these simple steps and you'll be up and running in no time.

  1. Insert

    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 @import, but link is 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 head of 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.

    Take note: Check the downloads page for file names and CSS rules.

  2. Copy

    Once you know that your page includes all rules, you may copy code snippets from the layouts page.

  3. Paste

    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).

  4. Edit

    Replace the class ez-wr with ez-mw in 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.

What's next?

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-fl or 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)

Take note: Check our FAQ, it answers the most common questions.