Lowering The Theming Barrier with CSS

Andreas writes about some of the work going into the GTK CSS Engine.

“Back at GUADEC in Birmingham, when Garrett proposed using css-markup for widget themes, I thought it sounded a bit too cracky to be doable. Rob’s recent work, however, looks really sweet and since every designer and his mother out there knows css, this is a great way to lower the barriers of theme creation”.

The basic idea is that GTK (and as such GNOME) themes can be created using the well established Cascading Style Sheets technology that web designers the world over are familiar with. This is something I was blogging about back in 2005 after some discussion in the Tango project (unfortunately, the original link to the discussion seems to be dead).

What excites me about this is not the seemingly obvious technical coolness of the idea, but the fact that it breaks down the barrier to implementation and experimentation in an important, creatively fuelled part of the desktop experience – themes.

Themes are objects produced as a result of artistic creativity. Great themes are constructed by those with a strong eye for colour, interaction design, and aesthetics, and an understanding of the emotional and practical effect of this sandwich of visual considerations. The problem is that different brains work in different ways, and visually creative thinkers typically communicate their art via more direct means – painting, sculpting and drawing – they use their hands to produce the art directly. Abstraction and interface typically has no place in the traditional creative arts. Computers have made this kind of artistic expression insanely more complicated, with paint packages, 3D modeling software and other applications, all expecting the artist to understand the rules of interaction defined by the computer. We have since produced a generation of artists who have figured out how to squeeze their creativity into this computer shaped box.

What excites me about the CSS GTK engine is that it makes logical sense to build on a body of knowledge that the creative community has already worked hard to aquire. Artists and designers the world over have spent years learning CSS and figuring out how to represent their creative intentions via this language. The language and its structure has been refined over the years based on feedback, and is now an elegant and well understood means of visually depicting content for different types of media – screen, print, mobile and more.

I believe that a CSS driven theming engine is going to open up GNOME theming to a whole new demographic of potential contributors, and sites such as GNOME-Look are going to become the bubbling pot of exciting new visual potential in the desktop. I hope that our friends in the Qt and KDE world are going to do the same.

Even though I am not a part of the work going on in GTK CSS support, I would urge the developers of this support to focus their efforts on one key area though – soliciting feedback from artists. To make this a success, artists need to help drive the CSS support to be as flexible and complete as possible. Andreas talks about this intention already:

“Rob is in great need of designers to test these things out in the wild though, so if you’re a designer with css knowledge who always wanted to create widget themes, don’t hesitate to check it out from svn and give it a shot”.

The key here is going to be simplicity – artists need to be able to test the software easily and communicate their thoughts just as easily. I would urge you folks to produce distribution packages so you can bypass the expectation of using svn, and have a clearly defined process so artists can share what challenges they face and how support could be built in to improve this. This could be achieved by website forms, artist interviews, assessment of CSS themes and surveys.

