354 Lotus blogs updated hourly. Who will post next? Home | Downloads | Events | Pods | Blogs | Search | myPL | About 
 
Latest 7 Posts
A Tool I Made To Export From Notes to SQL (ETL) | Blog
Tue, Jan 14th 2014 142
The Perfect Desk Quest - 2013 Update (Part 2) | Blog
Wed, Dec 11th 2013 79
Recovering a Laptop After Forgetting Windows and BIOS Password | Blog
Wed, Dec 4th 2013 71
Rockall Design Now in its 11th Year! | Blog
Fri, Nov 1st 2013 99
Using Font Awesome Icons in Fireworks | Blog
Mon, Oct 14th 2013 145
Document Action Logs, Including "Limitless" User Comments | Blog
Wed, Sep 25th 2013 212
Bootstrap Advanced Date Picker Plugin | Blog
Fri, Sep 6th 2013 167
Top 10
The Hidden Cost of Holidays | Blog
Thu, Jun 14th 2012 289
Document Action Logs, Including "Limitless" User Comments | Blog
Wed, Sep 25th 2013 212
Money Saving Expert
Wed, Jun 15th 2011 189
Bootstrap Advanced Date Picker Plugin | Blog
Fri, Sep 6th 2013 167
Using Font Awesome Icons in Fireworks | Blog
Mon, Oct 14th 2013 145
A Tool I Made To Export From Notes to SQL (ETL) | Blog
Tue, Jan 14th 2014 142
Web Services: Using Complex Types | Blog
Mon, Apr 16th 2012 139
How To Remove Voice Command From Galaxy S2 Without Rooting | Blog
Tue, Jul 10th 2012 136
Updating Glyphicons in Bootstrap | Blog
Thu, Mar 21st 2013 103
Solution to Java Applet Puzzle | Blog
Fri, May 4th 2012 102


Writing LESS CSS
   

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:

image

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...

Click here to post a response



---------------------
http://www.codestore.net/store.nsf/unid/BLOG-20120119-0427
Jan 19, 2012
37 hits



Recent Blog Posts
142


A Tool I Made To Export From Notes to SQL (ETL) | Blog
Tue, Jan 14th 2014 6:10a   Jake Howlett
As I watch all my customers leaves Notes/Domino behind, all I can do is try and assist as best I can. As part of this process I've found myself creating a Notes-to-SQL export tool. The tool is Notes-based and involves the following three part process: Step 1. Loop through and analyse every single document in the target database and build a list of all unique combinations of Form + Field + Data-Type. For each combination it finds, a Notes document is created which lists the Form name, the Fie [read] Keywords: domino lotus notes rich text database server sql
79


The Perfect Desk Quest - 2013 Update (Part 2) | Blog
Wed, Dec 11th 2013 3:10a   Jake Howlett
Back in March I updated you all on how my on-going quest for the perfect desk was coming along. Here now is another update. Question: Can you ever have too many monitors or enough "real estate" desktop size? Answer: No! Here's how my desk looks now: From left to right, there's a (newly-added) Dell U2713H (showing OS X), a Dell U2711 and a Samsung SyncMaster 245B (both showing the same Windows 7 PC). All in there are 9,676,800 pixels glaring back at me!! Aside from adding a brand new monito [read] Keywords: desktop mac
71


