Grid Plugin for CSS Cacheer
If you haven't checked out Shaun Inman's latest script - CSS Cacheer - you should. It's pure brilliance. It now allows for easy plugin creation. So I've created a grid plugin to allow for quick and easy grid layouts with CSS.
Update - v0.3: I've made a few more updates to the plugin. I've still got another major functionality change to make for the next release. You can download 0.3 here.
- It no longer requires condenser plugin or any renaming. Just a simple drop into the plugins folder.
- New 'column-width' property. If you don't want input the final width of the grid, but instead, the width of each of the columns, you can do so via 'column-width'. With this parameter you no longer need the grid-width property.
- New 'container-class' property. You can specify the class name of the container. The container now also uses overflow:auto to avoid clearance issues.
- Automatically condenses the CSS now. I'm working on an option to re-prettify it after. Not sure exactly how I want this functionality to work
- Constant syntax is now more in line with the other plugins. They are now in the format 'grid(keyword)'. To specify a column width, now use #col. eg. grid(2col). Gutter is unchanged.
- Append and Prepend test keywords. You can prepend columns by adding margin-left: grid(prepend-#), and append columns by adding margin-right: grid(append-#).
Wouldn't it be nice if you could define a grid layout all from within CSS and refer to widths as columns rather than pixels? Well you can now. The previous method I described used 'bases' in the CSS Preprocessor. It was pretty bloated and unmanageable, but still better than including layout classes in the markup.
So I've created a plugin for Cacheer that allows you to define the number of columns an element will occupy. It's completely dynamic.
Features
The point of even using this plugin is make grid framework css files redundant. You no longer need a css file full of column span classes. Instead, you define a grid at the start of your css, and it gives you a new property and 2 new keywords. Instead of floating elements, giving them a width, and then a margin to work as a gutter, you simply give it the property column: value;.
But there's more. It won't just give your elements all the required properties to function as a column, but it will also dynamically create its width based on the padding and border of the element. That means no more markup classes for layout like Blueprint, and no more having to calculate new widths every time you change the padding of a column div.
It also gives you two other keywords in case you decide you don't want the other extra properties, or you don't want the padding and border included. You can use width: grid(#col) and it will render the width of a specified number of columns. You can also use margin-right:grid(gutter) if you want to specify the gutter. These keywords aren't restricted to the width or margin property. They can be used anywhere. If you want to prepend a column, just use margin-left: grid(prepend-#);.
Installation
I'm not going to explain how to set up Cacheer, that's already been done. To install the plugin, just drop grid.php into the plugins folder and you're good to go. One thing you need to do is make the grid plugin load last. To do this, you could simply rename the plugin to z-grid.php or something similar. Or you could do what I did, rename all the plugins with number prefixes so you can control the order in which they are loaded in. The plugin method isn't perfect, but it works.
Usage
To define your grid, you need to set some parameters in your CSS file. At the top of your file add this code:
@grid {
column-count: 24;
gutter-width: 10;
grid-width: 950;
container-class: 'container'; /* Optional */
}
Don't worry, this will be stripped out of the final compress CSS so it will still validate.
Add a Container DIV and Class
The container is a class that is created for you that works as a wrapper for your grid. If you've used Blueprint or any other CSS framework you know what it is. So you'll still need to put class="container" on a wrapper div. I'm working on a way around this in the future.
Column Property
You can define the width of your columns like any other css property. It will take into consideration the padding on the left and right as well as the border on the left and right as long as you place the column property before the other properties.
div {
columns: 2;
}
Will be outputted as:
div {
width: 70px;
margin-right:10px;
float:left;
display:inline;
}
This is generally all you need to create a working grid. If a column is the last in a row of columns that spans the entire container width, you'll need to add margin-right:0; so that it doesn't slip down below. This is similar to the .last class in Blueprint.
Edit:I probably should have been more clear with the inclusion of borders. Currently, it only supports border-left and border-right. Only theses border widths will be factored in.
Keywords
If you don't want the float, display or margin properties on an element, you can use some keywords to define the width. If you just want the width to match that of a certain number of columns use this:
ul li {
width: grid(2col);
}
Likewise you can use a keyword to get the gutter width:
ul li {
margin-right: grid(gutter);
}
The difference between using this method and the column property method is that this second method does not include padding and border widths. It will just spit out the raw column width.
Limitations
There are some limitations in this first release. Most of these can be resolved with good CSS though. Firstly, if you were to have the code:
div {
columns: 1;
padding-left: 20px;
padding: 10px 10px 15px 10px;
}
This won't get the correct padding. It will use the 20px for the left padding, so the width will be calculated wrong. The reason for this is that 'padding' takes precedence. It processes padding, then padding-left, then padding-right. Obviously this means it isn't grabbing the properties in the order they are written. I'll fix this soon. The same problem exists with the border element.
It should also be noted that it does not process border-left-width or border-right-width.
Test it Out!
This plugin needs a bunch of testing to fix up the bugs. So play with it, and leave some suggestions and comments.
In case you missed the link up the top, you can download it from here
Enjoy this post? Share it with others.
Leave a Comment
This form has simple XHTML enabled, so go for it. It also uses Akismet to prevent spam.
Your email will never be displayed, and is used for verification. This form is also Gravatar Enabled.
3 Comments
Brajeshwar
Website
Wow! I download Shaun’s CSS Cacheer coupla days back and am planning to have it for my site. Now, you’ve got a good Grid System. This will definitely make it easier to use it for my designs and I think I’ll learn to write other plugins if required by looking at yours.
Thanks
Jeff Byrnes
Website
Amazing. Simply awesome. Definitely gonna give this a whirl.
marcimat
I’m doing a plugin for SPIP CMS tu use css-cacheer and your work. It seems to work fine.
I just have a little php error on grid.php when no using column on the css (division by zero). Here is the diff of my correction (just before “// Get column width") :
<cadre>
65c65
< if (!$columnwidth)
---
> if (!$columnwidth && $columncount)
270c270
</cadre>
Thanks for your work,
I will explore now !
MM.