There are so many areas in which we can make the many collaborative opportunities with Free Software easier, and I am excited that this important area is getting such quality focus. Great work folks. :)

  • Tom

    Doesn’t Qt have CSS since 4.0 ??

  • Sean

    My main concern with using CSS is that — quite simply — CSS kinda sucks. I say this as someone who’s worked in the Web development field for close to 10 years, and who works on a daily basis with some rather exceptional designers. At the end of the day, CSS is just a way of specifying very, very simplistic layout and styling guidelines for the HTML DOM. The are quite interesting things that designers want to do that are flat out not possible using CSS. It all comes down to the fact that CSS works solely off of an ancestor-descendent relationship model, with some recent additions to support very weak sibling relationships.

    You can’t, for example, specify in CSS that two elements should synchronize their width or height, without putting both elements into a parent container, forcing the parent container’s size requirements, and then telling the childen to follow said parent’s behavior. That’s all well and good when the two elements are natural siblings, but if they are not, you’re pretty much screwed. You have to manually set sizing for elements like that, and just hope that the contents aren’t dynamic or of unpredictable size (e.g., pretty much any text).

    If you want to give layout guidelines for a widget hierarchy, CSS might make sense. If you’re trying to control the visual styling of a widget, I don’t at all see how CSS is useful.

    Remember Seth’s blog posts several years back regarding ideas for GTK themes? The tiger stripes and such? http://www.gnome.org/~seth/blog/xshots

    CSS can’t do that stuff. It isn’t programmatic. It’s just a simplistic box model layout mechanism with some text and border styling tossed in. It can’t do anything truly interesting.

    Even when you see a really nice, beautiful, well-designed web site these days, a HUGE amount of its functionality comes from either the images/pixmaps the designer made in Photoshop and managed to trick CSS into putting into the page, or it comes from JavaScript that manages to do all the layout tweaking that CSS just isn’t capable of.

    I don’t see a problem with basing whatever GTK uses for its theme specification language off of CSS, but don’t for a minute think you’ll get away with just using CSS. You’re going to need more than just custom properties: you’re going to need syntax extensions, and you’re going to need a way to embed JavaScript, or at least still allow C theme modules (which in the end, just negates half the point of using a CSS-like theme system… you still need real programmers to do anything interesting, no matter how good of a designer you’ve got).

  • http://makosol.free.fr Makosol

    @ Tom : sure it does, just let Jono discover that Qt is way ahead of gtk since a long time ago :smile:

  • Bart

    Hopefully, GTK will reuse the styling parameters used by Qt as much as possible.

  • oliver

    The Qt styling looks cool! Is it possible to apply a stylesheet to an application without recompiling? I didn’t find anything on the net about that, but it would be really nice!

  • anon
  • jono

    Folks, my bad re. Qt and CSS support – I had no idea. I don’t keep up with Qt development as much as I used to.

  • Corey

    Sounds cool. I’d love to make themes and I’m good with CSS. I’ve fiddles with gtkrc files and there are similarities. Still I don’t know if CSS has all the tools needed. Can you define gradients in CSS? Multiple Borders? It seems like we’d have to use a CSS derivative that isn’t standards compliant. And god help us if we have to start writing quirky CSS code to make themes work in odd situations the same we have to write quirky hacks to get pages to view properly in multiple browsers.

  • Robert Knight

    As others have mentioned, Qt has had CSS support, with some extra extensions to handle gradients etc. since 4.3 and a few KDE applications use it. However, the SVG support has been more important in terms of letting people contribute to the look and feel of KDE without writing code. SVGs are used extensively in the desktop shell, icons and games.

  • http://ubuntulinuxtipstricks.blogspot.com Mackenzie

    Heh, and Qt’s not even ahead of the curve on that anyway. Look at Firefox. It’s written in XUL, which is XML, which is SGML, just like HTML and XHTML are. Firefox is styled with a whole pile of CSS files found in its chrome/*.jar files. It’s been that way for, well, ever. That’s why they implemented -moz-border-radius. It was the only way to get round corners on the tabs.

  • http://ubuntulinuxtipstricks.blogspot.com Mackenzie

    Corey: Using CSS3, yes, I believe you can do gradients. If not, Webkit’s CSS extensions certainly can.

  • einalex

    it won’t be enough. GTK on it’s course for accessability and simplicity forces you into this very special gtk look which became old and dusty a long time ago. It’s a bit like the ipod. It’s simplistic, straight forward but you just can’t do anything another way. A dropdown menu will always look like a dropdown menu does. A button will always be square. A textbox will always be exactly horizontal. You are completely unable to do “custom” stuff with it. no reallly “light” UI will ever come out of it. It just looks the same way it did when graphical user interfaces first came to light. Sure, there was a lot of streamlining and polishing. But it’s still a prison for the mind. css thememing won’t change that. It will just add another layer of polish.

  • Rob Staudinger

    Let me try to clear out a few misconceptions.

    The css-engine will not be able to influence widget layout, this is currently not possibly by themes in gtk. Maybe things will be more flexible with gtk3, we are thinking about it.

    One of the strongest features of (gtk-)css is that you can use images together with css’s own positioning- and drawing-capabilities. This means you can arrage images to avoid ugly scaling effects.

    It’s really not css vs. svg, the css-engine already has svg support via librsvg.

    Finally, if anyone was interested to do packages of the css-engine and the cairo css drawing library get in touch. It would be great to have them for the upcoming 0.3 release.

  • Cypher

    Why… why are the GTK people always trying to reinvent the wheel ? Qt can do everything you describe already. Ok, it’s not LGPL, but it’s still GPL, why don’t you even want to think about using it ?

  • Bart

    @Oliver : yes, with the -stylesheet command line parameter

  • http://dborg.wordpress.com/2008/11/19/creating-themes/ Creating Themes « dborg’s Journal

    […] Jono writes enthusiastically about the CSS theme engine work, and I would love to share his excitement. But I just can’t see it making a big difference. Don’t get me wrong, Rob’s work is fantastic and might lead to some very interesting things. It also promises to serve as a more flexible kind of pixmap engine in the future, and the familiar CSS syntax is certainly nice for us developers (and those of us sitting on the fence). […]

  • Cypher

    @Bart: you can handle this through code as well by loading a CSS file in the application initialisation by invoquing a method of QApplication. You can even change it at runtime.

  • http://yokozar.livejournal.com Scott Ritchie

    The Wine project was just talking about the idea of creating a unified, simplified theme format. The non-trivial problem is that we need to draw Windows programs in a way similar to the system theme so they match, however GTK themes don’t map nicely to Windows ones.

    With a simplified standard, however, we make it very easy to create a Wine theme.

  • http://grumphog.wordpress.com/2008/11/21/gtk-css-engine/ gtk-css-engine « toros and the grumpy groundhog

    […] olvastam. Ezúttal egy pár nappal ezelÅ‘tti bejegyzéséhez nyúlok vissza, amiben egy érdekes új kezdeményezésrÅ‘l írt, aminek az a célja, hogy GTK ( és így Gnome) témákat készíthessünk a CSS technológia […]

  • http://blogs.gnome.org/theming/2008/11/22/what-is-the-css-engine-not/ GNOME Theming » Blog Archive » What is the CSS engine (not)?

    […] recent post initiated some discussion about this project’s merits [1, 2], so it might be helpful to spell out some […]