6 ms·

Uniform - Sexy forms with jQuery

151 points by mojombo 17y ago

niyazpk 17y ago
Really beautiful. I was a bit offended by the "155 KB download", but when downloaded and extracted it is just around 50 KBytes.
- dabeeeenster 17y ago
  Is that minified/compressed?
  - niyazpk 17y ago
    No
  - mcobrien 17y ago
    It's not, but a lot of the size comes from a PNG sprite which is 30K. With yuicompressor (http://developer.yahoo.com/yui/compressor/ http://developer.yahoo.com/yui/compressor/) and pngcrush (http://pmt.sourceforge.net/pngcrush/ http://pmt.sourceforge.net/pngcrush/) I got everything down to 37K.
tlrobinson 17y ago
Nice use of our Aristo theme! http://github.com/280north/aristo http://github.com/280north/aristo
johns 17y ago
Why not include a matching style for textboxes? Those styled inputs are going to look pretty jarring next to native textboxes and creating matching styles for them is enough work for me that I wouldn't do it. Overall they look nice, but with the incomplete control set and the gotchas listed (doesn't automatically handle dynamic changes and no IE6 support) it has a long way to go.
- coderdude 17y ago
  Adds a bit of irony to the project's name.
- walkon 17y ago
  Indeed - in addition to type="text", textarea and button would be nice as well.
- ionfish 17y ago
  Ojay.Forms handles dynamic changes and supports IE6. You have to write your own styling, though, but generally one would have to do that with Uniform anyway. http://ojay.othermedia.org/articles/forms.html http://ojay.othermedia.org/articles/forms.html
  - iaskwhy 17y ago
    On a quick test, drop down boxes don't work on Chrome 4: when I click on the scroll bar it closes down. I've seen this bug somewhere else two years ago and there was some workaround but still... Anyway, it's a nice idea!
    - ionfish 17y ago
      Yes, we need to do some work to make things properly compatible with Chrome. Hopefully I'll have some spare time in the next couple of weeks to do that.
rwhitman 17y ago
Created by the best social media UI designers on the planet. Worked with Josh a ton, such a talented pro. If you can get on his wait list, do it
yurifury 17y ago
In the default theme, the disabled checkbox and radio buttons look too much like the enabled ones, especially when they're arranged like on the landing page, i.e. enabled / checked / disabled. Otherwise, sexy.
mahmud 17y ago
Uses own "theme creator" instead of plugging into jquery's unparalleled Theme Roller :-/
- tripngroove 17y ago
  Theme roller is a cool idea, but the CSS it outputs has so much cruft... It's like they forgot about the cascading part.
  - ra 17y ago
    It could learn a thing or two from YUI CSS here. Also, I find the themeroller a bit clumsy, spitting out whole zip files - rather than just little my-theme.css files.
    - jiaaro 17y ago
      unfortunately much of themeroller's flexability depends on images. maybe more CSS support among popular browsers and more consistent CSS support will make it possible to achieve more with less images some day (hopefully none some day)
endtime 17y ago
Hmm. Would be nice if the dropdown and buttons worked properly in Opera.
- Pistos2 17y ago
  I'm really curious about why the author succeeded with the other four major browsers, but couldn't make it work with Opera.
  - Pistos2 17y ago
    I toyed with the code a bit (which was a bit bizarre looking until I realized the mix of tabs and spaces was meant to be viewed with tabs equalling 2 spaces). One minor thing worth noting: The demo page has a "console.log(...)" statement in it. That causes an error in Opera, so I took it out. Here's why the dropdown doesn't [quite] work in Opera: Uniform wraps form elements with divs and spans in order to achieve the altered look. The actual form elements are set to opacity 0 to hide them. For some reason (which I couldn't figure out), the actual select element ends up with a height of 5 pixels. You'll see that if you click on the upper 5 pixels of the dropdown, you'll get the dropdown to open up like it should. The simple fix was to force the height of the select element with CSS to something bigger, such as 23px. I added "height: 23px;" to this CSS block: http://github.com/pixelmatrix/uniform/blob/master/css/uniform.default.css#L391-394 http://github.com/pixelmatrix/uniform/blob/master/css/unifor... and then the dropdown began working as advertised.
    - endtime 17y ago
      Awesome. :) I bet the author would appreciate knowing that.
robgough 17y ago
Can we get some nice date and time pickers please! :P
- henrikschroder 17y ago
  There should be millions of those around if you need one, the problem is that such a widget isn't part of the html standard, there's no baseline functionality that you can extend and make pretty, you have to do it all yourself.
  - ZeroGravitas 17y ago
    It's actually part of HTML5: http://diveintohtml5.org/forms.html#type-date http://diveintohtml5.org/forms.html#type-date But "support is… sparse".
