• Eric Muyser

    "The last excuse I made was yesterday" - Eric Thomas

    Cocoa-style theme for jQuery UI.



    A little backstory to how this project came about. When I began development for some Titanium apps a few months back, I weighed the possible UI options. If you’re not familiar, Appcelerator is an cross-platform application which runs your web coding as a native app on your operating system. You create Appcelerator apps using Titanium Studio. In my case, it’s essentially running my HTML/CSS/JavaScript in a WebKit frame. That meant I would need to choose 1) a CSS framework (I created my own LESS framework: moar), a JavaScript framework (I created my own Node.js framework of sorts: node-std that’s cross-compatible both on the server and client side, thanks to node-browserify), and a JavaScript UI framework to lay on top of it. Being that I was using my own JS framework, I wanted something I could simply drop in and just work.

    I explored Sproutcore, Cappuccino, and the like, but personally found them to be too much overhead for what I needed. I was fairly familiar with jQuery UI, but found creating the theme to be slightly tedious due to the raw unstructured CSS. I immediately converted the core CSS to LESS (jquery-ui-less-theme on GitHub), clearing up some of the bloat. Although it is developed in LESS, it is compiled down into raw CSS and perfectly usable in that state.

    Having used Mac OS X for a year now, I’ve become quite fond of the native Cocoa UI. If you go through the official jQuery UI themes, almost none of them would be suitable as a base for a Mac-style theme, but I remembered having seen Aristo by Tait Brown, which was an excellent theme to start with.


    For those that have been paying attention, you’ll notice the breakdown:

    • Titanium app that uses jquery-ui-theme-cocoa
    • jquery-ui-theme-cocoa uses jquery-ui-less-theme and moar


    I’m continuing to use this theme in some currently unreleased apps, and so expect to continue to see improvements as time goes on. If you have any comments, suggestions, please let me know below. Thank you.


    More of my jQuery work can be found here.