How To Use LESS with Joomla

390536_8367With its new version, Joomla has become even more useful. One of the several new implementations is the usage of LESS. Some people probably have already used it or been using it for some time but for the rest that want to learn what it is and how to use it here’s a tutorial on its benefits.

I think it’s easy to understand what LESS does if you compare it to PHP. Basically it’s a dynamic stylesheet. The server interprets PHP and outputs the appropriate HTML code. LESS works just like that but the server spits out the corresponding CSS instead. That’s the basic principle of how LESS works.

To be exact, LESS is an extension of CSS and adds quite a lot of new functionality but in this post I’ll discuss variables, functions and mixins.

Part 1 – Variables

You can create a bunch of variables with LESS and use them again and again in the same stylesheet. Lets defice a couple of variables and then I’ll show you how to use them in our template.

@primary : #336699;
@secondary : #444444;
@bordercolor : #d5d4d4;

Once you define them these variables can be utilized wherever you want. For example something like:

color: @secondary;
color: @primary;
border: 1px solid @bordercolor;

The server reads this code and outputs CSS in the traditional format. That’s pretty much it. I see how this example may not be enough to illustrate how all of this can be useful or if it even saves time but think about the whole template for a second. It has hundreds of lines of code but by using LESS you’re able to change a style across the whole template by just altering the variable.

Part 2 – Mixins

They’re basically just a way of adding whole groups of styles into another style if that makes sense. That’s pretty similar to how variables work but here we don’t have a single value but an entire style. Here’s how it works.

.thinborder(@radius: 5px, @color: #d5d4d4, @width: 1px)
border: @width solid @color;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
You can then do it like that:

.moduletable {

Notice how you’re able to change all of the parameters or none if you want to. If you don’t define a parameter the default value is going to be used which in the example I gave would be the default width of 1px. Isn’t that a great way to manage a stylesheet without a bucnh of extra lines of code? By just altering the default style all of the lines that are bound to it will update across the whole stylesheet.

Part 3 – Functions

Functions in LESS are used to do simple commands with variables. There’s multiplication, division, addition, and subtraction which can be used very effectively to easily generate one style, use it all over a stylesheet and still having the ability to change the style on per case basis.

How to use LESS with a Joomla template

IN Joomla version 3 there’s a JUI library stored in the root media folder. That’s where all of the essential LESS files you’ll need are stored if you got Joomla web hosting from a reputable company like Then every template in your Joomla install can use these files by importing them into the LESS files for that particular template.


Why People Should Always Choose Semi-Dedicated Over Shared Hosting

dreamstime_2547523Making a website has gotten immensely easier for regular people in the last few years. You can literary create a self-hosted website with Joomla, WordPress or any other CMS in minutes for under 5 bucks a month. That’s how convenient and widespread shared hosting has become. It’s literary just a case of picking a web host and signing up  – most of them will even trow in a free domain name. But is this the best solution?

I’ve had good, mediocre and bad experiences with shared hosting since I’ve tried out lots of hosts both large and small. Let me tell you right now, there’s no perfect service. Some come very close and that deserves praise for the teams that support them but the average shared package isn’t really that great. What I mean is most websites that are hosted with shared plans are pretty slow when you try to load them. It’s the nature of the shared services plus lots of other factors. For example, a vanilla WordPress installation is pretty fast even on shared plans but most webmaster can’t help themselves but install all sorts of plugins that considerably slow down the whole site.

The best solution, in my opinion is to use a semi-dedicated plan instead. In terms of usability it’s practically just like shared hosting but it has more resources and you’re sharing the server with less people. Most importantly there’s a noticeable difference in the loading speed of your website.

How about cost? One of the main reasons shared plans are so popular is because they’re cheap – People don’t want to spend lots of money on hosting especially for websites that don’t earn any profit. That’s understandable but if you’re serious about your website you should be serious about it’s performance too. And higher performance comes at a higher price, unfortunately. Don’t worry though, it’s not like semi-dedicated plans cost hundreds of dollars per month. You can get one for as little as $20/month! It’s definitely  more expensive than your run-of-the-mill shared plan but it’s still quite affordable.

Why should you care if your site is fast? Well, firstly – slow websites are frustrating for the visitor. Do you want your visitors to do the so called pogo-sticking (clicking on your site in Google, waiting for the page to load, giving up and hitting the Back button of their browser)? Ensuring your site’s fast enough is essential if you want to keep people from giving up even before your content loads.

Second, do you want to earn money with your website? How are you going to do that if your site is slow and people get frustrated? All the awesome content you have on there or your great products will not be appreciated by your potential customers if they don’t trust you. Think about it – would you trust a website that barely loads? That doesn’t look professional, I’m out of here!

Basically what I’m saying is – the investment in proper semi-dedicated package will pay for itself and if you have the means you should definitely pick such a plan over a shared one – you’ll be making yourself a huge favor.

Why I Started Recommending Joomla Instead of WordPress

joomla 3Before starting to go more in depth as to why I’m deciding to no longer recommend a CMS, I just want to remind everybody that this is just my personal opinion – what works for me may not necessarily work for you and vice versa.

I’ve recommended WordPress for years to users with varying level of technical abilities. Mostly to people that just wanted to start a blog or have a small website but also to folks that needed a CMS for more complex projects – online zines, corporate sites and others. An it was good advice, I thought. The system did everything they needed it to do. That may still be the case for many people but here’s the thing:

Before WordPress came along, Joomla was, at least for me, the best CMS around. It was far from perfect and I have my fair share of grey hairs from trying to make it behave and still it was far better than anything else available at the time. Then WordPress cam along, grew exponentially and eventually became a full blown CMS, not just a blogging platform, effectively blowing Joomla out of the water.

Since then things have been moving forward and both WP and Joomla are now different products but at least now it’s a lot easier to find good hosting for Joomla ( It’s not like WordPress isn’t good anymore – it is, but the good ol’ Joomla is back with a vengeance with it’s new version 3! In its previous incarnation it was a bit too much for the regular user to get into easily. But now it’s a completely different animal and it’s awesome. They’ve revamped the administration area and now it actually makes sense to normal humans which for me is enough reason to recommend it to people when they ask what CMS to use for a project.

If you’ve been a Joomla user you know all the things that made it cool ever since it started out – the modules system, etc. Well, of course the Joomla team kept all of this intact (imagine if they didn’t) and made it even better by combining it with a user interface that’s intuitive, easy to understand and doesn’t get in the way of your work. Now not only can I start using my favorite CMS again because it actually works well, but I can wholeheartedly say to people ‘You know what why don’t you try Joomla instead’.

They’ve used the Bootstrap framework for the admin area which makes it fully responsive, looks great on any device and is very usable. It’s basically redesigned from scratch and if you’re a Joomla power user it will definetely improve your workflow.

You might say ‘I’m a developer and I don’t have time to muck about with new and weird interfaces that I’ll have to learn in order to get things done.’ I hear ya, but you’d be wrong to assume you’d be struggling to get things going at a reasonable pace. Joomla now has LESS, CSS and jQuery integration which means you don’t have to write as much code as before. Even more awesome – you can take advantage of the Icomoon font icon library! Thousands of retina-optimized icons for your designs available at your fingertips.

Need I go on? Joomla is now a perfectly mature product that can be easily used for anything and by anybody which makes it my CMS of choice for the foreseeable future.