Audacious CSS Desktop Programming

Take a look at this video, here I show an awesome new technology for using Clutter/Gtk with Cascading Style Sheets.


Audacious Video

You can test this out for yourself with Ubuntu 12.04 (Beta) using the following:

sudo apt-get install gir1.2-gtk-3.0 gir1.2-clutter-1.0 gir1.2-gtkclutter-1.0 gir1.2-gconf-2.0
bzr branch lp:csslavie
cd csslavie
./netbook-launcher.py

Note: default clutter/cogl has a bug which prevents the background’s opacity setting, so you won’t get as cool an effect. But a fixed version of those libraries should be available eventually.

Please comment below what you think.

Tags: , , , , , , , , ,

7 Responses to “Audacious CSS Desktop Programming”

  1. Neil says:

    Thanks for the video, I don’t know how to code but I think I could easily wrap my head around some of that. Being able to the changes happen on the fly is really cool. One thing I noticed here though is how much better that looked than the actual dash in use now in Unity. It would need some more tweaking of course but having the categories listed down the left side is already a step in the right direction. Add a search box and some sort of workspace overview and it would be really neat. The current unity dash is a real mess in my opinion.

  2. t-rex says:

    Interesting demonstration!

    Gnome Shell, also based on Clutter, but with JavaScript GObjectIntrospection bindings instead of Python GObjectIntrospection bindings, has a similar approach:
    http://git.gnome.org/browse/gnome-shell/tree/data/theme/gnome-shell.css

    However, this CSS does not reload automatically after modification, but by entering Alt+F2 + “rt” (for “reload theme”).

    Another tool for immediate feedback while designing is the built-in JavaScript console:
    http://live.gnome.org/GnomeShell/CheatSheet#Developer_tools

  3. Eduard Gotwig says:

    cool thing, but I think theres somehow no need for that , if you can use it only with the netbook launcher :/

  4. doctormo says:

    @Eduard – There’s no need to only use it with the netbook launcher, as gnome shell’s javascript system and QML show, there’s a desire to have more control over design.

  5. Oli says:

    This is inspirational. High praise but it’s true, I’m inspired.

    I’ve been a Python/HTML/CSS developer for a long time but have never really spent any to learn traditional UI programming toolkits since Delphi and VB6 (many, many years ago).

    PyGTK/PyQT both look like little nightmare worlds in their own ways so using CSS to manage things and made so easy like this… Well, let’s just say I’m hoping to crack on with a project that I’ve been holding off on for far too long.

    Thanks for the poke.

  6. Zac says:

    Interesting… in-fact I’ve been working on Gnome shell extension that makes use of some of the things you mention and offers similar functionality although I’m aiming at Unitys dash rather than the Netbook launcher.

    http://ubuntuforums.org/showthread.php?p=11832816

  7. David says:

    Kudos. That’s very, very cool.