Create Complex Layouts in Minutes With EZ-CSS

If you’re like many developers, you’ve had your fill of grid-based CSS frameworks. Well you’re in luck because today we’re going to look at a fresh take on the concept of a CSS framework.

EZ-CSS seeks to address many of the things you hate about grid-based frameworks while retaining the functionality of aiding in the creating of cross-browser multi-column layouts.

2 Million+ Digital Assets, With Unlimited Downloads

Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.

See More

What is EZ-CSS?

EZ-CSS is a CSS framework developed by Thierry Koblentz. It’s similar in concept to other frameworks you’ve seen such as 960.gs or Blueprint CSS, and yet it’s also completely different.

screenshot

The primary difference between EZ-CSS and other frameworks you’ve seen is that here you’re not committed to a set grid but rather have a large degree of freedom over the widths of your columns. In fact, you can create as many columns as you want, of any width and with any gutter size.

EZ-CSS also uses a unique module layout that allows for super rapid prototyping. We’ll get into this more later but essentially you rely mostly on copying and pasting pre-built pieces of a layout that you can combine and nest however you want to create a complex whole.

The final benefits to using this framework are size and simplicity. The required CSS file is only around 1KB and the whole system is actually a lot easier to learn than other frameworks you’ve seen. The lack of restrictions and extra hacks like inserting divs to clear your floats makes for a simpler workflow with (theoretically) less markup.

EZ.CSS

The first thing you need to do is download the free ez.css file. To do this, go to the EZ-CSS downloads section and grab ez-min.css. There are a lot of other optional files but this is really the only one you need to get started.

Throw this in a directory with a basic HTML file and link it with the following snippet:

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

Obviously, you’ll have to customize the path to fit with your own folder hierarchy.

Understanding Modules

As I mentioned above, the core functionality of EZ-CSS revolves around a series of pre-built modules that you simply copy and paste into your code to define the layout.

There are seven modules to choose from on the website’s layouts page: Plain Box, 2A, 2B, 3A, 3B, 4A and 4B. As you can see in the image below, each module contains either 1, 2, 3 or 4 columns.

screenshot

Using these simple building blocks you can create a ton of incredibly complex layouts. You accomplish this through nesting. So let’s say you use module 2A to create a two-column layout and want to split the left most column into three sections. You simply paste the code for module 3A inside of the code for module 2A and you’re good to go!

Also on the layouts page are several common pre-built layouts that already combine the modules and therefore accomplish much of the work for you!

An Example

To get a feel for how it all works, let’s create a quick and dirty mockup using the EZ-CSS framework. We’ll basically be building one of the pre-fab layouts but from scratch so you can get a feel for the process of creating your own.

If you followed the steps above, you should have a directory with an HTML file and the ez-min.css file. Add to this a style.css file and link to it in your HTML. Next, grab the text for the “Plain Box” module and paste it into the body of your CSS.

<!-- Plain box -->
<div class="ez-mw">
   <div class="ez-box">.1.</div> 
</div>

Important: Since this will be our main container, I changed the “ez-wr” class to the “ez-mw” class. This step center aligns the whole layout, left aligns the text in the container, and prevents your new layout from clearing any previous (left) floats.

Adding the Header

The first section we want to add is a header. Since this will stretch all the way across the page, we need another “Plain Box” module (this time leave the ez-wr class). To insert this, we nest it inside of the “ez-mw” div, replacing the “ez-box” div that used to be there. This sounds more complex than it really is and results in the few lines of code below.

<!-- Plain box -->
<div class="ez-mw" id="container">
    
   <!-- Header -->
   <div class="ez-wr headerFooter">
      <div class="ez-box">HEADER</div> 
   </div>
      						
</div>

Notice that I also threw in a couple of custom id/class tags so we can style these elements according to our own preference. I didn’t want to style the existing EZ-CSS classes because I might use them differently throughout a site.

Styling the Header

To get a glimpse of how all of this is turning out, we’ll jump ahead and add a few styles to the header and body.

* {
	padding: 0;
	margin: 0;
}

body {
	font-family: Helvetica, sans-serif;
}

#container {
	margin-top: 50px;
	width: 900px;
}

.headerFooter {
	background-color: gray;
	height: 50px;
	margin-bottom: 20px;
	text-align: center;
	line-height: 50px;
	color: white;
	font-weight: bold;
}

There are a few important things to note here. First, the default EZ-CSS layouts are fluid. This is awesome for some purposes but I didn’t want a fluid layout so I simply applied a width to the container to ditch it. Everything else is just some fast and messy styles that I threw on just to give the header some kind of appearance. I’ll repeat these styles for the footer so I made them a class instead of an id.

The result is anything but remarkable, but it’s a start!

screenshot

Creating a 2-Column Layout

To add in some content, we’ll grab module 2A and throw it inside of the main wrapper after the header. We’ll place some dummy images in the left column and text in the right column.

<!-- Plain box -->
<div class="ez-mw" id="container">

  <!-- Header -->
  <div class="ez-wr headerFooter">
    <div class="ez-box">HEADER</div> 
  </div>
  
  <!-- First Row: Module 2A -->
  <div class="ez-wr row">
  
    <div class="ez-fl ez-negmr ez-50">
      <div class="ez-box">
      	<img src="fff-1.jpg" />
      </div>
    </div>
    
    <div class="ez-last ez-oh">
      <div class="ez-box">
      
      <h2>Header</h2>
      <p>Lorem ipsum dolor sit amet...</p> 
      
      </div>
    </div>

