Making CSS Easier with Turbine: Introducing the Fundamentals

In reality, the features in question have been the subject of many requests in the past from many web designers worldwide. Among other things, they include the implementation of CSS constants; a certain number of behavioral properties for scaling, moving and rotating web page elements without using JavaScript (the so-called behavioral CSS); and even the incorporation of support for object-oriented styling.

Well, to be frank, CSS3 does include some of these features, and hopefully they’ll be seen in action more frequently as most browser vendors start adopting them. Many others, however, will remain in the limbo for a long time, or even forever. That's sad but true.

This doesn’t mean that it’s impossible to enjoy CSS constants or object-oriented styling at the present time. There are a few server-side libraries available (usually written in PHP, Ruby and Python) that will let you achieve these things in a straightforward fashion.

What’s more, among the existing libraries, there’s one that you’ll find especially appealing because of its flat learning curve and the number of handy features that it offers for free. Yes, as the article’s title suggests, in this case I’m talking about Turbine, a PHP package that will permit you to write more concise CSS code, use constants and shortcuts, compress CSS files, and much more via a set of intuitive rules that can be mastered easily.

If you’re interested in learning what Turbine can do to help you write faster and tighter CSS code, in this article series I’m going to take an in-depth look at its main characteristics, so that you can start using them in no time. Of course, I don't intend to cover all of the features that the library includes; for the full details on Turbine, make sure you check its official documentation -- which is thorough, includes plenty of examples and is easy to follow.

Now, it’s time to begin exploring the actual functionality of Turbine. Let’s get going!

Getting started: installing and configuring Turbine  

First, you must get Turbine up and running by installing it on your local machine. To do this, simply download the library from GitHub and unpack it to a folder inside your web server.

Already done? Good. Now, look for a file called “config.php.” It is responsible for telling Turbine what errors to display, where to find your CSS files and whether or not they should be minified. This configuration file should look similar to this:
    
<?php

/**
 * This file is part of Turbine
 * http://github.com/SirPepe/Turbine
 *
 * Copyright Peter Kröner
 * Licensed under GNU LGPL 3, see license.txt or http://www.gnu.org/licenses/
 */

$config = array(

 // Sets debugging off (0), on (1), or in developer mode (2)
 // Mode 0 hides all error messages
 // Mode 1 displays error messages related to the style sheets (like elements trying to inherit properties that don't exist)
 // Mode 2 additionally displays php developer messages and sets error_reporting to E_ALL
 'debug_level' => 2,

 // Base path to cssp and css files relative to css.php
 'css_base_dir' => 'css',

 // Minify regular css files (true) oder include them completely unchanged (false)
 'minify_css' => true

);

?>

As you can see above, I configured Turbine to work in “developer mode” (debug_level = 2), and also specified that the CSS files to parse will be located in a folder called “css.” In addition, these files will be minified before being sent to the browser, via the “minify_css” directive. Obviously, this is entirely optional, so simply assign a value of “false” to this setting if you don’t want it enabled.

So far, so good. Having already configured the behavior of Turbine, it’s time to put it into action and see what it can really do to help us write shorter and optimized CSS code. In the next section I’m going to create an introductory example which will show how to parse a basic CSS file using the library.

To learn more about how this example will be developed, jump ahead and read the lines to come.