Of all the code I write my CSS is probably the messiest and least well-maintained. While I get near-obsessed over the tidiness of other "actual" code I often find my CSS is a complete mess.

When coding I try and follow the DRY approach but with CSS am usually "happy" to duplicate rules over and over; copy and pasting all over the place until CSS files become unmanageable.

Writing CSS if no fun! Especially when you get to the nitty gritty of vendor-specific stuff in CSS3 like border radiuses, background gradients and drop shadows. If you plan on embracing CSS3 then you might want to read on for a better way to code CSS.

A Better Way

Writing CSS should be more like programming - with variables, methods and the like. This is where LESS steps in - calling itself a "dynamic stylesheet" - it lets you use variables, operators, functions and arguments.

LESS is how CSS should have been implemented in the first place!

Show Me Some LESS

Here's a basic example of some LESS code:

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

When the above code is passed through the LESS "compiler" you get the following CSS out the other end:

#header{
 color:#333333;
 border-left:1px;
 border-right:2px;
}
#footer{
 color:#114411;
 border-color:#7d2717;
}

Perhaps that's enough to convince you of the need to use LESS? If not, read on.

Getting a bit more advanced let's look at another example:

input{
 .border-radius(8px);
 .inner-shadow();
}

The CSS outputted for the above LESS code is:

input{
    -webkit-border-top-right-radius:8px;
    -webkit-border-bottom-right-radius:8px;
    -webkit-border-bottom-left-radius:8px;
    -webkit-border-top-left-radius:8px;
    -moz-border-radius-topright:8px;
    -moz-border-radius-bottomright:8px;
    -moz-border-radius-bottomleft:8px;
    -moz-border-radius-topleft:8px;
    border-top-right-radius:8px;
    border-bottom-right-radius:8px;
    border-bottom-left-radius:8px;
    border-top-left-radius:8px;
    -webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.4);
    -moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

Which would you rather maintain - the LESS or the CSS? If you want to change the border radius to 6px you'd have to do it in about a dozen places in CSS, compared to 1 place in LESS. Sold on the idea yet? You ought to be!

In the LESS code above the .border-radius() and .inner-shadow() bits are what's known as "mixins" in LESS parlance. You can write your own mixins but I just downloaded a load of predefined ones called "LESS Elements". This gives you a file called elements.less which you need to include in your LESS code before using the mixins. So the LESS code I pasted above should actually have been this:

@import "elements.less";

input{
 .border-radius(8px);
 .inner-shadow();
}

For a good example of advanced use of LESS download Bootstrap and take a look at how they organise their LESS files and how it all works.

If you do any decent amount of CSS coding then I'd say it's worth your while looking at how using LESS could help with that. I love it!

Where to Write LESS?

The best way I've found to write LESS code and compile to CSS is with the Crunch App, which you can see below:

There's a .Net version with which you can write LESS directly in Visual Studio and have .Net produce a cacheable CSS file from it - on the fly!

If you're a Domino developer then you'll have to resign yourself to the idea of maintaining the CSS outside of Domino Designer. Although I guess you could use WebDAV to save CSS files directly in to the NSF? That's a rainy day project I guess...

Recent Blog Posts

232

Mapping Document Collections To Views | Blog Thu, Apr 11th 2013 4:00a Jake Howlett It's now a couple of months since I wrote about a Super Useful Set of LotusScript Wrapper Classes, which I've written about on and off since February. Today I want to share a few more extensions I've made to them, which help massively when it comes to getting documents from views. Imagine the following use scenario: Dim factory As New CustomerFactory() Dim coll As CustomerCollection 'Let's get a collection from a view Set coll = factory.GetAll() 'Or you could to this Set coll = factory [read] Keywords: domino lotusscript notes database

217

Making Google Apps For Business Behave Like a Mail Client | Blog Wed, Apr 3rd 2013 4:16a Jake Howlett So, I mentioned that I've moved to a new PC and, for the first time in years, I didn't install a dedicated Mail client/app. Instead I'm using direct web access to Google Apps For Business (posh name for paid-for Gmail). The one thing I never liked about using Email in a browser is that I constantly close and re-open the browser. Thus, in effect, closing my email client, which I then have to remember to re-open. Now though I've made it seem like a real app. You can do this using Chrome's "a [read] Keywords: application email google

278

