LESS Chronicles – Structuring

So we last left off with a primer on how LESS works within PageLines, and how you can utilize the variables that we’ve got in place to make your sections dynamic. Today we’re going to dive deep into a style.less file, and I’ll show you what habits I’ve learned after spending a few hundred hours with LESS (I have the slight advantage in that it’s actually my job). Let’s dig in ya?

Style Primer

As I talked about briefly during the last post, all style.less files found within the framework will automatically be loaded, compiled, and cached. All sections within the parent theme, and any style.less files found within a child theme will automatically be loaded. Plugins need only a filter to add their LESS file to the array.

add_action( ‘template_redirect’,’my_plugin_less’ );
function my_plugin_less() {
$file = sprintf(‘%sstyle.less’,plugin_dir_path( __FILE__ ));
pagelines_insert_core_less( $file );
}
note: when using a child theme you’ll still need a style.css file with the appropriate headers so it knows to load the parent theme. Other than that, all CSS/LESS can go into the LESS file.

Global Vars

At the top of all my less files I start with something like this:

//Global Vars
@alpha: #352432;
@bravo: #266390;

What we’re doing here is setting the stage for all of the variables that we’re going to be using throughout the LESS file. Listing them at the top makes updating a snap, without having to dive down into the code at all. It’s worth noting that I really don’t set out all the variables first, merely create the place for them. Since I like to design in-browser and in real-time, colors and the like shift, so when I know I’ve got something I like, only then do I create the variable for it. Otherwise you’re jumping all over the style mucking around and replacing junk.

Another benefit of grouping the vars together is that it’s relatively easy to spot the complex relationships between them. Take for example a basic color, and another color that uses that color to form it’s own color. You’ll notice the second var @bravo is indented; this reminds me not to change this, because it’s linked dynamically to the var before it.

//Global Vars
@alpha: #352432;
@bravo: darken(@alpha,20);

MixinsI use mixins like cray, and during the course of a design they changed quite often. So just like the Global Vars, I keep these at the very top of the style. Anywhere I think a styles properties will be repeated, it goes into a mixin that I can re-use throughout the style. This of course makes updating quick and easy, blah blah blah, but really I think it’s just plain smart practice.

//Global Vars
@alpha: #352432;
@bravo: #266390;// Article Back
.my-article-back {
background:darken(@alpha,50);
color:@bravo;
border-top:1px solid darken(@alpha,10);
.box-sizing(border-box);
}
// Note Back
.my-note-back {
background:darken(@alpha,20);
color:@bravo;
border-bottom:1px solid lighten(@alpha,50);
}

.article {
.my-article-back;
}

If you’re a little slow, let’s go over this. We have two mixins; .my-article-back, and .my-note-back. Imagine we travel down the stylesheet a bit and we come across the .article class. Instead of writing all those properties out, we bundled it into a mixin and are just calling the class and it’s properties into play. This means that code will not be re-used anywhere, and means we only have to update it in one place. Awesomesauce indeed.

Carry On

If you’re not creating something with multiple themes, just start writing out your code after the mixins and that’s pretty much that. For the sake of all things holy, we’re going to pretend you’re building a child theme, and want to have multiple themes (means a duck load of LESS to write). I’ll start with the default layout of the theme, minus colors (typically in a multi-theme, theme, we’re dealing with mostly color changes across the board).

After I’ve got most of the defaults in place, I mark this as //Defaults (double brackets in LESS comments mean they won’t be visible in source, but comments marked up like /* This */ will appear), then I start to code out the different styles for the different themes using body classes. In the theme itself, I’m just passing a user selected php variable that creates a new body class. I end up with classes like body.theme-light and body.theme-dark.

But body classes? WTH isn’t that slow? Ya not really, and even if it does add on nanaseconds I really don’t care. Not only does this technique automatically namespace everything without effort via nesting, but in addition the code is easier to read, manage, and without repeating classes over and over and over again. The pros outweigh the cons of the possibility of precious wittle nano-seconds that may or may not be lost as it runs though parsing classes. Anyhow, so our stylesheet now looks something like this;

//Global Vars
@alpha: #352432;
@bravo: #266390;// Article Back
.my-article-back {
background:darken(@alpha,50);
color:@bravo;
border-top:1px solid darken(@alpha,10);
.box-sizing(border-box);
}
// Note Back
.my-note-back {
background:darken(@alpha,20);
color:@bravo;
border-bottom:1px solid lighten(@alpha,50);
}
// Light Theme
body.theme-light {
.alpha {}
.bravo {}
}
// Dark Theme
body.theme-dark {
.alpha {}
.bravo {}
}
// Defaults
body.theme {
.alpha {}
.bravo {}
}
.article {
.my-article-back;
}
Media Queries

Up until just recently, all my media queries for responsive design have been at the very end of the stylesheet, mucked together in clumps of disorganized hoo-has. However, v1.3.7 of the PHP compiler we use within the framework, now allows for bubbling. I covered bubbling with a sample in the first post of this series, but to save you that click, bubbling means you can nest media queries within a class. This is the ultimate in encapsulation and to me makes the most sense.

Wrap Up

As you’ve probably noticed by now LESS within PageLines is handled quite differently than anything else currently available. Hopefully you can at least take away something from these first two posts in the series. If you haven’t, just wait till the next post in the series LESS Chronicles | LESS for the L33t, where we’ll go into using guards and functions! Gasp!