"Aristo" for jQuery UI

#1

Post by gourneau » Fri, Mar 18, 2011, 3:44 PM UTC

"Aristo" for jQuery UI
taitems.github.com

Re: "Aristo" for jQuery UI

#2

Post by Groxx » Fri, Mar 18, 2011, 4:24 PM UTC

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.

Re: "Aristo" for jQuery UI

#3

Post by yread » Fri, Mar 18, 2011, 4:45 PM UTC

Accordion doesn't seem to work in latest Opera

Re: "Aristo" for jQuery UI

#4

Post by ryanfitz » Fri, Mar 18, 2011, 4:45 PM UTC

Groxx wrote: post #2

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…

Safari 5 has the same issue as chrome

Re: "Aristo" for jQuery UI

#5

Post by pak » Fri, Mar 18, 2011, 4:45 PM UTC

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

Re: "Aristo" for jQuery UI

#6

Post by callmeed » Fri, Mar 18, 2011, 4:53 PM UTC

Why is there no styling for basic text fields?

Re: "Aristo" for jQuery UI

#7

Post by felideon » Fri, Mar 18, 2011, 4:58 PM UTC

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

Re: "Aristo" for jQuery UI

#8

Post by wahnfrieden » Fri, Mar 18, 2011, 4:59 PM UTC

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

Re: "Aristo" for jQuery UI

#9

Post by boucher » Fri, Mar 18, 2011, 5:12 PM UTC

pak wrote: post #5

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 go…

This is pretty cool. Glad to see people making good use of what we put out there.

Re: "Aristo" for jQuery UI

#10

Post by mattmanser » Fri, Mar 18, 2011, 5:13 PM UTC

Groxx wrote: post #2

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…

Checking the ul of the autocomplete has an inline z-index of 1 more than the input box (.zIndex( this.element.zIndex() + 1 )) which is 0+1 in this instance while the slider handles have a z-index of 2 (.ui-slider-handle).

So it's not a browser problem.