6 ms·

Introducing "Aristo", A jQuery UI Theme/Experiment

115 points by taitems 17y ago

chime 17y ago
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/ 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.
- pak 17y ago
  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.
  - daakus 17y ago
    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.
hellotoby 17y ago
Hahaha! How strange. I actually started working on this exact thing on the weekend (http://github.com/hellotoby/Jquery-UI-Aristo-Theme http://github.com/hellotoby/Jquery-UI-Aristo-Theme)! This one looks great though, perhaps I should stop working on mine...
- n8agrin 17y ago
  Perhaps try to contribute your work to improve their project? Too bad it doesn't look like they're sharing their source control.
- taitems 17y ago
  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.
  - hellotoby 17y ago
    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.
d0m 17y ago
When you click several times on a button, it selects the text.
- mattyb 17y ago
  When you click several times on a button... ...in rapid succession. Like all other text in a browser.
  - jeff18 17y ago
    Not with the style -webkit-user-select:none; or equivalent.
  - pak 17y ago
    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...
- taitems 17y ago
  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.
mhd 17y ago
This would go nicely with Uniform (http://pixelmatrixdesign.com/uniform/ http://pixelmatrixdesign.com/uniform/). Doesn't jqgrid support jquery ui themes now, too?
- kidko 17y ago
  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."
  - mdiep 17y ago
    But Uniform only styles selects (drop downs), checkboxes, radio buttons, and file upload inputs. jQuery UI could nicely compliment Uniform by styling everything else.
  - mhd 17y ago
    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...
khangtoh 17y ago
Damn you're hired! Are you looking for a job by the way :)
- grinich 17y ago
  These are the guys you should hire. http://www.madebysofa.com/ http://www.madebysofa.com/
- taitems 17y ago
  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.
zefhous 17y ago
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 http://gist.github.com/348580
jared314 17y ago
It looks great. But, why does everything have to look mac like? (I don't use a mac.)
- j23tom 17y ago
  because claiming that mac theme is superb is politically correct
- aaronbrethorst 17y ago
  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.
dutchbrit 17y ago
Looks really good! Add the following to your css: a { outline: none; }
- warfangle 17y ago
  Outline is a helpful usability hint, especially for keyboard navigation. Be wary about removing it.
maccman 17y ago
You might be interested in my Aristo port to CSS3 http://github.com/maccman/aristo http://github.com/maccman/aristo

115 points by taitems 17y ago

chime 17y ago

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/ 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.

pak 17y ago
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.
- daakus 17y ago
  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.

hellotoby 17y ago

Hahaha! How strange. I actually started working on this exact thing on the weekend (http://github.com/hellotoby/Jquery-UI-Aristo-Theme http://github.com/hellotoby/Jquery-UI-Aristo-Theme)! This one looks great though, perhaps I should stop working on mine...

n8agrin 17y ago
Perhaps try to contribute your work to improve their project? Too bad it doesn't look like they're sharing their source control.
taitems 17y ago
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.
- hellotoby 17y ago
  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.

d0m 17y ago

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

mattyb 17y ago
When you click several times on a button... ...in rapid succession. Like all other text in a browser.
- jeff18 17y ago
  Not with the style -webkit-user-select:none; or equivalent.
- pak 17y ago
  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...
taitems 17y ago
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.

mhd 17y ago

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

kidko 17y ago
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."
- mdiep 17y ago
  But Uniform only styles selects (drop downs), checkboxes, radio buttons, and file upload inputs. jQuery UI could nicely compliment Uniform by styling everything else.
- mhd 17y ago
  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...

khangtoh 17y ago

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

grinich 17y ago
These are the guys you should hire. http://www.madebysofa.com/ http://www.madebysofa.com/
taitems 17y ago
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.

zefhous 17y ago

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 http://gist.github.com/348580

jared314 17y ago

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

j23tom 17y ago
because claiming that mac theme is superb is politically correct
aaronbrethorst 17y ago
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.

dutchbrit 17y ago

Looks really good! Add the following to your css: a { outline: none; }

warfangle 17y ago
Outline is a helpful usability hint, especially for keyboard navigation. Be wary about removing it.

maccman 17y ago

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