June 7, 2013

LESS and the new workflow

By Kilian Frey

I read somewhere that 2013 was the year for focusing on performance (which was probably more just the result of someone needing to get a post out) after the previous year’s gluttonous affair with responsive web design. Dane and I (mostly Dane) came up with a new workflow to coincide with the new super-theme we’re developing. The biggest concern we had was that our codebase was getting out of control with the growing number of themes. I was finding that I was writing more and more CSS for each theme, and then piling it on, all the while fighting with Bootstrap. We decided that LESS was going to be the core of our front-end development, as Bootstrap was written in it and we could granularly control it by deciding which parts of Bootstrap we really needed, and very quickly. By deciding which portions of Bootstrap we’re going to load, we can stop fighting with particular pieces we don’t want.

The Workflow

The core of the workflow (see chart) is that each person has their own sandbox instance of WordPress running on MAMP, but they share the same files out of DropBox. This way each person has a 100% realtime view of their code without waiting for a development server to update. The files are seamlessly shared by the users, but also are picked up by a local development machine running a mirrored version of the production site. This helps to see what changes will look like on the full site without committing the files to Git.

For our LESS processor, we decided on Codekit. Well, it wasn’t really a decision as it’s hands down the best thing out there right now. It does exactly it’s supposed to, and as a bonus, possibly the best feature is the live update where a developer can just hit “save” in an editor, and Codekit will detect the change and refresh the browser in a split second. It’s a small thing, but it’s a huge time saver.

workflow


LESS setup

Smashingmagazine.com wrote a great article¬†on how to use LESS with Bootstrap, and they had some wonderful solutions for code organization. I won’t go into the step-by-step details of the setup, as so many others have covered that. One of the biggest takeaways was the realization that if we ever wanted to update Bootstrap, we’d need to create copies of the files we want to edit. The solution is to just prepend “custom-” to those files from Bootstrap you want to edit, namely variables.less, mixins.less, and bootstrap.less (which loads the former two, among others). Once those are in order, we call them in style.less (see below), which compiles to style.css in the WordPress template directory.

// Bootstrap
@import "../bootstrap/less/custom-bootstrap.less"; 
@import "../bootstrap/less/custom-responsive.less"; 

// Typography
@import "typography-ALL.less"; 

// Common to all devices
@import "common-ALL.less"; 
@import "widgets-ALL.less"; 

//
// Responsive: Desktop on up
// --------------------------------------------------

@media (min-width: 768px) {

	// Thin strip
	@import "thinstrip-DESK.less"; 
	// Header
	@import "header-DESK.less";
	// Dropdown menu
	@import "dropdown-menu-DESK.less";
	// Common to mobile
	@import "common-DESK.less";
	// Homepage
	@import "homepage-DESK.less";
	// Widgets - all of them
	@import "widgets-DESK.less";
	// Footer
	@import "footer-DESK.less";
}

You might notice that we seem to be segmenting out the files too much, but this allows us to build future themes off these smaller files. Since Codekit compiles all of these files into a single minified CSS file on the backend, it really doesn’t matter how many we have. For example, the next theme we build might not even have a dropdown menu, so we can easily leave that out by picking and choosing which .less files to include and we avoid loading 5,000 lines of CSS.

After working with LESS for less than a week, I’m hooked. It forces you to really think about the code you write and not just write CSS in the moment. The variables and mixins give you powerful control over all styles, which is absolutely necessary if you work for an institution the size of the UW.

Resources

Leave a Reply