henrikschroder 17y ago
Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers? No, because that is generally bad usability design. It's not quite as bad as the ultimate atrocity: making your own scrollbars, but changing the feel of widgets is bad, because it only makes it harder for people to manipulate them. It's ok to change the look if you are careful to preserve the feel and functionality. A quick test of that example shows it's lacking visual indication of focus. I can still move between them and manipulate them with tab and space and arrow keys, but I don't know where I am. If that's just part of the theme, fine, but if the framework lacks support for it, not so fine. On the other hand, I hope this library (or similar) becomes very popular among those that absolutely have to change widgets, because then you can address the usability issues in the library. If everyone rolls their own, you will end up with quite a few usability horrors.
- boucher 17y ago
  The focus indicator is there, it's just subtle.
lsb 17y ago
Here's something egregious: the names of the radio buttons or the check boxes aren't labels for the input, and you can't click on them to select the option.
- DougBTX 17y ago
  I've not looked at the source, but clicking on them works for me (Chrome 4)
- ZeroGravitas 17y ago
  Watch out you're not clicking the third one in the list. They're disabled, but don't look like it.
  - Timothee 17y ago
    Good point. I upvoted lsb because that bothered me too, but the problem is what you describe.
bhellman1 17y ago
Cool idea but the last thing I want are my products to look like the came straight out of the Adobe Flex box.
castis 17y ago
not to be confused with http://sprawsm.com/uni-form/ http://sprawsm.com/uni-form/
pixelmatrix 17y ago
Hey guys, thanks for the feedback. Constantly trying to improve things. If you have bug reports, please post them in Github's issue tracker. I pay close attention to issues posted there. There have been a lot of requests to add styles for inputs/textareas and buttons. I do plan to add styles for those in the next version. Also, Opera support is coming. I played around yesterday and I found a workaround for the bug that was plaguing it: not being able to hide form elements. Can someone post more details on the Chrome 4 bug mentioned in the issue tracker?
daemianmack 17y ago
Very nice. The developer's responsiveness to bug reports is what makes this the best form-styling solution for a side project I'm working on at the moment; this should be pretty well-vetted. Josh, thanks for your efforts!

151 points by mojombo 17y ago

Really beautiful. I was a bit offended by the "155 KB download", but when downloaded and extracted it is just around 50 KBytes.

dabeeeenster 17y ago
Is that minified/compressed?
- niyazpk 17y ago
  No
- mcobrien 17y ago
  It's not, but a lot of the size comes from a PNG sprite which is 30K. With yuicompressor (http://developer.yahoo.com/yui/compressor/ http://developer.yahoo.com/yui/compressor/) and pngcrush (http://pmt.sourceforge.net/pngcrush/ http://pmt.sourceforge.net/pngcrush/) I got everything down to 37K.

tlrobinson 17y ago

Nice use of our Aristo theme! http://github.com/280north/aristo http://github.com/280north/aristo

johns 17y ago

Why not include a matching style for textboxes? Those styled inputs are going to look pretty jarring next to native textboxes and creating matching styles for them is enough work for me that I wouldn't do it. Overall they look nice, but with the incomplete control set and the gotchas listed (doesn't automatically handle dynamic changes and no IE6 support) it has a long way to go.

coderdude 17y ago
Adds a bit of irony to the project's name.
walkon 17y ago
Indeed - in addition to type="text", textarea and button would be nice as well.
ionfish 17y ago
Ojay.Forms handles dynamic changes and supports IE6. You have to write your own styling, though, but generally one would have to do that with Uniform anyway. http://ojay.othermedia.org/articles/forms.html http://ojay.othermedia.org/articles/forms.html
- iaskwhy 17y ago
  On a quick test, drop down boxes don't work on Chrome 4: when I click on the scroll bar it closes down. I've seen this bug somewhere else two years ago and there was some workaround but still... Anyway, it's a nice idea!
  - ionfish 17y ago
    Yes, we need to do some work to make things properly compatible with Chrome. Hopefully I'll have some spare time in the next couple of weeks to do that.

rwhitman 17y ago

Created by the best social media UI designers on the planet. Worked with Josh a ton, such a talented pro. If you can get on his wait list, do it

yurifury 17y ago

In the default theme, the disabled checkbox and radio buttons look too much like the enabled ones, especially when they're arranged like on the landing page, i.e. enabled / checked / disabled. Otherwise, sexy.

