Scaffold: A CSS framework with a difference

I have always been slightly wary of CSS frameworks, put off by non-semantic class names, and a nagging feeling that CSS simply isn’t complex enough to require the hand-holding a framework offers.

But today I came across Scaffold, a CSS framework that made me rethink my position.

Scaffold differs from traditional static CSS frameworks in that it runs on a web server, and acts as a compiler. Scaffold extends the power and functionality of CSS by parsing each of your CSS files using PHP and generating browser-readable stylesheets on-the-fly. Some practical benefits of this approach are:

• Automatically cache and compress CSS files
• Declare constants in your CSS file and reuse them later in the stylesheet
• Call mixins (functions) from your CSS selectors
• Evaluate portions of your CSS as PHP
• Nest CSS selectors

Ruby users will be familiar with many of these features from Compass and Sass, but Scaffold brings server-side CSS to the Apache/PHP user base.

Extending scaffold using plugins

Scaffold’s feature set can be extended using plugins. In addition to bundled plugins for compression, image replacement and generating human readable output, there are plugins for targeting specific browsers, creating grid layouts, and extending selectors (true OO CSS!).

How it works

Scaffold works by routing your CSS files though its PHP library, parsing your Scaffold code, and generating a standard CSS styleheet which is returned to the browser. Installation is a matter of dropping scaffold into your CSS directory, modifying a few settings in a PHP config file, and setting Apache folder permissions for the directories that Scaffold needs to write to.

You have two options for passing files to Scaffold: route all CSS requests to Scaffold via .htacess, or change the CSS links in your HTML so that they point to Scaffold.

<link href="scaffold/index.php?request=screen.css" />

Scaffold is definitely a CSS framework I could learn to love, and I’m really looking forward to using it in a project. Compared to the current batch of static CSS frameworks Scaffold looks like a big step forward.