Documenting Your LotusScript Classes | Blog Wed, Mar 27th 2013 4:00a Jake Howlett Just a quick LotusScript tip: Hopefully you've been inspired by my recent adventures in creating custom LotusScript classes. If so, you'll have noticed that, when creating your own properties and methods in these classes that they get their own comments added in. For example, if you type "property get foo as string" and then press return, you'll see something like this:%REM Property Get Foo Description: Comments for Property Get %END REM Property Get Foo As String End Property Domino De [read] Keywords: domino lotusscript properties

241

The Perfect Desk Quest - 2013 Update | Blog Tue, Mar 26th 2013 6:20a Jake Howlett It must be time for another update on how my desk is evolving towards the elusive "perfect desk". Previous updates here. Here's my desk now, following a recent overhaul: The two main differences from before: The Lenovo T400 laptop and its docking station have gone and the left-most monitor has moved positions to be on the right. My desk needs to not only keep up with the way I work, but also the changes of the times. I decided it was time I got "with the times" and "embrace the cloud" an [read] Keywords: domino lotus notes database development email laptop microsoft office outlook server vm

213

Updating Glyphicons in Bootstrap | Blog Thu, Mar 21st 2013 4:00p Jake Howlett Using Bootstrap, whenever I want to an icon to an element, I simply write HTML like this: Add New And I get something like this: The choice of icons is documented here and the icons themselves are based on Glyphicons "halflings". All is good. However, recently I found myself wanting to use an icon to show that a document had some attachments. Naturally, I wanted a paperclip. Just like a magnifying glass denotes searching, a paperclip denotes a file attachment. Who knows why! To my sur [read] Keywords: css twitter

167

Easy Access to Sub-Collections of the DocumentWrapper Class | Blog Wed, Mar 20th 2013 12:30p Jake Howlett My favourite feature of the Wrapper Classes I keep going on about is the ready access they can give to any given class's related sub-classes. For example, let's say you have an object based on the Customer class and you want to find all their Invoices. Wouldn't it be nice to write code like this in a WQO agent:Dim customer As Customer, invoice As Invoice Set customer = New Customer(web.document) If customer.Invoices.Count > 0 Then Set invoice = customer.Invoices.getFirst() While Not i [read] Keywords: agent properties

191

Easy Access to Sub-Collections of the DocumentWrapper Class | Blog Wed, Mar 13th 2013 4:20a Jake Howlett My favourite feature of the Wrapper Classes I keep going on about is the ready access they can give to any given class's related sub-classes. For example, let's say you have an object based on the Customer class and you want to find all their Invoices. Wouldn't it be nice to write code like this in a WQO agent: Dim customer As Customer, invoice As Invoice Set customer = New Customer(web.document) If customer.Invoices.Count > 0 Then Set invoice = customer.Invoices.getFirst() While Not [read] Keywords: agent properties

225

Creating New Documents Based on the DocumentWrapper Class | Blog Mon, Mar 11th 2013 7:20a Jake Howlett So far, we've seen how to "wrap" an existing document inside a custom class, which is based on the DocumentWrapper subclass. But the document we wrap doesn't have to exist. We can use the DocumentWrapper classes to handle creation of new documents. Imagine that, anywhere in your LotusScript, you could write this: Set invoice = New Invoice(web.database.CreateDocument) invoice.Number = factory.GetNextInvoiceNumber() invoice.Value = 12345.98 invoice.Save() Wouldn't that be cool!? It's quite [read] Keywords: lotusscript database properties

369

Extending The LotusScript Wrapper Classes | Blog Fri, Mar 8th 2013 3:03a Jake Howlett The wrapper classes I blogged about in February went down a lot better than I thought they might. So, taking it further. Let's extend the DocumentWrapper class some more. Since first writing about them on here I've been busy using and extending them as I go. Here are a few examples of some of the properties I've added Simple Helper Properties Some very simple properties: WebLink, UNID and IsNew. Property Get WebLink As String WebLink = "/" + Replace(web.database.Filepath, "", "/" [read] Keywords: domino lotusscript database properties

421

How to Do Infinite Scrolling in Domino | Blog Wed, Mar 6th 2013 3:00a Jake Howlett Last week I linked to a Domino-based infinite-scrolling view demo and promised I'd write up how I did it. Even though the reaction to the demo was mixed I'm a man of my word, so here goes. It always surprises (worries!) me when I'm asked to either share a downloadable copy of a demo or write a how-to about it. Particularly when it's something that's all but completely web-based. The code is there to see; just a click away. That said, in this case, unless you're familiar with jQuery and/or [read] Keywords: agent domino lotusscript notes ajax application development server