Pixel Acres

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 logo

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.

Scaffold diagram

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.

3 Responses to “Scaffold: A CSS framework with a difference”

  1. John says:

    Really appreciate the Scaffold write-up Jonathan. Like you I’ve been wary to date of CSS frameworks—to me they seem like an unnecessary layer of complication and handholding for something I can do easily by hand—but added features like functions and constants could quickly win me over.

    Now I just need a new project to come in to write of my learning time as development ;-)

  2. madic says:

    hi,
    i’m looking for a similar technology, but using RoR or better Java/JSP.
    Some news about?

  3. Jonathan says:

    @madic: Compass is like Scaffold but for RoR.