Rosemary is an open-source modular cascading filter-based modification system for CSS files; or commonly recognized as the acronym, OSMCFBMS4CSS. Your CSS files are run through a series of filters that modify it one after another. These filters can be toggled on/off, rearranged, or all of them disabled completely to give you raw output. It provides a scalable CSS wrapper that you can continue to use no matter what version of CSS is supported (or unsupported).
Anyone with some PHP skills under their belt has the ability to create a filter to use with Rosemary. Combining filters in different arrangements will prove to offer diverse results. Developers and designers will both benefit from the ease of customization Rosemary provides. Filters can allow for deeply technical configurations for the devs or be simple as 1-2-3 Go! for designers.A filter is an independent package of code that modifies your CSS or gives you new abilities when writing CSS. An example of this is the Browser Filter. The Browser Filter gives you new capabilities in CSS writing to define certain blocks or properties as browser specific. The filter will remove any blocks or properties labeled "IE" if the visiting user is running Firefox. There are also other filters, like the Compressor Filter, that don't give you any new capabilities but simply perform an action. In this case, the Compressor Filter removes all whitespace and line breaks in real time so you can edit clean code and send a small compressed file to the user.
Some of the key reasons this is better than salt and vinegar potato chips:
- Versioning: Filters are isolated into different folders and act independently. If a new browser comes out or CSS changes, you can download a newer version of a filter and swap it out. When there are bug fixes or feature requests to a certain filter, you can just download a newer version.
- Open Source: These are designed to be a community project. Everyone who has some coding experience can make filters where it suits their needs. If you find a bug in a filter and want to fix it, send in the changes to the author and it'll collaboratively improve. After enough participation, you may not even need to make one because it may already exist.
- Simple and Light: The system couldn't be a whole lot simpler. One .htaccess file to push your CSS through the filter, a file to define what filters you want to use, and the Rosemary package where you decide what filters you want.
- Never outdated: This relates back to the ability to version your filters. When things on the web change all the sudden, this can adapt just like any other plugin system.
We have created a small package of filters just to get things started. There are some to-dos and possible bug fixes awaiting on some of these filters so feel free to submit feedback, edit some files, and get this rolling. The existing filters are: Browser, Compressor, Inheritance, Reset, StripComments, Variables. There is further documentation, examples, and a test area in the attached zip file for you to play with. Expect some updates to the system in the near future to allow for more core functionality, but for now play with filters and different combinations.
If you're looking for some ideas, here are a few I haven't gotten around to yet:
- Nesting: Allow object oriented nesting of selectors through multiple levels.
- Selector Groups: This works very similar to nesting but is a little different approach. This would give you the ability to do: html body .myDiv [h1,h2,h3,h4,h5] instead of: html body .myDiv h1, html body .myDiv h2, html body .myDiv h3, html body .myDiv h4, html body .myDiv h5 .
- Filter Packs: Some people want core functionality to tinker with, some people just want to install and go. Different filter packs of "7 Filter Designer Pack," or "Object Oriented Dev Pack," would make Rosemary a strong tool for any type of user, amateur to expert.
- Full Width/Height: A lot of people don't understand the box model. If I say width is 500px with 20px padding and 5px border, why is it more than 500px wide? A good filter for designers would be two new properties called "full-width" and "full-height." It could rewrite the property to be `height` = `full-width` - `padding`-`border`. Same for height.
Give it a whirl and see where it takes you. Leave some comments below with feedback, bugs, or your thoughts on the weather.
Download Rosemary.zip
Edited: Added new filter to simulate "Mixins," a different type of inheritance. Use classes, IDs, and selectors as variables anywhere in your stylesheet.
Download Mixins Filter
Edited: New filter that allows you to include preprocessed or raw CSS files into one.
Download Include Filter
Example snippet using Variables Filter:
define red: #ff0000;
define full wide: "600px";
#myDiv {
/* Color will be red */
color: @red;
/* Width will be `"600px"` */
width: @full wide;
}
define red: #0000ff;
#myDiv2{
/* Color will be blue */
color: @red;
}Example snippet using Browser Filter:
~!ie #myDiv{
/** This block only appears for NON-IE browsers **/
}
~gecko #myDiv{
/** This block only appears for Gecko-type browsers **/
}
~firefox3 #myDiv{
/** This block only appears for Firefox3.0 browsers **/
}
#myDiv{
/** Can be applied to properties inside blocks **/
~ie height: 100%;
~!ie height: 500px;
}
