CSS with Turbine: Reset Stylesheet Plug-in and the @media Rule
Welcome to the final part of a 10-part series on Turbine. This PHP package lets you create style sheets using a Python-like syntax. In this part, you'll learn how to use the "reset stylesheet" plug-in to automatically assign default styles to most web page elements, and the "@media" rule to associate a set of styles with a specific hardware device.
CSS with Turbine: Reset Stylesheet Plug-in and the @media Rule (Page 1 of 2 )
If you're a web designer looking for a full-featured library that lets you process your CSS files in all sorts of clever ways, without having to deal with a steep learning curve or poor-written documentation, then I suggest you to take a peek at Turbine. This PHP package, among other handy things, will permit you to create your style sheets by using a Python-like syntax, work with multiple Inheritance and nested selectors and even implement some behavioral CSS3 properties, such as "border-radius" and "transform" in a fairly cross-browser fashion via a set of core plug-ins that are very simple to utilize.
I left off the last tutorial of this series explaining how to work with two of these plug-ins called "Transforms" and "Minifier" respectively. As you may have already guessed from their names, the first one came in for using the aforementioned "transform" CSS3 property on most modern browsers, while the last one was helpful for minifying one or multiple CSS files on the fly.
It's valid to note, though, that Turbine comes with a few additional plug-ins and features that may be quite appealing to you. It's not my intention here to cover all of them -- that would be pointless, considering the library's solid online documentation. However, I'd like to finish this series by discussing how to use its "Reset stylesheet" plug-in and its @media rule.
As you'll see in the next few lines, the "Reset stylesheet" plug-in can be used for automatically assigning default styles to most web page elements, while the "@media" rule allows you to associate a set of styles with a specific hardware device (screen, printer, etc.). That latter is quite similar to what you do when you include your CSS files via a typical <link> HTML element.
Now, move on and start reading the final chapter of this hopefully instructive journey on Turbine!
Assigning default styles to web page elements: using the "Reset stylesheet" plug-in
If you're anything like me, you probably include a reset style sheet when defining the visual presentation of your web sites and applications. While in most cases this is nothing but a simple copy/paste process, Turbine will include the reset file automatically for you via its "Reset stylesheet" plug-in.
To demonstrate a basic usage of this plug-in, it's necessary to create a web page that works with Turbine. To do so, I'm going to use the same (X)HTML document that you saw in previous tutorials, whose markup was defined in the following way:
<!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 Reset stylesheet 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 Reset stylesheet 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>
Definitely, understanding the structure of the above web page is a self-explanatory process that doesn't bear any further analysis, so let's move on and look at the following CSS file. It invokes the "Reset stylesheet" plug-in via the already familiar "plugins" statement:
@turbine plugins: resetstyle 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 p color: #000
As you can see, the plug-in has been called at the beginning of the above CSS file. You should be familiar with this process, as it's very similar to other examples developed previously. Of course, the question that you must be asking at this point is: does the plug-in really include a complete reset style sheet behind the scenes?
Well, I'm glad you asked! To answer your question, however, it's necessary to find out how the earlier file looks after being parsed by Turbine. And guess what? That's exactly what I'm going to show in the next section, so if you're interested in seeing the actual definition of this file, jump ahead and read the lines to come.
Style Sheets 
CSS with Turbine: the Transforms and Minifier Plug-ins
