The MetaSieve Blog

April 2, 2010

Kameleoon: Morphing The Web (with Grails)

Filed under: Uncategorized — Tags: , , , , — Björn Wilmsmann @ 6:00 pm

The way we do web design more or less hasn’t changed for more than 10 years or so. Most new websites start from scratch design-wise, meaning that when you have a cool idea for a new website you hire a web designer for turning that idea into something that’s nice to look at.

Another option is using some blogging software or CMS like WordPress or Joomla alongside with predefined templates that are shipped with the software. While the latter option surely is satisfactory for many purposes (see this blog, for instance …), it doesn’t allow you a great deal of customization.

One final option is using one of those clunky homepage toolboxes which allow you to ‘design’ your own website with virtually no knowledge of HTML, CSS or graphic design. However, these most of the time impose rather narrow restrictions as to what can be done with them and what cannot. This goes as far as that most of the time you can tell right away which of those toolboxes has been used.

Enter Kameleoon. Kameleoon is a pretty new service that approaches web design rather differently.

It allows you to take any existing website (So, admittedly you’d have to do some initial web design before using Kameleoon, too.) and modify each and every CSS property in a nifty WYSIWYG editor. You can change colours, border styles, font types, upload background images and the changes will be applied right in place. You don’t even have to touch your server-side code anymore when applying design changes! Pretty cool, isn’t?

Technically, this is done by adding a JavaScript snippet to your website that loads the Kameleoon scripts, CSS files and renders any changes you’ve made so far. Kameleoon doesn’t care about the technology used on your website (well, apart from Flash, that is …). You can gain some more control about what can be changed by Kameleoon adding additional CSS classes to your HTML code though.

Kameleoon‘s user interface might admittedly be a bit overwhelming at first and needs some time to get used to. But, then again, so does Photoshop, doesn’t it?

The Kameleoon application runs on Grails 1.2.1. The rendering engine makes use of GIMP scripted via Python. One very cool thing about this is that the Python code is dynamically generated by Groovy.

Finally, the client side JavaScript code was written with Qooxdoo, a framework for creating rich Internet applications.


Create a free website or blog at