CSS Mixin PHP Script
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).
- CSS Mixin library v3: cssmixin.php
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.
Please send feedback to Chuck Houpt via firstname.lastname@example.org.
- v3 Updated to handle more specifier patterns and support Blueprint 0.8+
- v2 Added debug/compressed flag and last-modified/etag support.
- v1 Initial Release.