Introducing "Aristo", A jQuery UI Theme/Experiment | Hacker News Reader

Introducing "Aristo", A jQuery UI Theme/Experiment

taitems.tumblr.com

115 pointstaitems25 comments

I completely agree about the jQuery UI themes looking a bit goofy. Aristo looks gorgeous. As great as the jUI themeroller is, the themes themselves look pretty toy-ish. I never understood why jUI tabs have a weird background (see tabs here: http://jqueryui.com/themeroller/ )

I hope jQuery UI team incorporates Aristo into theme roller. It would be awesome to be able to customize Aristo to my site's color scheme.

The sample Themeroller themes look goofy for a few reasons:

1. they all seem to be catered to show off the glassy/noisy textures

2. they all use the more ugly fonts. Verdana/Arial for great joy.

It is in fact possible to use Themeroller to make a good looking theme, you just have to compensate for the above two tendencies when working off of their samples.

You have to tear apart Themeroller CSS to see why Aristo is not possible (and probably not desirable) to integrate into jQuery UI. Aristo uses a lot of sprites for things like corners and shadows; jQuery UI instead does everything with border-radius and clever transparent background images. The downside is you can't make every little corner and shadow in Themeroller beautiful, but that should be mitigated as box-shadow and border-radius appearance improves across browsers. The upside of more CSS-based styling, however, is that you can very quickly prototype new widgets that fit into a Themeroller theme and can be styled just like everything else using the Themeroller CSS class framework. (I would like to see somebody make a custom tab or toolbar panel that can be styled by vanilla Aristo CSS -- not possible.)

The real benefit of jQuery UI that I've experienced is not just using the existing widgets but prototyping new ones that fit the jQuery UI "interface", both programmatic and visual, using the $.Widget factory. For this reason I'm glad they have made Themeroller easy to use and as broadly applicable as possible. This has required some concessions in the visual capabilities of the themes, but CSS will soon catch up to fix that.

tl;dr I think Themeroller and jQuery UI should continue to focus on progressive enhancement more with CSS and less with images, and let things get fancier via the newer CSS properties.

while i'm all for using modern css capabilities -- i think ie7/ie8 will keep us from relying solely on them. i haven't looked into Aristo's source, but using sprites as a fallback the less capable browsers is pretty much the only option atm. add to that the fact that it's typically difficult or impossible to sprite gradients and rounded corners well, and the number of images used don't seem ridiculous anymore.

Hahaha! How strange. I actually started working on this exact thing on the weekend (http://github.com/hellotoby/Jquery-UI-Aristo-Theme)!

This one looks great though, perhaps I should stop working on mine...

Perhaps try to contribute your work to improve their project? Too bad it doesn't look like they're sharing their source control.

Haha, that's unfortunate mate. Maybe you can contact me and we can work together on a proper release that works with all the controls.

Yeah, that sounds good. I also have some basic Jquery written that deals with transforming the other form controls ie. radio, checkbox and select which I could probably turn into a plugin pretty easily.

I'll shoot you an email over the next few days.

You might be interested in my Aristo port to CSS3 http://github.com/maccman/aristo

This would go nicely with Uniform (http://pixelmatrixdesign.com/uniform/). Doesn't jqgrid support jquery ui themes now, too?

Uniform already handles this theme. Scroll down to the bottom of the page and there are three pre-made Uniform themes listed: "Uniform Default," "Aristo," and "Agent."

But Uniform only styles selects (drop downs), checkboxes, radio buttons, and file upload inputs. jQuery UI could nicely compliment Uniform by styling everything else.

That's what I meant. With Uniform already styling forms element in Aristo style and JQuery UI now with a matching look, I don't have to waste too much effort on intranet apps...

Here's the css with a nicer datepicker that doesn't move around as things get selected and has better vertical alignment of the selected date:

http://gist.github.com/348580

Looks really good!

Add the following to your css:

a { outline: none; }

Outline is a helpful usability hint, especially for keyboard navigation.

Be wary about removing it.

It looks great. But, why does everything have to look mac like? (I don't use a mac.)

Cappuccino was developed by ex-Apple employees.

As far as Sproutcore goes, it was selected as the basis for Apple's MobileMe service. This probably didn't have much to do with their L&F selection, but it's still a useful datapoint.

Damn you're hired! Are you looking for a job by the way :)

These are the guys you should hire.

http://www.madebysofa.com/

I wish I could take responisibility for this. Sofa designed Aristo, 280North gave me permission to use the name, and I used a couple of icons by Pinvoke (possibly my favourite icon set of all time). I did take some license with it here and there of course, as the Aristo PSD is obviously just an example.

FYI I work in a Melbourne agency, study and freelance.

When you click several times on a button, it selects the text.

When you click several times on a button...

...in rapid succession. Like all other text in a browser.

Not with the style -webkit-user-select:none; or equivalent.

In jQuery UI 1.7.1, there was a function $.fn.disableSelection() that would toggle all the right browser-specific CSS and attributes so that text selection would be disabled. I would recommend that the author use it during the instantiation of these buttons...

As much as this isn't my problem, there are fixes that jQuery UI could implement such as native dblclick and special jQuery events such as triple click that could be used to stop text selection.

Reply on news.ycombinator.com