Recovering a Laptop After Forgetting Windows and BIOS Password | Blog
Wed, Dec 4th 2013 3:10a   Jake Howlett
My sis-in-law loves a bargain (she's from Yorkshire!) and recently rang to ask me (via her sister, my wife) if I'd be able to recover a laptop she'd been offered, before she went ahead and bought it. Apparently the owner of the laptop had forgotten the Windows password and had written the laptop off as worthless, so was willing to sell for next-to-nothing. I said yes, I'd able to do something with it. What I didn't realise was that it might have a BIOS password, which it did! Initially I' [read] Keywords: google laptop password
99


Rockall Design Now in its 11th Year! | Blog
Fri, Nov 1st 2013 4:00a   Jake Howlett
Rockall Design ltd (the little company I run from the office-slash-garage in my garden) was 10 years old yesterday. It's customary on this day each year that I plot a chart of turnover growth over the years. So, here it is: As you can see it's been a bumper year. Last year I put down what, at the time, I thought was a good year to: Long hours and 'hard' work. But mainly luck! This year is much the same. Although, if I thought I was doing long hours back then I had no idea what was in stor [read] Keywords: domino lotus microsoft office
145


Using Font Awesome Icons in Fireworks | Blog
Mon, Oct 14th 2013 4:00a   Jake Howlett
The font-based web icons from Font Awesome is brilliant. Especially when used in conjunction with Bootstrap. You can quickly and easily add any one of the icons to your HTML buttons (or many other elements for that matter). Like so: Sometimes though, you can't use web fonts. Either you can't rely on them being supported or, for some other reason, you just want to use an image file. That was the case for me recently and I wanted an image file of an exclamation mark. Here's how easy it was usi [read] Keywords:
212


Document Action Logs, Including "Limitless" User Comments | Blog
Wed, Sep 25th 2013 4:00a   Jake Howlett
Action Logs are something I'm sure we've all added to the bottom of a Domino web form. Here's an example of one I added to a recent Domino-based app I created and then wrapped with Bootstrap. The log is shown to the user as a three column table(when, who, what) with the latest action first. My approach to storing this data has always been to use a single multi-value text field. The value stored might look something like this:24/09/2013 17:08:12^^24 Sep '13^^17:08^^Joe Bloggs/ROCKALL^^Docum [read] Keywords: admin agent domino lotusscript ajax css email




167


Bootstrap Advanced Date Picker Plugin | Blog
Fri, Sep 6th 2013 4:00a   Jake Howlett
For some time now I've been creating date fields in Bootstrap-based websites that look like this: Clicking either in the field or on the button next to it launches a date-picker, like this: In the Notes Form the Date Field is configured in such a way that it accepts dates in the format 12-Dec-2009 (while storing them in normal Notes DateTime format of course). The field properties are like so: It all works well and users like them. Not least because there's no confusion over whether it' [read] Keywords: domino notes application javascript properties
73


Quick Tip: Login To Same Site as Two Different Users | Blog
Tue, Aug 20th 2013 12:00p   Jake Howlett
Here's a tip I discovered kind of by accident in one of those "I wonder if" moments. It came about after discovering a Fiddler tip that lets you trace localhost http traffic. The solution is simple: you simply add a trailing space, so that you surf to http://localhost./ At first I'd assumed that this was some odd quirk in the way browsers handled host names. Turns out it's actually working the way it should. Technically speaking all FQDNs should have a trailing space, in order to make them [read] Keywords:
99


How To: Virgin Media + BT Infinity = Reliable Internet Connection? | Blog
Mon, Aug 12th 2013 4:03a   Jake Howlett
The quest for an always-on internet connection is almost at an end! As if to assure me it was worth it, within 24 hours of Virgin Media connecting my secondary (failover) broadband connection the "primary" BT line went down. Again. For the third time in as many months. This time, however, I was prepared and had a backup connection and could carry on working. The BT engineer that came this time was very helpful. Bordering on apologetic for the fact I'd had so many visits of late. So much so he [read] Keywords: admin agent email interface wifi
66


Modern Day Communication Reliability | Blog
Thu, Aug 8th 2013 4:09a   Jake Howlett
Two weeks ago today I mentioned that I'd ordered a Virgin Media cable internet connection as a redundant 2nd connection in case my first goes down. Today the engineer is due to come and connect me up. Yep, a two week wait to get connected. Luckily I'm already on the internet, otherwise there's not a chance I'd ever wait that long. Anyway, I booked a date and the AM time slot for the visit and went about "waiting". Then, yesterday I got the message below: Which sent my overly-paranoid an [read] Keywords: twitter




Created and Maintained by Yancy Lent - About - Blog Submission - Suggestions - Change Log - Blog Widget - Advertising - Mobile Edition