Using CSS sprites is a great way to speed up your web pages and web applications. The concept is simple: bundle up all your icons into one image and use the background-position property to display the correct icon. By doing this you avoid having to download multiple image files and minimize your HTTP requests. Using sprites is especially useful for rollovers since it avoids having to preload images altogether. An example of a CSS sprite is shown below.

The sprite above has all the icons laid out in a grid with the icons 20px apart. If I wanted to show the Linux penguin in a div I would use to following style:

.penguin {
background-image: url(sprites.png);
background-position:  -80px 0px;
}

This style rule places a background-image at a position that’s -80 pixels from the left and 0 pixels from the top. It’s simple enough with a small graphic like the one above, but when you begin using more complex sprites you need to begin doing some math, and being a designer true to my creed, I hate math. Fortunately, using LESS makes things much easier. All you have to do is setup the width and height of your grid cells like this.

@xwidth: 20px; //cell width
@ywidth: 20px; //cell height

Then all you need to know is the column and the row for your icon and set the background position like this:

background-position: @xwidth*-5 @ywidth*0; //remember the first column or row is 0

The image below illustrates the rows and columns of a sprite. the background-position property always uses a negative number when positioning a sprite.

An alternative method is to set your icons in the beginning of the document like this:

@xwidth: 20px; //cell width
@ywidth: 20px; //cell height
@penguin: @xwidth*-5 @ywidth *0;

and then just call the css as follows:

background-position: @penguin;

Either way the result is the same, and as our good symfony friends from France would say, Voila! CSS sprites made simple.

Special thanks to Mark James for his FamFamFam icons.

Previously in this blog we talked about LESS and how it can help working with extended features in CSS. But some basic things with configuring CSS in symfony are commonly unknown.

Expanded notation
Stylesheets can be defined using Yaml format in view.yml. The Definitive guide to Symfony explains how to include external stylesheets in your pages:

stylesheets: [main, my]

Note that you don’t need to specify the extension .css. symfony will add it for you. There is another way to define these, which may help when dealing with many external files or extra configuration:

stylesheets:
                  - main.css
                  - my.css

Multiple media
If you require to specify the media to which the stylesheet applies, it is described to do it like this:

stylesheets:
                  - screen.css
                  - print.css: { media: print }

What if you want to use the stylesheet for multiple media. It is not very clear and people tend to have issues defining it. Here is how:

stylesheets:
                  - screen.css
                  - print.css: { media: print }
                  - mobile.css: { media: 'handheld,screen' }

Conditional includes
Did you know you can include a stylesheet only for a specific browser? Are you thinking of IE by any chance? Here is how:

stylesheets:
                  - ie7.css: { condition: IE 7 }
                  - ie6.css: { condition: IE 6 }

If you have any more tips that you want to share, feel free to post a comment and share it with the community.

OK, so we were about to reinvent the wheel when Antoine Abt suggested we take a look at lessphp, a very cool project by Leaf Corcoran starting to port LESS into PHP. We bit the bait and it paid off. Leaf was super-cool about us including the lib into the symfony plugin and we released a new and better plugin to use LESS in symfony. Updating the old CSS plugin with the new one using LESSphp made sense on several levels:

1) LESS augments CSS with some great features: variables, nested inheritance, mixins and accessors and other neat stuff.
2) LESS was already a popular Ruby gem, so it’s syntax is well documented. It should be fairly easy for the symfony community to start using it.
3) We are firm believers of “If something already exists and works well, don’t reinvent it.”
4) Leaf had already done most of the hard work. Porting it to symfony was an easy task.

How the plugin works

Download the plugin from http://www.symfony-project.org/plugins/sgLESSPlugin and install according to instructions. Once the plugin is installed, create a file ending with the extension .less in the /web/css folder of your application. In our case we created a file called main.less. What sgLESSPlugin will do is parse main.less and dynamically generate the output when accessed as /css/main.css, so in your view.yml, all you have to do is call:

1.stylesheets:    [/css/main.css]

Using LESS

The 5 main features of LESS are: variables, nested inheritance, mixins, accessors, and operations.

Variables
Variables allow you to define values of specific things like colors, font-family, width etc… in one place and use them elsewhere. The syntax to use variables is:

@pagewidth: 960px;
@purple: #5d2458;

body {
background-color: @purple;
}

.wrapper {
width: @pagewidth;
}

The output for this will be:

body {
background-color: #5d2458;
}

.wrapper {
width: 960px;
}

Nested inheritance

Nested inheritance is my OCD dream come true. Instead of writing out each rule separately I can nest them in a nice neat fashion.

.bottomnavigation {
width: @pagewidth;
a {
color: #000;
:hover {
color: #ffcc00;
}
}
}

Becomes:

.bottomnavigation {
width: 960px;
}

.bottomnavigation a {
color: #000;
}

.bottomnavigation a:hover {
color: #ffcc00;
}

Mixins

Mixins are classes that allow other rules to be embedded in them.

.round_corners {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;

}

#pricebox {
.rounded_corners;
}

#promobox {
.rounded_corners;
background-color: #fc0000;
}

Becomes:

.round_corners {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;

}

#pricebox {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

#promobox {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: #fc0000;
}

Accessors

Accessors allows you to access values in other classes.

.article {
color: #010101;
}

.comment {
color: .article['color'];
}

Becomes:

.article {
color: #010101;
}

.comment {
color: #010101;
}

Operations
Operations let you add, subtract, divide and multiply property values and allow you to change multiple values proportionally.

@borderwidth: 2px;

.boxBorder {
border: @borderwidth * 3 solid #ccc;
}

Becomes

.boxBorder {
border: 6px solid #ccc;
}

That’s the simple explanation. To explore further, check out the lessPHP homepage or http://lesscss.org/.