CSS with Turbine: the Border-Radius and Background Gradient Plug-ins
In this eighth part of the series, I discuss how to extend the core functionality of Turbine by using its “border-radius” and “background gradient” plug-ins. The library automatically generates (whenever possible) a cross-browser version of the properties handled by each plug-in, thus solving internal incompatibilities and even producing proprietary, vendor-specific implementations.
CSS with Turbine: the Border-Radius and Background Gradient Plug-ins (Page 1 of 2 )
If you still haven’t heard about it, Turbine is a thorough library written in PHP which, through its parsing engine, will let you create your CSS files by using a shortened and tight syntax, very similar to the one used by Python. While this can be considered its primary capability, the library also provides support for many other handy features. These include the ability to define nested and multi-line CSS selectors, utilize constants and aliases, and even extend its core functionality via a decent number of plug-ins that are very easy to use.
Moreover, to illustrate how useful Turbine can be for building shorter CSS files, in the previous part of the series I discussed in detail the implementation of its “copy” statement. This statement can be used for copying one or multiple properties of a specific CSS selector to a different one. What’s more, the use of the “copy” option along with Turbine’s multiple Inheritance makes reusing CSS styles a no-brainer process.
As I just mentioned, the library packs a respectable number of core plug-ins that permit you to perform additional tasks, such as minifying and resetting style sheets files, and using CSS3 properties (at least some of them) in a pretty cross-browser fashion as well. If you're interested in learning how to work with some of these plug-ins, in this eighth part of the series I’m going to discuss a couple of them. Called “border-radius” and “background gradient,” they're capable of generating (when possible) “standard” implementations of the “border-radius” and “background” CSS3 properties.
Ready to learn how to put these plug-ins to work for you? Then begin reading!
Generating a cross-browser version of the “border-radius” CSS property: using Turbine’s “border-radius” plug-in
One of Turbine's biggest strengths is its flat learning curve. This becomes evident when using its core plug-ins, as the process requires you to declare at the beginning of the target CSS file an @turbine rule, followed by the name and value of the plug-in being invoked.
Does this sound confusing to you? Well, suppose for a moment that you need to add nifty rounded corners to the subsections of the web page shown in previous tutorials, whose structure looked like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html charset=utf-8" /> <title>Parsing a CSS file with Turbine (using the border-radius plug-in)</title> <link rel="stylesheet" href="css.php?files=styles.cssp" /> </head> <body> <div id="wrapper"> <div id="header"> <h1>Parsing a CSS file with Turbine (using the border radius plug-in)</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p> </div> <div id="content"> <h2>Main content section</h2> <div class="subsection"> <h3>First subsection</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="subsection"> <h3>Second subsection</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="subsection"> <h3>Third subsection</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div id="footer"> <h2>Footer section</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p> </div> </div> </body> </html>
Now, to add the desired rounded corners to the “subsection” divs via the “border-radius” plug-in, it’s necessary to define a CSS file similar to the following one:
@turbine plugins: borderradius body padding: 0 margin: 0 background: #000 font: 0.9em Arial, Helvetica, sans-serif color: #fff p margin: 0 0 10px 0 #wrapper width: 960px margin: 0 auto #header, #footer padding: 20px #content padding: 20px overflow: hidden .subsection float: left width: 240px padding: 20px margin-right: 20px background: #f00 border-radius: 10px p color: #000
That was pretty easy to code, wasn’t it? As you can see, the “border-radius” plug-in was first called via the brand new “plugins” statement, and then its associated CSS3 property was assigned to the aforementioned “subsection” class. This simple process generates a cross-browser version of the property in question, which is shown below:
At this point, if you test the earlier web page using your own browser, you should see that all of the divs with a “subsection” class assigned to them will be decorated with four neat rounded corners. Needless to say, Internet Explorer will ignore this, as it currently doesn’t support the “border-radius” property.
So far, so good. Now that you've learned how to use the “border-radius” plug-in included with Turbine, it’s time to start discussing another one. Called “background gradient,” it can be used for filling web page elements with engaging gradients, quite similar to what you would do with Photoshop or any other popular image editor.
This topic will be covered in the coming section, so jump ahead and keep reading.
Style Sheets 
CSS with Turbine: the Transforms and Minifier Plug-ins
