Home arrow Style Sheets arrow CSS with Turbine: Using Constants and Aliases
STYLE SHEETS

CSS with Turbine: Using Constants and Aliases


In this fifth part of the series, I develop a couple of basic examples that demonstrate how to use CSS constants and aliases in files parsed by Turbine. If you’ve ever worked with a dynamic programming language like PHP or Python, the examples should be pretty easy for you to follow.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
September 27, 2010
TABLE OF CONTENTS:
  1. · CSS with Turbine: Using Constants and Aliases
  2. · Introducing aliases

print this article
SEARCH DEVARTICLES

CSS with Turbine: Using Constants and Aliases
(Page 1 of 2 )

Are you in search of a library that lets you shorten the time you spend writing the CSS styles of your web pages? If the answer to that question is yes, then you should take a closer look at Turbine. This full-featured PHP package will permit you, among many other handy things, to define your CSS styles using a more compact and tighter syntax, take advantage of constants and aliases, and even process your CSS files through a great variety of plug-ins that the library offers for free.

What’s more, to demonstrate how functional Turbine can be for parsing CSS files, in previous chapters of this series I developed some friendly examples that showed how to exploit some capabilities provided by the library. These included defining a set of rules without having to code the typical semicolons and curly braces, and working with nested and “multi-line” CSS selectors.

In reality, the aforementioned features are small examples of the numerous CSS parsing abilities that Turbine hides under the hood. The library is capable of performing many other clever tasks with CSS files, apart from the ones discussed so far.

Still not totally convinced? Well, to make you change your mind, in this fifth installment I’m going to create a few more examples aimed at illustrating how to use CSS constants and aliases in files parsed by Turbine. As you may know, these features have been requested by many web designers for years, so I bet you’ll be more than pleased to use them now. 

So let's continue this introductory and hopefully instructive journey into using Turbine. Let’s jump in!

Reusing styles in multiple places: using CSS constants with Turbine

As I explained in the introduction, Turbine will let you easily store sets of CSS styles in constants, which is pretty similar to what you do when using any modern programming language. For obvious reasons, CSS constants can be reused nearly everywhere in a given file, which speaks well of its remarkable potential when utilized for defining the visual presentation of several web page elements.

To demonstrate how to use CSS constants with Turbine, I’m going to utilize the same sample (X)HTML document defined in previous parts of the series, which as you’ll recall, 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 constants)</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 constants)</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>
 
As you can see, the web page above includes a CSS file which is parsed by Turbine, a process that should be familiar to you by now. So it’s time to make things a little more interesting by using a couple of CSS constants to define the background color of the web page’s subsections and their child paragraphs. Simply put, this can be achieved in the following manner:  

@constants
    sectionColor: #f00
    parColor: #000
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: $sectionColor
        p
            color: $parColor

That looks much more appealing, indeed! As the previous code sample shows, the use of constants with Turbine requires the declaration of an @constant rule at the beginning of the file. For the sake of simplicity, in this example I defined only two constants, called “sectionColor” and “parColor” respectively. They are used to store the background colors assigned to the subsections and paragraphs of the earlier web page.

Of course, the example would be incomplete if I didn't show you how the previous CSS file looks after being processed by Turbine, so here it is:

/*
 Stylesheet generated by Turbine - http://turbine.peterkroener.de/
 Version: 1.1.0pre
 Path: /turbine
 Benchmark: 0.23573589324951
 Browser: firefox
 Browser version: 3.68
 Browser engine: gecko
 Browser engine version: 1.928
 Platform: windows
 Platform version: 5.1
 Platform type: desktop
*/
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;
}
#content .subsection {
 float: left;
 width: 240px;
 padding: 20px;
 margin-right: 20px;
 background: #f00;
}
#content .subsection p {
 color: #000;
}

Undeniably, using CSS constants with Turbine is a straightforward process that can be tackled with minor hassles. Keep in mind, however, that constants (at least the ones supported by the library) are case-sensitive, so be careful when assigning names to them, so you can avoid unexpected results.

And now that you've learned how to use yet another handy feature provided by Turbine (and in this case a truly remarkable one), it’s time to explore a few others. As I mentioned at the beginning, the library is also capable of dealing with aliases, a handy characteristic that allows you to easily assign mnemonic shortcuts to one or multiple CSS selectors. Therefore, in the following section I’m going to create an example that will demonstrate how to use some aliases with the sample web page shown previously.

To learn more about how to work with aliases, click on the link below and keep reading.


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