Use Turbine to make writing CSS a breeze

Turbine is a PHP script by Peter Kroener that pre-processes your CSS, allowing you to write dramatically simplified CSS shorthand.

For example, Turbine can take this shorthand code:

// Welcome to Turbine!
@media screen
#foo, #bar
   color:#FF0000
   margin-left, margin-right: 4px
   div.alpha, div.beta
       font-weight:bold
       border-radius:4px

and turn it into this CSS:

@media screen {
   #foo, #bar {
       color: #FF0000;
       margin-left: 4px;
       margin-right: 4px;
   }
   #foo div.alpha, #foo div.beta, #bar div.alpha, #bar div.beta {
       font-weight: bold;
       -moz-border-radius: 4px;
       -webkit-border-radius: 4px;
       -khtml-border-radius: 4px;
       border-radius: 4px;
   }
}

Turbine can automatically minify your CSS, caches its results, and also comes with plugins that will automatically:

  1. Add reset styles to the beginning of your CSS
  2. Create cross-browser compatible CSS gradients from one line of code
  3. Embed CSS images smaller than 24KB in your CSS as a Data-URI

…and more.

The benefits (and FAQs) from Turbine use are spelled out very nicely on Turbine’s website, so I’ll get right into it. But sure to read the FAQ if you have any doubts about this slowing down your website, etc.

Download and make ready

Download the Turbine file (stable or beta), extract the archive, and place the extracted files in a folder on your server. For example, I placed the files in this folder:

http://www.example.com/turbine

Configure Turbine

Next, rename the file example-config.php to config.php, and open it for editing. You will need to change the CSS base path. I used ../css because my CSS files are at http://www.example.com/css.

Next, create a blank file called turbinated.cssp (note: cssp, not css) in that /css folder, along with my old CSS files.

Tell Textpattern where to get your Turbine CSS

Finally, log into Textpattern and add a link tag inside your page template’s <head> section, like this:

<link rel="stylesheet" href="/turbine/css.php?files=turbinated.cssp" />

That’s it! Now your Textpattern-driven site is using Turbine to generate CSS.

Be sure to adjust the path inside the link tag if you have Turbine installed somewhere else.

If you want to use more than one CSSP file, you can separate them by semicolons:

<link rel="stylesheet" href="/turbine/css.php?files=file1.cssp;file2.cssp" />

Wow, now what?

Peter has also provided a way to convert your CSS to Turbine.

If you’re still using Textpattern’s default CSS Style editor, please consider using external stylesheets like those shown here. You won’t be able to edit them in Textpattern’s control panel, but database calls to gather CSS can really slow down your website.

Enjoy using Turbine!

comments powered by Disqus