Video: An Introduction to CSScaffold

I'm working on my own spin on CSS frameworks, except that mine is a little bit different. It requires PHP to make CSS better, rather then relying on the bad system that we have to work with.

I've been working on my own type of CSS framework lately. When Shaun Inman released the update to the Server-Side CSS Processor last year, I jumped on the bandwagon and made a layout plugin for it, which then turned into a Coda Plugin. After toying with each of these methods, I decided that Cacheer was the way to go.

The Problem with CSS Frameworks

We've all heard the arguments before - the pro's and con's of CSS frameworks like Blueprint. They're not semantic and they're inflexible. Everyone knows it, but it's a start. So what if we could merge the productivity increase of CSS frameworks, with the dynamic capabilities of Cacheer - well you get something I've dubbed CSScaffold.

Introducing Scaffold

It solves all these problems, and here's why:

  • You're not stuck with an inflexible grid.css as it generates one for you on the fly.
  • You're not stuck with class names which aren't semantic in your layout, because you can define classes to elements within your CSS.
  • It doesn't just act as a big reset, it actually encourages you to modify your templates.
  • It reduces HTTP requests, as it brings everything together into one file, caches it and gzips it.

Using Cacheer itself will give you:

  • Constants
  • Nested Selectors
  • Embeding of images within your css
  • The ability to base a class on another class

Some of the Scaffold-only features include:

  • It creates a grid.png for you
  • It cleans, optimizes, compresses and caches your CSS on the fly.
  • It redefines the way you create layouts. You don't have to worry about floats, Scaffold does it for you
  • It comes with classes which simplify common tasks eg. #page { class:container; }
  • It comes with tests which are tied to your working CSS.
  • Simple Math abilities
  • Access to grid widths via variables
  • CSSTidy Built-In
  • Easy Image Replacements

And thats just the start of what it can do. Over the next couple of weeks, I'm going to finish up the initial release of Scaffold and get it ready for a public beta.

A Visual Explanation

I've found it quite hard to explain what Scaffold actually is, so I suggest you watch this video. If you've used CSS Cacheer before, just imagine Scaffold as a framework built around this concept. This is my first crack at a screen cast, and I have to admit, they're harder then I thought. Check out the HD version on Vimeo if this one isn't great quality.


CSScaffold Introduction from Anthony Short on Vimeo.