CSSExtra Plugin

CSSExtra is a plugin that gives you access to some dynamic css. Although it is not truely dynamic in that it will not process the variables and settings, it gives you the commands to process the CSS instead. What this means is that you can have constants, bases and a layout module within your CSS. It makes CSS layouts extremely easy to create by letting the script worry about cross browser issues and box model widths.

This project is inspired by Shaun Inman's Cacheer, which is where the constant and bases script comes from. I wrote a plugin for Cacheer called Grid which is what the layout module is based on. If you've ever used CSS Cacheer before, then you already know how to use CSSExtra, although instead of letting the server process the CSS, you run commands to do it manually, so you don't need to set anything up on a server.

Features

Constants
Dynamic and flexible layout grid
Bases - give 'classes' to your selectors
Compress and optimise your CSS from within Coda
Fixes for IE6+ to help with cross browser compatibility

I'm planning on developing this further to add more commands to use with CSS. This is just the beginning! I have tested this fairly thoroughly when it was a TextMate bundle, however, there could be issues with Coda. If you run into any problems, please let me know.

Example

If you want to see what a CSS file looks like when it uses this plugin. Check out the CSS of my site.

Download CSSExtra 0.5.2

Changelog

0.5.3 Moved the grid layout documentation over to GridCSS which is the project page for the class behind it. Updated the grid functionality with the updated GridCSS class

0.5.2 Added shortcuts for build commands Removed the choice to use just a selection. This didn't function correctly

Installation

To install, simply unzip the archive and double click on CSSExtra.codaplugin

Basic Usage

To use CSSExtra is extremely easy. If you've ever used Shaun Inman's CSS Cacheer before then you a just about ready to use this plugin. It uses the exact same syntax for constants and bases. However, the process is somewhat different, which I'll explain in a moment.

There are 3 commands for each module - Build, Restore and Freeze :

Build refers to processing the CSS and building it from the plugin properties so that is usable. Basically, it transforms variables.

Restore gets these rendered variables and converts that back into variables which can edit. For example, it could get width:300px/*grid(3)*/; and render it back as width:grid(3col);.

Freeze will strip these comments which hold the variables so its all clean - as if no plugin were even used!

So that's how CSSExtra works, so hopefully you know enough now to tackle the rest of the plugin.

Detailed Information

Now that you know how the plugin will actually works, I'll go into some more detail about each of the functions.

Grid

I should mention that the layout module in particular is best used by people who actually know what it is doing in terms of CSS layouts. You'll still run into problems if you just try to use this and have no idea of how to build a grid layout with CSS. If you've used Blueprint, or any other CSS framework, you should be good.

The first thing you need to do, is define your grid at the top of your css:


@grid
{
    column-width:23;
    grid-width:966;  /* Not needed if you specified column-width */
    gutter-width:18;
    column-count:24;
    format:newline;
}

You may want to comment these out if you run into some problems, but most browsers should just ignore it. What CSSExtra does is process your CSS and looks for special properties which it can process. These are written just like any other CSS property. For example, here is the basic layout module columns property:


#myid
{
columns:4;
}

The class will process this, and transform it into valid, working css:


#myid
{
width:400px;
float:left;
display:inline;
overflow:hidden;
margin-right:18px;
}

Although this looks like a simple find and replace, the script actually accounts for extra width within the property as well to provide dynamic values. So you can add padding or border values and it will be factored in. I'll go into this a bit later. This lets you create layouts easily, and not have to worry about how you are going to even create it.

You are given a number of special tags/syntax/properties (whatever you feel like calling them), which render different aspects of a layout.

@grid Settings

These settings must be placed somewhere in your css for the script to find. It takes this form:


@grid
{
    column-width:23;
    gutter-width:18;
    column-count:24;
    format:newline;
        grid-width: 966;
        keep-settings: yes;
}

Here's a rundown of each option.

column-width

