"Aristo" for jQuery UI | Hacker News Reader

"Aristo" for jQuery UI

taitems.github.com

254 pointsgourneau38 comments

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

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

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

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.

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/

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.

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

startup idea?

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

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

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

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

Why is there no styling for basic text fields?

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.

The framing stuff around tabs is SO BOTHERSOME.

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.

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

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.

Safari 5 has the same issue as chrome

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

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

Yes, of course. I said similar not identical. :)

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.

The autocomplete appears above the slider handles in IE6.

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

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.

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.

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

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.

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

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)

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)

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.

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

Accordion doesn't seem to work in latest Opera

Also there's a redraw issue with vertical sliders.

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.

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

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

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

Reply on news.ycombinator.com