Home arrow Style Sheets arrow CSS with Turbine: Reset Stylesheet Plug-in and the @media Rule
STYLE SHEETS

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 7
October 06, 2010
TABLE OF CONTENTS:
  1. · CSS with Turbine: Reset Stylesheet Plug-in and the @media Rule
  2. · The Reset stylesheet plug-in in action: the processed version of the CSS file

print this article
SEARCH DEVARTICLES

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. 


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials