CSS (Cascading Style Sheets) is the language used to define the layout of web pages. The language is fairly simple, you target an element using a selector and then define how it should look with the available properties. It’s an approachable language which has it’s advantages in terms of opening up the web to those without a background in computer science!

Its simplicity is also its downfall. Say you want to give two elements the same background colour, you have no choice but to repeat yourself. When one of the elements is hovered over we want to lighten the background colour. It’s of course possible. However, you have to work out the new colour value. Now when it comes to completely swapping out the colour, it’s not as simple as a find and replace. You not only have to find every instance of the original colour, but also any related colours (like our hover colour).

What are CSS preprocessors?

A CSS preprocessor allows a developer to write cleaner, more maintainable stylesheets using principles borrowed from the world of programming. These tools compile down to standard CSS, maintaining browser compatibility. There are a number of popular CSS preprocessors including Less, Sass and Stylus. Theres also Spiffing CSS, but its real world usage is unknown!

iWeb’s Andrew McCombe has been working with Less recently on a client project. Back to our previous example, as Andrew explains, “Less allows you to assign a colour to a variable and then re-use that variable throughout the outputted CSS file”. As well as being able to define variables which can be reused, Less has a number of built-in functions which among other things can be used to transform colours. Using the lighten function for example, we’re able to generate our lighter background colour based on the original colour.

Doing more with Less

John Cotton presenting his “Doing more with Less” talk at WordCamp Lancaster UK 2013

A CSS preprocessor is just one component of a web project. John Cotton, a freelance web developer based in Oxfordshire gave his first WordCamp talk “Doing more with Less” last year at WordCamp Lancaster UK 2013. Primarily focused on WordPress development for the past 4-5 years. John keeps the use of plugins to a minimum, preferring to write functionality from the ground up. The focus of his talk was around the use of the Theme Customizer and his use of Less.

John gave an early insight into to his work with Spot Travel, a niche hosted website service for small holiday tour operators. The platform is based on a domain mapped WordPress multisite, hosted on WP Engine. It’s being built by a small team of remote developers who work and communicate over Skype. John is responsible for the PHP back end and some front end work.

Customers sign up for a “Spot Site”, creating a new site on the network with it’s own appearance and content. The business model is based around providing tour operators with a free website and taking a transaction fee from bookings made through the website, aligning the interests of Spot Travel with their customers.

John is using WordPress as an application framework, the customer may never be aware of the underlying WordPress installation as the customer manages their site through a custom-built front end administration system, dubbed SpotCenter.

Customising the Customizer

John Cotton demonstrating The WordPress Theme CustomizerSpot Travel customers have a number of themes to choose from, each a child theme of a base theme which provides core functionality for all sites on the network. These child themes can be further customised using the WordPress Theme Customizer, which was introduced in WordPress 3.4.

For example, the customer has control over colours so they can easily have their website match their branding. The Customizer allows them to select a new colour and see their choice reflected in a live preview. The customisations are saved and compiled into CSS using a PHP based, server side Less compiler. For Spot Travel, Less was chosen over another CSS preprocessor, such as Sass as the team was already familiar with Less. John demonstrated the system, with all the heavy lifting done in the background, the system was seamless and responsive.

Life is a journey, not a destination

The web is a constantly moving, fast paced industry. Everyday we see new techniques and technologies. It’s an exciting industry to be part of. Keeping up with the next big thing is often difficult. In this post we’ve touched on one of the more recent technologies which has been building in popularity. Whilst not strictly cutting edge, the use of CSS prepreprocessors is set to continue. We’ve taken a look in particular at the Less stylesheet language. We’ve shown some examples of its use and gone through some of the benefits.

I’ve got to say thanks to Andrew McCombe for taking me through his recent work using Less to easily set colours throughout a project and to John Cotton for giving his excellent talk and demonstrating his use of the WordPress Theme Customizer and Less at WordCamp Lancaster UK 2013.