Using Less CSS, BluePrint and WP for a Faster Workflow

Less.CSS is becoming a popular tool for making stylesheets “dynamic”. I’ve been working with integrating Less.CSS with WordPress for a while now, so today we’re going to be looking at a short tutorial on how to get started with using it and the BluePrint CSS framework for a faster workflow in WordPress.

What is Less CSS?

I know what you’re thinking but, sorry folks, it doesn’t mean that you just write LESS code. How many times have you been working on a project and wished that you could simplify things by including a function in your CSS file, using some variables to change up colors or other properties, or other programming like techniques? With Less CSS, your wish can be turned into reality.

Less is a CSS tool that enables you to speed up and simplify your development by letting you use variables, inheritance ( via mixins ), functions ( operations ) and more. In a nutshell, Less CSS gives you the ability to mix programming techniques with your CSS. Enough talk though. Lets get started!

Less comes in two main flavors, a compiled version and a JavaScript powered version. For the purpose of our discussion we are going to be focusing on the compiled version. I’ve chosen to focus on this version primarily because I don’t like including files in my site that I don’t have to. After all, each file that your site needs to function and look attractive causes the site to load a little slower.

So the way it works is as following: you visit the following link and download the app for mac. Sorry Windows users, it’s Mac only, so this version of the tutorial will only work for Mac users. Once you download the app you have to set up your site structure ( which I will cover below ).

We will be covering a great deal of content in this tutorial. I believe in working as efficiently as possible with the best tools available. For this reason, we will be employing WordPress and Blueprint to work with this project. Before moving to the next step go ahead and download the Blueprint Framework.

The only file we are going to be using is screen.css since it combines all the major files that make up the framework into one file. Go ahead and find that and pull it out to your desktop. For the purposes of brevity this tutorial assumes you are familiar with setting up WordPress as well as the basics of Blueprint. If you need more information on this, leave me some comments and I will reply or will write a post on it. There is also an informative tut on Nettuts about Blueprint

In order to set up your file structure refer to the screenshot below. This is what your directory structure should look like, minus the css files in the stylesheets folder. These will be auto-generated for you when you save a file.

The important things to take from this screenshot are that we have a styles.css folder in the theme directory in WordPress which does some trickery. This file just pulls in some other files from a subdirectory via the @import directive. The reason for this is that WordPress uses the comments in styles.css to identify a theme. Not putting that in tends to mess things up pretty badly. By including files in the styles.css file via a composite nature we are essentially taking advantage of all the dynamic features of Less CSS while making sure that our theme behaves properly in WordPress. We are minifying our CSS too, to speed up the load time of the site. In addition, it will strip out all comments and white space.

There are a few settings which I like to check. You probably want to do that as well. Below is a screenshot of these.

Next, place the screen.css file in a subdirectory named stylesheets along with a main.css file. Then rename both of these files to have a .less extension instead of .css. Once you have done that, go ahead and fire up the Less app on your Mac and drag your theme folder into the App. This essentially sets it up so the Less app knows about your project. Now, each time you save your less files they get auto compiled into CSS. Pretty nifty huh? If for some reason this doesn’t happen, then you can click the compiler tab and click compile all.

Ok, so now that all of this is set up, what does Less really do for me? I’m glad you asked young Padawan. Let me show you!

So, say you have a few primary colors on your website. Instead of having to put the hex or RGBA values each time you want to use a color, you can simply use a variable to store your color and then use the variable name to identify the color you want to use. For instance, to store light gray you can declare a variable like so:

@lightGray = #ddd;

/* -- and then use it in your css like this: --*/

div#box1 { background: @lightGray; }

Now, whenever you need to change your color all you have to do is change the value of @lightGray and it will propagate it all out to the rest of your css file.

The next nifty trick I want to discuss is inheritance. For the CSS newbies out there, inheritance just means that one class can inherit or pick up traits from a previous class ( Parent class ). This is done by a Less construct known as Mixins. These virtually embed all of the properties of a class inside another class. One of the cool things about Mixins is that whatever property you specify in your child class will override the same behavior that is being inherited from the parent class. In plain English, this means that I have a class that makes up my buttons on my page using some handy css3 gradients. Although I like the padding, font size, and other attributes on the button, I may want my colors to change. I would do the following:

/*-- Button that I am using as the base / parent button --*/
.myBlueButton {
display: block;
padding: 4px 12px;

background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */

}

/* -- Button that Im using as the child / inheriting button --*/
.myGreenButton {
.myBlueButton;
background: rgb(157,213,58); /* Old browsers */
background: -moz-linear-gradient(top, rgba(157,213,58,1) 0%, rgba(161,213,79,1) 50%, rgba(128,194,23,1) 51%, rgba(124,188,10,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(157,213,58,1)), color-stop(50%,rgba(161,213,79,1)), color-stop(51%,rgba(128,194,23,1)), color-stop(100%,rgba(124,188,10,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* W3C */
}

There is one caveat to keep in mind. If you are using the css3 gradient generator, Less doesn’t seem to like the line that begins with filter. As you can see, the child button grabs all the behavior from the parent button by including the attributes of the blue button on the line marked.

myBlueButton;

.

It then overrides the color by specifying its own background colors. The next and last item we will be covering is using a parametric mixing ( a mixing that takes parameters ) with Less. This is useful in instances where you are using browser specific prefixes and such.

.borderRadius (@border_radius) {
-moz-border-radius: @border_radius;
-webkit-radius: @border_radius;
-border-radius: @border_radius;
}

Of course, there are many more behaviors and effects you can implement. You can follow the link at the top of the tut to the Less site and study to your hearts content. There is also a quick tip video on Nettuts that talks about the Less.js library.

Conclusion

That’s the basics of how to set up a project to use in WordPress with Less and BluePrint. I hope that what you learned here today will prove to be useful to you in future projects. If you have any more questions, please feel free to respond in the comments.