Notice that I added a “row” class to the first div in the 2A module. This will allow us to add in some custom margins later. Also notice that we’ve done very little work at this point. In fact, we’re really just copying and pasting the content from the EZ-CSS website and dropping in our own text and images!

Finishing The Layout

To beef up the design a little, copy that 2A module we just created and add in another. Also create a footer that uses the same module as the header.

<!-- Plain box -->
<div class="ez-mw" id="container">

  <!-- Header -->
  <div class="ez-wr headerFooter">
    <div class="ez-box">HEADER</div> 
  </div>
  
  <!-- First Row: Module 2A -->
  <div class="ez-wr row">
  
    <div class="ez-fl ez-negmr ez-50">
      <div class="ez-box">
      	<img src="fff-1.jpg" />
      </div>
    </div>
    
    <div class="ez-last ez-oh">
      <div class="ez-box">
      
      <h2>Header</h2>
      <p>Lorem ipsum dolor sit amet...</p> 
      
      </div>
    </div>
    
  </div>
  
 <!-- Second Row: Module 2A -->
  <div class="ez-wr row">
  
    <div class="ez-fl ez-negmr ez-50">
      <div class="ez-box">
      	<img src="fff-1.jpg" />
      </div>
    </div>
    
    <div class="ez-last ez-oh">
      <div class="ez-box">
      
      <h2>Header</h2>
      <p>Lorem ipsum dolor sit amet...</p> 
      
      </div>
    </div>
    
  </div>
  
   <!-- Footer -->
   <div class="ez-wr headerFooter">
      <div class="ez-box">FOOTER</div> 
   </div>			
</div>

As you can see, we didn’t have to clear floats, add in “alpha” classes, or do any of that stuff necessary in 960.gs. All we’ve done is thrown in a few more modules that are just like those that we’ve already looked at.

Finishing The Styling

With that, now throw in a little styling to make everything look nice and pretty and we’re all done!

* {
	padding: 0;
	margin: 0;
}
 
body {
	font-family: Helvetica, sans-serif;
}
 
#container {
	margin-top: 50px;
	width: 900px;
}
 
.headerFooter {
	background-color: gray;
	height: 50px;
	margin-bottom: 20px;
	text-align: center;
	line-height: 50px;
	color: white;
	font-weight: bold;
}
 
.row {
	margin-bottom: 20px;
}

Check out how little CSS we used! Most of what you see above is optional styling, all the heavy lifting for the layout was handled by EZ-CSS. The final product can be seen below.

screenshot

Pros And Cons

Obviously the benefits here are the rapid prototyping and flexible layout possibilities. If you know what you’re doing, you can bust out a completely custom layout in under ten minutes using whatever widths you want; there’s no strict grid to follow.

However, there are a few features of EZ-CSS that I’m not crazy about. For starters, the EZ-CSS class names are a little cryptic at first. It’s nice that they’re so brief but I could use something a little more descriptive that “ez-oh.” If someone not familiar with the framework takes a look at your code, they’re likely to get confused quickly.

My biggest complaint though is that the layouts suffer from major div-itis. To be fair though, I looked into this a little and noticed that the EZ-CSS site admits that simply copying and pasting the layouts tends to create a lot of superfluous “ez-box” divs. For instance, almost all of the “ez-box” divs in the example above can be eliminated completely. Check out this better version of the HTML with the div problem addressed.

<!-- Plain box -->
<div class="ez-mw" id="container">

  <!-- Header -->
  <div class="ez-wr headerFooter">
    <div class="ez-box">HEADER</div> 
  </div>
  
  <!-- First Row: Module 2A -->
  <div class="ez-wr row">
  
    <div class="ez-fl ez-negmr ez-50">
      	<img src="fff-1.jpg" />
    </div>
    
    <div class="ez-last ez-oh">
      <h2>Header</h2>
      <p>Lorem ipsum dolor sit amet...</p> 
    </div>
    
  </div>
  
 <!-- Second Row: Module 2A -->
  <div class="ez-wr row">
  
    <div class="ez-fl ez-negmr ez-50">
      	<img src="fff-1.jpg" />
    </div>
    
    <div class="ez-last ez-oh">
      <h2>Header</h2>
      <p>Lorem ipsum dolor sit amet...</p> 
    </div>
    
  </div>
  
   <!-- Footer -->
   <div class="ez-wr headerFooter">
      <div class="ez-box">FOOTER</div> 
   </div>			
</div>

There is still no shortage of divs (nine to be exact), but it’s better than it was. Apparently the ez-box containers are mostly there for optional styling. We took a different route for our styling so we didn’t actually need to include them. This adds a little extra work to the copy and paste action, but in reality not much. Just be cautious about which divs you cut and watch carefully how they affect your layout.

Conclusion

A few days ago I had never heard of EZ-CSS, so I’m still figuring it out and trying to decide if I like it. I do like that it’s a fresh take on a CSS framework that isn’t the same grid-based structure we’ve seen done fifty different ways that are ultimately the same on a conceptual level.

As I continue to play around with EZ-CSS to see what is and isn’t possible, I’d love to hear your thoughts. You’ve proved time and again to be more insightful than myself in analyzing the usefulness of these tools in the real world so I’m throwing this one back to you. Here are a few questions for conversation starters:

1. Does EZ-CSS solve the issues you have with 960 and other grid frameworks?
2. Are there any pros and cons that I missed?
3. What are some restrictions to this system?
4. Is EZ-CSS something we can use in the real world or only for prototyping?

Put in your two cents on these and any other related topics that come to mind!