"Aristo" for jQuery UI

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

by gourneau • 15 years ago

254 38 15 years ago

taitems.github.com

Groxx2• 15 years ago

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• 15 years ago

Safari 5 has the same issue as chrome

eam2• 15 years ago

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

mattmanser• 15 years ago

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.

adolph• 15 years ago

The autocomplete appears above the slider handles in IE6.

Seriously, it does and most of the other controls work fine too.

yread• 15 years ago

Accordion doesn't seem to work in latest Opera

karolist• 15 years ago

Also there's a redraw issue with vertical sliders.

BoppreH• 15 years ago

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.

pak2• 15 years ago

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

boucher• 15 years ago

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

DTrejo• 15 years ago

I'm glad that the jquery UI version has improved. I think taitems was one of the first people to port it to css, so it's good to see they kept going.

Now maybe I can just start using the jquery UI version instead of the version I semi-maintain, as it probably does cross browser compatibility much better (in addition to a greater selection of widgets :)

Edit: looking at the network, this one supports jquery 1.5.1: https://github.com/AugustCo/Aristo-jQuery-UI-Theme

phillco• 15 years ago

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.

Groxx2• 15 years ago

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/

callmeed• 15 years ago

Why is there no styling for basic text fields?

felideon• 15 years ago

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

wahnfrieden• 15 years ago

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.

iconfinder• 15 years ago

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

cschep• 15 years ago

startup idea?

gourneau• 15 years ago

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

taitems• 15 years ago

G'day guys, the creator of this jQuery UI theme speaking. I'm working on this very idea, but I'm so very busy. The jQuerythemes.com domain was vacant for a while too, but some bastard bought it ;)

MattyBE• 15 years ago

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

whalesalad• 15 years ago

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

exch• 15 years ago

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)

alphakappa• 15 years ago

You can, however hit 'Esc' to go back to the page. (I know, it's not how it should work, but at least you can access your page again)

nakkiel• 15 years ago

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.

smitjel• 15 years ago

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

kaylarose3• 15 years ago

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

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

rhizome• 15 years ago

The framing stuff around tabs is SO BOTHERSOME.

kaylarose3• 15 years ago

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.

potatolicious• 15 years ago

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

pyrhho• 15 years ago

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.

pak2• 15 years ago

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.

alanh• 15 years ago

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.

gorm• 15 years ago

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

troels• 15 years ago

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

"Aristo" for jQuery UI

Related Stories