LESS in 5 minutes

LESS is a handy precompiler for CSS, but as it develops it becomes so complex we start assuming that we need a tutorial or long read in order to understand it. I think it’s worthwhile to use just a few very basic capabilities of LESS (leaner CSS) and that you can learn how to use them in 5 minutes. First, on Windows you can use http://winless.org/ If you use WordPress, install Jetpack which comes with an extra CSS option allowing LESS (or use another plugin that has integrated the PHP LESS-compiler). No sweat so far. Take an old CSS file and replace color codes with variables like so: body { color : 77da34; } becomes @green : 77da34; body { color : @green; } Variables are the first thing we absolutely NEED if we want to write leaner CSS. The next is mixins: Instead of...

Read more »

More.less

/* http://designshack.net/articles/css/10-less-css-examples-you-should-steal-for-your-projects/ */ @base: 663333; @complement1: spin(@base, 180); @complement2: darken(spin(@base, 180), 5%); @lighten1: lighten(@base, 15%); @lighten2: lighten(@base, 30%); @lighter1: lighten(spin(@base, 5), 10%); @lighter2: lighten(spin(@base, 10), 20%); @darker1: darken(spin(@base, -5), 10%); @darker2: darken(spin(@base, -10), 20%); .opacity (@opacity: 0.5) { -webkit-opacity: @opacity; -moz-opacity: @opacity; opacity: @opacity; } .border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .box-shadow (@string: 2px 2px 4px rgb(0,0,0,0.5)) { -webkit-box-shadow: @string; -moz-box-shadow: @string; box-shadow: @string; } .drop-shadow...

Read more »

Copying formula's in LibreOffice Writer

Here’s another little annoyance solved: I used LibreOffice to make simple invoices and use the nice calc function to calculate the items in my invoice. However. LO didn’t allow to copy formula’s – or so I thought. I found this after some searching and thought I’d share it with you. It is possible, as explained in the excellent libreoffice forum. ...

Read more »