The width of each individual column, without the gutter. In Blueprint, this is 30px.

gutter-width

The width of the margin separating the columns. This takes form as margin-right on your columns

column-count

The number of columns in your grid - 12, 16, 18, 24 are usually good numbers.

format

This determines how the columns properties will be outputted, either on a new line, or inline, depending on how you like your css to look. It doesn't affect the functionality in any way. It takes one of two parameters - newline or inline

grid-width

If you aren't sure of you individual column widths, but know how wide your layout is, you can specify it in this parameter instead of column-width. Only ever use this option if you haven't specified column-width

keep-settings

By default, GridCSS parses the css and leaves no trace of what the original property was. It takes either 'yes' or 'no'. For example, if you have:


#myid
{
columns:4;
}

It will be outputted as:


#myid
{
width:400px;
float:left;
display:inline;
overflow:hidden;
margin-right:18px;
}

However, if you turn keep-settings on, it will be outputted like this:


#myid
{
/*grid(4col)*/
width:400px;
float:left;
display:inline;
overflow:hidden;
margin-right:18px;
/*grid(end)*/
}

This allows you to use the other methods of the CSSExtra class - Restore Grid and Freeze Grid. It essentially allows you to go back and forth between the parsed and unparsed css. This is on by default for the TextMate and Coda plugins, and off for the CSS cacheer plugin.

columns:x;

The columns:x; property outputs everything you need to make a functioning layout, as you've seen previously. It's fairly simple:


#myid
{
columns:4;
}

Is transformed into this:


#myid
{
width:400px;
float:left;
display:inline;
overflow:hidden;
margin-right:18px;
}

In the latest version, I've included the ability to not output any of the properties except the width, by adding a ! like so:


#myid
{
columns:4!;
}

This will just output a width property, but still calculate the additional width from padding and border. In practice, I've found this to be extremely useful, as you can do this:

.column         { float:left; margin: 0 18px 18px 0; }
.ie6 .column    { overflow:hidden; display:inline; }

#primary-content        { columns:20!; padding:20px; }
#secondary-content      { columns:4!; margin-right: 0; }
#tertiary-content           { columns:24!; }

This means you can define your own column properties like I've done here. It results in much cleaner code and is great for anyone who really likes efficient css.

grid(xcol)

grid(xcol) functions like a variable. It will simply output the width of x number of columns, not factoring in border and padding. So you could use it like so:

.class      { padding: grid(2col) grid(1col); }

So your class would have a top and bottom padding of 2 columns, and a left and right of 1 column. This makes your layout extremely consistent.

grid(gutter)

Another variable that outputs the gutter-width which you specified in your @grid settings. This is useful for creating a vertical rhythm or simply making sure all your spacing is the same.

Constants

Constants are much easier.


/*
@constants {
    baseColor: #314159;
} 
*/
...
#id {
color: const(baseColor);
}

Its fairly simple. Just build the constants and you're done.

Bases

Bases are like classes you can give to your selectors. The aim is to make it easier for developments. You'll end up with some bloated code, but thats what the built in optimizer and compressor are for. For example, lets say you have properties you want to use over multiple selectors.


@base(basename) {
    color:#fff;
    background:#000;
    margin:10px;
}
...
#id {
based-on:base(basename);
}

Then you can add the based-on property to your selectors. Of course, you could always just use the comma separated selectors for it, but this has some benefits.

CSSTidy Built In

When you're finished up with your CSS at the end of a project, it's usually a good idea to optimize and compress it. Well you can do this with this plugin. It has CSSTidy built in, so it will optimize all of your selectors and properties, and make your CSS as small as possible. It creates this in a new document, so you can save it as a separate compressed file.

Caveats

This is very early in testing, so there could be some issues, but it has been used to build this site (When it was a TextMate bundle). Also, if you have any suggestions or ideas, let me know. I'm sure there could be some better ways to do these things or new features to add to it.