An Introduction to Stylin' Efficiency with the Skinr Module

When it comes time to theme a site you are often working within a tight time-frame. Functionality is starting to come together, representative content is here and there; generally things are in a pretty fluid state. Or perhaps you are doing rapid prototyping, and need to have some flexibility to change your layout on the fly without mucking about in template files or stylesheets. Whether you are themeing a moving target, or riding the wave of a prototype, you need tools that allow you to do your job as efficiently as possible.

Enter: Skinr

The wonders of working with the Skinr Module

The Skinr module, developed by Gravitek Labs, was released last year to the oohs and ahhs of design technologists and site administrators alike. With this module, we can define reusable css styles that are applicable to a variety of elements throughout site. Reusable is the key here. Skinr allows you to define styles that can be applied through the drupal interface without needing to add to your CSS. Right now, skinr styles are available to panels, views, node content types, comments and blocks.

Skinr allows us to choose a template and apply classes when we create a content type.

For prototyping, Skinr allows you to leverage the CSS framework available in themes such as NineSixty, Blueprint, and Studio. This gives you access to the 960 grid, and by configuring skinr to work with the grid styles, you can position a block on the fly within a region.

How do you do it?

There is good documentation on Drupal.org, so what follows is a high-level look at what is entailed.

To use Skinr in Drupal 6.x you will need to add the $skinr variable to your templates or your preprocess files (depending on how your theme assigns classes). This gives your templates access to the Skinr styles (it seems that this will not be necessary in Drupal 7). The set-up is then defined in your .info file and in your css sheets. So in .info, you could add overall styles for a series of objects (like a group of classes that you want to apply to all the happy-colored community content blocks) or you could list the styles for headers on a certain content type or you could define an icon to be associated with a certain menu block, or the 960 grid classes, or or or...

Once the initial set up is completed (the time-consuming part), you will have available (in the content type definitions or in the block or views configurations) a set of checkboxes (or radio buttons or a drop-down menu if you can apply only a single style) and from these choices, you can simply select the name of the styles that you wish to use. Save the settings, and voila! You're stylin'!

Once again, with pictures

1) The .info file for skinr blocks. The label will be the option presented; the class will be the class applied.

In image 1, we see a .info file set up to leverage the 960 CSS Framework.

2) The css class that would be applied if you select "2-column plain" in the dropdown pictured below

In image 2, we see the css that would be applied if you selected "2-column plain" in image 3, the Skinr block class selector....

3) By selecting NineSixty grid values, we can position blocks on the fly within a given region.

If we selected this class from the descriptions available, our "Careers" block would take up 2 grid columns within the region it is assigned to.

This module is still in the early stages, and although it offers mind-blowing possibilities now, the future will bring significant UI improvements. One future-slated development will be the ability to include thumbnail descriptions along with the currently available style names. A visual cue for what you are choosing will immeasurably augment the skinr experience for end-user administrators.

In conclusion

Skinr: embrace this module whole-heartedly as it looks to be the future of object-oriented css.