This is the first part of a much bigger project which aims to give web designers a lot more control over their CSS, from putting the styles together to overriding existing styles or handling compatibility issues, to only mention a few. Behooooold GrownCSS!

In this first part, please let me introduce you to the GrownCSS component and plugin for Joomla! 1.5 and 1.6. The general purpose of these two is to grab all the stylesheets on the page (<link>), crunch them, optimise them a little and output them as one stylesheet (compressed in GZIP if supported by the browser). The most obvious advantage of that being that you limit the number of requests when loading the page and speed up the loading time by also reducing file size. GrownCSS also caches the generated CSS, although I will be working on optimising that a lot more in the near future.

You will need both the component and the plugin in order for it to work:

download the component

download the plugin

For information regarding the setup and configuration, or for a quick preview of what is to come, please read on. If you'd like to provide any feedback or suggest anything, do leave a comment.

There are many things I could be working on at the moment, like roll out all the fixes for the Websvn bridge for Joomla! (which is pretty much entirely ready), or finishing up the alpha for my monster of a tool I've been putting together for a while, GrownCSS.

Instead I've decided to produce yet another random tool which allows you to generate splatters. Yes, you heard me!

It's a MooTools class with a lot of options, read the entire article for an example and the code (you need CSS3 support) ; hit this link for the SVN.

Despite a number of updates to my different SVNs and some random experiments, the blog itself hasn't been updated in a while, so my apologies for that.

On the bright side, my friend Dave*, an excellent designer and an absolute CSS genius, and myself have put together an interface for a conceptual game named Seeders.

It's based on a combination of Mootools 1.2, Moo3D, Moo3DFx and some CSS wizardry. As you would expect from a system using pretty advanced techniques like this, it doesn't work in any version of Internet Explorer (which I've been pestering about intensely recently). For best results, I'd suggest looking at it in a webkit-based browser. Whilst it does work in Firefox, it's quite laggy (at least for me with all the developer tools I've got in there). Another important performance factor is your screen resolution (or the size of your browser to be more precise) ; nearly all positions and dimensions are calculated as percentages, meaning it'll always fit inside your browser (wowow!), but the larger the resolution, the less smooth the result.

The small pad at the bottom right corner will let you rotate the scene, either by clicking on the arrows or by dragging your cursor in the area with the two small circles.

Click here or on the image below to give it a bash, comments are welcome!

EDIT: thanks to Sebastian Markbåge for checking in IE9, which apparently has the best results

In the line of other CSS3 and controls experiment, here is the JogWheel class for Mootools, made entirely of HTML, CSS3 and of course javascript.

You can see the preview of the example below (for people without CSS3 support) in the form of an Amp-like feature.

Read on for the interactive example and the code to produce this.

All the code is available in the SVN.

I thought I'd start using CSS3 a little and I wanted to make a menu that looked a bit different than usual. The budding menu lays items in circles that exclude each other.

You can find the script in the SVN ; I've tried to comment it carefully to make easier to adapt to your own situation.

The circles are rendered with CSS3 (Mozilla and Webkit), the nice font on the text with FLIR, and of course the script was made with Mootools.

I'd love to see some real-world examples so drop me a comment if you have a live example.

Read more to see the example in action, it may take a while to load in your browser due to all the DIVs being added on-the-fly and FLIR (Now using @font-face).