mahmud 17y ago

Uses own "theme creator" instead of plugging into jquery's unparalleled Theme Roller :-/

tripngroove 17y ago
Theme roller is a cool idea, but the CSS it outputs has so much cruft... It's like they forgot about the cascading part.
- ra 17y ago
  It could learn a thing or two from YUI CSS here. Also, I find the themeroller a bit clumsy, spitting out whole zip files - rather than just little my-theme.css files.
  - jiaaro 17y ago
    unfortunately much of themeroller's flexability depends on images. maybe more CSS support among popular browsers and more consistent CSS support will make it possible to achieve more with less images some day (hopefully none some day)

endtime 17y ago

Hmm. Would be nice if the dropdown and buttons worked properly in Opera.

Pistos2 17y ago
I'm really curious about why the author succeeded with the other four major browsers, but couldn't make it work with Opera.
- Pistos2 17y ago
  I toyed with the code a bit (which was a bit bizarre looking until I realized the mix of tabs and spaces was meant to be viewed with tabs equalling 2 spaces). One minor thing worth noting: The demo page has a "console.log(...)" statement in it. That causes an error in Opera, so I took it out. Here's why the dropdown doesn't [quite] work in Opera: Uniform wraps form elements with divs and spans in order to achieve the altered look. The actual form elements are set to opacity 0 to hide them. For some reason (which I couldn't figure out), the actual select element ends up with a height of 5 pixels. You'll see that if you click on the upper 5 pixels of the dropdown, you'll get the dropdown to open up like it should. The simple fix was to force the height of the select element with CSS to something bigger, such as 23px. I added "height: 23px;" to this CSS block: http://github.com/pixelmatrix/uniform/blob/master/css/uniform.default.css#L391-394 http://github.com/pixelmatrix/uniform/blob/master/css/unifor... and then the dropdown began working as advertised.
  - endtime 17y ago
    Awesome. :) I bet the author would appreciate knowing that.

robgough 17y ago

Can we get some nice date and time pickers please! :P

henrikschroder 17y ago
There should be millions of those around if you need one, the problem is that such a widget isn't part of the html standard, there's no baseline functionality that you can extend and make pretty, you have to do it all yourself.
- ZeroGravitas 17y ago
  It's actually part of HTML5: http://diveintohtml5.org/forms.html#type-date http://diveintohtml5.org/forms.html#type-date But "support is… sparse".

henrikschroder 17y ago

Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers? No, because that is generally bad usability design. It's not quite as bad as the ultimate atrocity: making your own scrollbars, but changing the feel of widgets is bad, because it only makes it harder for people to manipulate them. It's ok to change the look if you are careful to preserve the feel and functionality. A quick test of that example shows it's lacking visual indication of focus. I can still move between them and manipulate them with tab and space and arrow keys, but I don't know where I am. If that's just part of the theme, fine, but if the framework lacks support for it, not so fine. On the other hand, I hope this library (or similar) becomes very popular among those that absolutely have to change widgets, because then you can address the usability issues in the library. If everyone rolls their own, you will end up with quite a few usability horrors.

boucher 17y ago
The focus indicator is there, it's just subtle.

lsb 17y ago

Here's something egregious: the names of the radio buttons or the check boxes aren't labels for the input, and you can't click on them to select the option.

DougBTX 17y ago
I've not looked at the source, but clicking on them works for me (Chrome 4)
ZeroGravitas 17y ago
Watch out you're not clicking the third one in the list. They're disabled, but don't look like it.
- Timothee 17y ago
  Good point. I upvoted lsb because that bothered me too, but the problem is what you describe.

bhellman1 17y ago

Cool idea but the last thing I want are my products to look like the came straight out of the Adobe Flex box.

castis 17y ago

not to be confused with http://sprawsm.com/uni-form/ http://sprawsm.com/uni-form/

pixelmatrix 17y ago

Hey guys, thanks for the feedback. Constantly trying to improve things. If you have bug reports, please post them in Github's issue tracker. I pay close attention to issues posted there. There have been a lot of requests to add styles for inputs/textareas and buttons. I do plan to add styles for those in the next version. Also, Opera support is coming. I played around yesterday and I found a workaround for the bug that was plaguing it: not being able to hide form elements. Can someone post more details on the Chrome 4 bug mentioned in the issue tracker?

daemianmack 17y ago

Very nice. The developer's responsiveness to bug reports is what makes this the best form-styling solution for a side project I'm working on at the moment; this should be pretty well-vetted. Josh, thanks for your efforts!