

"Aristo" for jQuery UI - gourneau
http://taitems.github.com/Aristo-jQuery-UI-Theme/

======
pak
Solid, goes to show the power of the jQuery UI theming framework. This uses
even less images and more CSS3 than the last CSS3 implementation of Aristo,
which wasn't built for jQuery UI:

<http://dtrejo.github.com/aristo/>

Specifically, this one uses inner shadows to generate things like the slider
bars without background-image, and most everything else is CSS3 gradients.

The blog post calls jQuery UI's default themes goofy--I won't contest they
look dated, but you can get from there to near-Aristo quality by 1) decreasing
the border-radius in ThemeRoller to 3px or 2px 2) only using handsome gradient
backgrounds and 3) adding some more CSS rules to just add some inner glow,
box-shadow and text-shadow on the better browsers. In fact, ThemeRoller could
be fairly easily updated to support such things from within the graphical
designer.

For example, this app editor interface is pretty much all vanilla jQuery UI,
with only the slightest of enhancements in a separate file so themes could
potentially be swapped out underneath:

<http://quickfuseapps.com/app/edit>

~~~
phillco
Ooh, I like the pulsing glow effect on those buttons
(<http://dtrejo.github.com/aristo/>). Wonder if that could be ported to the
linked jQuery UI theme.

~~~
Groxx
I don't see why not, it can be done entirely in CSS with a box shadow:
<http://www.css3.info/preview/box-shadow/> and an animation: <http://www.the-
art-of-web.com/css/css-animation/>

------
alanh
Hmm, curious why user-select: none; wasn’t applied to these buttons. Not sure
why you would want to let people select text on UI elements e.g. by double-
clicking a button — feels less “native” to see selections made on UI elements.

------
iconfinder
Aristo is a great theme - I wish more designers would do custom jQuery UI
themes.

~~~
cschep
startup idea?

~~~
gourneau
I would happily pay for ultra high quality themes, but I would have to be able
to distribute them with my open source project.

~~~
kaylarose
See my earlier comment: <http://news.ycombinator.com/item?id=2342006>

It's actually pretty easy to make better jQuery themes.

------
callmeed
Why is there no styling for basic text fields?

------
kaylarose
This actually inspired me to see how nice of a theme you could do with
ThemeRoller alone:

[http://gemdash.tumblr.com/post/3941893390/cupertino-a-
jquery...](http://gemdash.tumblr.com/post/3941893390/cupertino-a-jquery-ui-
theme)

It's not _great_ but I think it came out pretty good.

~~~
rhizome
The framing stuff around tabs is SO BOTHERSOME.

~~~
kaylarose
I agree completely! I am working on a much better variation fo this theme, but
with much better layouts and without all the goofy default UI margins and
padding.

------
whalesalad
FINALLY! Thank you so much! The base jQuery UI stuff is not very good at all.

------
Groxx
Never noticed this before: the auto-complete appears under the slider handles
(Chrome 10). Shall test for other browsers in a bit...

edit:

    
    
      Chrome 12 Canary: same as Chrome 10
      IE9 beta: Handles on top, buttons look fine, though no text shadow.  "<>" are poorly anti-aliased.
      IE9 beta in compatibility mode: auto-complete on top (?), but buttons (aside from href) are full-width.  "<>" are poorly anti-aliased.
      FF4 rc:   Handles on top.  "<>" are poorly anti-aliased.
      FF3.6.15: Handles on top.  "<>" are poorly anti-aliased.

~~~
ryanfitz
Safari 5 has the same issue as chrome

~~~
eam
Similar behavior between them is expected, both are based on webkit.

~~~
Samuel_Michon
There have been plenty of bugs in Safari which couldn't be reproduced in
Chrome, and vice versa.

Also, many mobile platforms have web browsers based on WebKit. Numerous
differences can be observed between how these browsers render web pages. See
PPK's "The Great WebKit Comparison Table" [0].

[0] <http://www.quirksmode.org/webkit.html>

~~~
eam
Yes, of course. I said _similar_ not identical. :)

------
pyrhho
As a warning, a lot of the controls seemed pretty broken on the iPhone. The
auto-complete field totally screwed up Safari (couldn't de-select it), and the
sliders were impossible to drag.

~~~
pak
I believe this is an issue with jQuery UI, not this theme in particular. I
remember that to get QuickFuse working on the iPad, we made a shim that
wrapped the jQuery UI draggable so that it responded to touchstart, touchmove
etc. events. jQuery Mobile is more suitable for these widgets if you are
making a mobile-optimized app, though.

------
smitjel
Very, very nice. Why has it taken this long for jQuery UI to get a quality
theme like this?

------
wahnfrieden
Aristo was ported to some of Dojo a couple versions ago:
[http://sitepen.com/~canderson/aristojo/140/dijit/themes/them...](http://sitepen.com/~canderson/aristojo/140/dijit/themes/themeTester.html)
It's not as polished as this jQuery one though.

------
felideon
We're using the Aristo theme as well with qooxdoo. Qooxdoo's theming framework
is pretty nice, although I haven't tried jQuery's.

<http://news.qooxdoo.org/aristo-theme>

------
exch
It looks nice and clean.

A quick note though: Hitting the 'Change' button in the modal dialog does not
get rid of the page overlay, making everything inaccessible. (Chrome 10)

~~~
nakkiel
Actually this button simply takes you to the top of the page. The modal is not
closed but rather out of sight. If you scroll down, you will be able to close
it.

------
potatolicious
Chrome OS X here, clicking buttons inside a modal dialog sends me to the top
of the page (away from where the modal dialog is).

------
yread
Accordion doesn't seem to work in latest Opera

~~~
karolist
Also there's a redraw issue with vertical sliders.

~~~
BoppreH
I already opened an Issue in github about this. Accordion is fine here. Opera
11.01, Win7.

I'm impressed everything else worked so well, Opera is usually neglected.

------
troels
The div buttons seems to stretch to width 100% in IE (all versions). Perhaps
give it `display: inline-block`?

------
gorm
Some of the controls doesn't seem to work well on mobile. Like the sliders and
the modal dialog.

------
MattyBE
what a beautiful and simple theme...I really like this.

