

Introducing "Aristo", A jQuery UI Theme/Experiment - taitems
http://taitems.tumblr.com/post/482577430/introducing-aristo-a-jquery-ui-theme

======
chime
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.

~~~
pak
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
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
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...

~~~
taitems
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
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.

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

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

~~~
kidko
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."

~~~
mhd
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...

------
zefhous
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>

------
dutchbrit
Looks really good!

Add the following to your css:

a { outline: none; }

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

Be wary about removing it.

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

~~~
aaronbrethorst
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.

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

~~~
grinich
These are the guys you should hire.

<http://www.madebysofa.com/>

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

~~~
mattyb
_When you click several times on a button..._

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

~~~
pak
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...

