CSS Mixin PHP Script

Introduction

Recently there has been a lot of interest in CSS frameworks, such as the Blueprint-CSS framework, which simplify the construction of layouts.

One problem with CSS frameworks is that they typically consist of a set of CSS classes that are combined in the HTML to produce a desired visual affect. The classes have layout oriented names ("column", "span-4", etc) that break the principle of separating design and content. Simple tasks like widening a column, require hunt-and-peck modification of the HTML.

CSS Mixin is a simple PHP library for mixing CSS classes together to produce more semantically meaningful styles. By using CSS Mixin in combination with a CSS framework, you can avoid some problems with CSS frameworks. Currently CSS Mixin has only been tested with the Blueprint-CSS framework (0.5 to 0.9.1).

Downloads

Examples

CSS Zen Garden Blueprint-CSS Demo

The CSS Zen Garden page is a classic example of separating CSS design from HTML content. The Blueprint CSS framework cannot be directly used to create a Zen Garden design, because it requires modifying the HTML.

The zen-blueprint-mix.php (Output) uses CSS Mixin to create styles based on Blueprint classes, and attaches them to Zen Garden div IDs. Note: the goal here was to demonstrate mixin styles, not to create a beautiful design.

Reformulated Blueprint Sample

In this reformulated Blueprint sample page, the blueprint-classes have been replaced with single class names denoting the function of the element (header, sidebar, footer, etc). The blueprint-mix.php (Output) uses CSSMixin to generate the functional classes from Blueprint's framework.

Feedback

Please send feedback to Chuck Houpt via chuck@habilis.net.

License

MIT License

Version History