How to Manage Dozens of Themes?

How to Manage Dozens of Themes?

In the world of web applications, there is a clear divide between the front-end (client) and the back-end (server); In the last several years, frameworks have emerged for both areas that offer substantial time savings in development and design. Libraries like jQuery, Backbone.js, and Underscore.js make life in the front-end much easier, and technologies like Spring, Hibernate, and Jersey reduce tedious rework and ease integration in the back-end.

It’s only logical that tools would evolve also for creating stylesheets, which can grow to gargantuan sizes in an enterprise portal environment. Enter LESS (and other CSS pre-processors), which provides JavaScript-like functionality to CSS – the ability to define variables, create functions, and nest rules, which results in being able to write better code, faster. In a Liferay portal with dozens of themes, the time savings achieved by using a pre-processor can grow to be substantial.

Variables

The attention to the styling of a website can often be eclipsed by the attention to the functional specs; how a website *works* is more important than how a website *looks*. If the styles are ignored for too long, however, especially in a Liferay portal environment with lots of themes, performing edits or upgrades can become hard to manage.

LESS allows for the declaration of variables, which greatly simplifies the reuse of colors, dimensions, and properties. Want to change the entire color palette of the site? Change 2 or 3 variables. Want to add a layout for large, widescreen monitors? Add a single variable and re-use logic for containers and columns. Want to change the size of every piece of text on the site? Define a base font-size and scale all other elements from that.

Variables also allow for consistency between themes – common elements like fonts, banners, and logos can be changed across dozens of themes by altering a single variable.

Functions

The use of functions (or mixins) in CSS pre-processors is well-documented; it’s easy to find libraries that will provide multiple vendor prefixes (-moz-, -webkit-, -o-, -ms-) or adjust multiple properties with a single parameter (border-radius, text-shadow). What about a function that will allow you to use different versions of images based on the style of the theme? By passing in parameters like size and color, it’s possible to create themes that are ‘aware’ of their layout and color palette and can provide corresponding images.

Here’s an example of a logo that can adjust its color and width, with a default of 280px:

.logo (@color, @size: 280px){
background:url('../images/logos/example-@{color}-logo-@{size}.png') center center no-repeat;
}

To use this in a LESS file, this function simply needs to appear along with any other CSS properties:

#my-logo {
position:absolute;
top:25px;
left:50px;
.logo("black", 200)
}

This would output a logo with background image source:

‘../images/logos/example-black-logo-200.png’

Again, the use of LESS allows for more efficient, more flexible code that reduces rework, enabling common elements between themes that can easily be changed to match the overall aesthetic of the theme.

Nesting

The benefits of a CSS pre-processor that allows nesting are two-fold. First, it saves time and keystrokes by not having to re-type selectors. For example:

#my-section {
border:none;
background-color:#000;
  a {
  color:#FFF;
  }
}

Is rewritten by LESS into:

#my-section {
border:none;
background-color:#000;
}
#my-section a {
color:#FFF;
}

Second, nesting ensures that all of the style definitions have the proper top-level selector. This is especially important in a portal environment, where there is no guarantee that a given class is not in use. From the example above, if ‘#my-section’ contained all of the edits, there is no chance that another, more specific selector (from either the Liferay portal or the browser styles) will take precedence. Avoiding these conflicting CSS rules is a huge time saver and prevents the front-end team from having to play ‘CSS Detective’ more than necessary.

In conclusion, the addition of a CSS pre-processor to any development environment can be a great quality-of-life improvement by increasing the productivity and consistency of the front-end development team while simultaneously decreasing maintenance overhead. When applied to Liferay portal, a pre-processor can assist in ease of re-use between themes and avoiding collisions and overwrites from existing styles.