Home arrow Style Sheets arrow CSS with Turbine: the Transforms and Minifier Plug-ins
STYLE SHEETS

CSS with Turbine: the Transforms and Minifier Plug-ins


In this penultimate part of the series, I show you how to work with the “Transforms” and “Minifier” plug-ins included with Turbine. They are responsible, respectively, for implementing the “transform” CSS3 property in a fairly cross-browser fashion and for minifying CSS files behind the scenes before the files are sent to the client.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
October 05, 2010
TABLE OF CONTENTS:
  1. · CSS with Turbine: the Transforms and Minifier Plug-ins
  2. · The parsed version of the earlier CSS file

print this article
SEARCH DEVARTICLES

CSS with Turbine: the Transforms and Minifier Plug-ins
(Page 1 of 2 )

If you still haven’t had the chance to take a look at some of the articles that precede this one, let me point you in the right direction: simply put, Turbine is a full-featured PHP library developed by Peter Kroener. It will let you create your CSS files by using a more compact and tighter notation (yes, you can quickly get rid of the required semicolons and curly braces, if you want to), as well as implement nested and multi-line selectors, work with multiple Inheritance and even extend its core functionality by means of a set of plug-ins that are a breeze to use.

Moreover, to illustrate how easy it is to use some of the most relevant plug-ins that come bundled with Turbine, in the previous installment of this series I went through the development of a few basic examples that showed how to utilize two of them, called “Border-radius” and “Background gradient.” As their names imply, the first one came in handy for using the CSS3 “border-radius” property across several browsers via proprietary implementations, while the second one was helpful for generating engaging graphic-less gradients by means of the familiar “background” property.

While the aforementioned plug-ins do a great job of solving internal browser incompatibilities through meta programming (AKA automatic code generation),  Turbine comes with a few others that are worth looking at. In keeping with this idea, in this penultimate part of the series I’m going to analyze in detail the “Transforms” and “Minifier” plug-ins. They will let you use the already popular “transform” CSS3 property in a fairly cross-browser fashion, and make your CSS file even slimmer by stripping out all of their white spaces and new line characters, shortening hexadecimal color values and so forth.

Ready to learn the details regarding the use of these brand new Turbine plug-ins? Then and start reading right now!

Using the “transform” CSS3 property with Turbine: introducing the “Transforms” plug-in  

If you haven’t heard of it yet, “transform” is a powerful behavioral property included in the CSS3 specification that allows you to apply different “transformations” to a target web page element. These include scaling it up and down, skewing and rotating it, and even moving it to a different position on the viewport by specifying its X and Y coordinates either individually or in conjunction.

Needless to say, the support currently offered by most browser vendors for this property is still achieved via proprietary implementations. This is pretty annoying, as each implementation must be coded manually. However, Turbine is a real time-saver in this case, as its “Transform” plug-in it will automatically generate all of the code required to use this property.

Having said that, it’s time to see the plug-in in action, so here’s the web page containing a few basic elements that will be dynamically transformed:     

<!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 Transforms 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 Transforms 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>

With the previous markup properly set, the next step is to define the CSS file responsible for calling the “Transforms” plug-in and for applying the corresponding transformations to the selected web page elements. So, here’s how this file will look:

@turbine
    plugins: transform
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
        height: 300px;
        padding: 20px
        margin-right: 20px
        background: #f00
        transform: rotate(15deg) scale(0.8)
        p
            color: #000

That’s pretty familiar, isn’t it? As usual, the plug-in has first been called via the “plug-ins” Turbine statement, and then the “transform” property has been used with the elements with a class “subsection” assigned to them. In this case, the elements in question will first be rotated 15 degrees clockwise, and then scaled up (a process know as a transformation chain).

At a glance, the use of the “transform” CSS3 property seems to be a straightforward and standard process. But this is only a first impression, as Turbine has to do the leg work and generate all of the proprietary implementations mentioned a moment ago, to make the property work on most modern browsers.

The best way to see if Turbine has actually done this correctly is by showing the parsed version of the previous CSS file. That’s exactly what I’m going to do in the following section, so click on the link below 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