Delta jQuery UI Theme
Hey guys, just a quick heads up that I released the “Delta” jQuery UI theme a while ago over on the blog of my employer, Kiandra IT. It’s a completely free theme, and the best looking one yet. There are some known issues reported on the GitHub repo, so I’ve got to find some time to push up the fixes. All in all it’s pretty stable and cross browser compliant. It works on both light and dark backgrounds, something you don’t always see. It’s also retina display friendly and makes use of my OS-dependent modal script.
The details:
Enjoy.
Repository Updates (iOS Theme + jQuery.Gantt + Aristo)
Hey guys, not much has happening on the design/development front while I’ve been away on leave. Today I’ve landed some fairly big pull requests and bug fixes to what are probably my three biggest repos.
jQuery.Gantt
This is the big one. I made some pretty major changes before I went away but wanted a few more people to test it before I did the writeup.
I received a fairly major (and necessary) rewrite from Leo Pfeifenberger who sped up this project like you wouldn’t believe. It wasn’t a simple matter of landing the pull request, as the performance changes did come at the cost of coding standards and consistency. Some parts had been buggered by what looked like Visual Studio auto formatting, but they could have been hand-coded that way too.
For future reference, here are my own personal front end dev guidelines that have been received well by the community. They’ve changed in some regards based on feedback from individuals and organisations and represent how you should aim to format your code.
- Major performance increases.
A before and after IE9 test shows performance going from 20 seconds to 400ms.
That’s 2% of the previous run time. - All new click events - fired when clicking an item or when clicking the empty space. Use this to edit events or create new events at certain points.
- State persistance - requires cookie.js to work.
- Scroll to today on load
- Extensive documentation
- Defined a license (MIT)
- Removing
$.ajaxSetup, which was corrupting other scripts in the page.
According to this stackoverflow answer it was only there to ensure it worked in ASP.NET situations. If you’re using it there, consider setting$.ajaxSetupexternally.
Unfortunately that means there are some new issues:
- Code standards - I spent a considerable amount of time running the code through JSHint and fixing issues. I got most, but that included setting a few ignores.
- Eval - yep, as above, you’ll notice that there’s an eval in the code. Yuck.
- Holiday and “Today” highlighting are not occurring on the cell, only the header.
Two steps forward one step back. No biggie.
iOS jQuery Mobile Theme
I realised there was a big difference between what I was seeing in Chrome, the iOS simulator and my iPhone running iOS 5.1. Turns out the iOS simulator was only running 4.3.1, so I’ve now got the 5.1 simulator and that’s helped me resolve some visual quirks.
- Fixed: header bars had black top border
- Fixed: Vertical centring of header buttons was off (related to above, layout woes)
- Fixed: Black buttons had blue text shadow
- Fixed: Footer icons had crept to the right with last update (jQuery Mobile styles took precedence)
- Pull Request: <label> styles coming from poorly scoped selector
- Pull Request: Demo page typo
- Set demo page transitions to “slide” by default
- Set all demo page toolbars to be position=”fixed” by default
- Decided on licensing (MIT)
Aristo jQuery UI Theme
- Fixed: Cross browser CSS3 animations appear to have been re-instated.
- Pull Request: Added a non-prefixed value that I missed.
- Pull Request: Widget nesting issue fixed.
jQuery-UI.toggleSwitch() - UX Lab 005
The last thing web devs need is another toggle plugin. But this was developed for sites that already run jQuery UI and don’t want the extra bloat of yet another library. It draws upon the theme .ui-slider for the look and feel, and can be applied to <select> elements with two child options.
Configuration options and examples are contained within the UX Lab page. I guess this warrants it’s own GitHub repository for change management and issue tracking. I’ll get around to that eventually.
A Sneak Peak at Aristo 2
As the Cappuccino Conference in the states winds down, a sneak peak at Aristo 2 was announced over Twitter. Frequent readers will remember that Sofa designed the original theme for the Cappuccino framework - and my jQuery UI theme was based off of this. Not only does the update refresh familiar UI components, it also includes an exciting new icon pack. From what you can see below, they’re nothing to laugh at either. A preliminary count shows 108 icons available in the same glyph style no doubt popularised by iOS and now OS X.
The changes have already been reflected in the design section of Sofa’s website, but the PSD on their GitHub repository remains unchanged.
You can get a more in depth view of both the UI components and the icon set by downloading the sneak peak of Aristo 2.
So Will I Be Making an Aristo 2.0 jQuery UI Theme?
Initially, no. I think that the original Aristo theme is still travelling along quite nicely. The design direction the new theme is taking is not entirely different enough to warrant the extra time. It’s also worth considering that a lot of the unique touches in Aristo 2 don’t translate that well to jQuery UI themes. The modal and datepicker are just different enough to cause a few cross-browser headaches. Other components like checkboxes, radio buttons and dropdowns aren’t natively supported - even if popular plugins do exist.
Hats off as usual to Sofa, it’s no surprise they were acquired by Facebook.
The Aristo theme for jQuery UI nudged up 1000 followers some time yesterday. Thanks for your support and contributions!
Aristo 1.2 Released
The latest release of Aristo closes some long term issues, as well as those introduced in my last commit. User comments expressed a need for styled inputs and text areas. My last commit included my implementation of these, but the selectors were too generic and were not sandboxed to any particular class. This has been recitified, and you will now need to place the “ui-form” class on a root element to inherit the styles.
- Closed duplicate bugs for submit button styling. This was a major pain and I’ve had to use browser specific fixes. Submit buttons should now look the same as other buttons in IE8, IE9, Webkit, Firefox and Opera.
- Some CSS3 snippets only had vendor prefixes (-moz and -webkit), and were not displayed in Opera. This led to some pretty inconsistent visual effects.
- Sandboxed the form element styles. If you would like to use the default form styles with subtle box shadows etc, you now have to place the “ui-form” class on a parent element.
Aristo in the Wild
Here’s a simple list of places I’ve noticed my Aristo jQuery UI theme popping up - or received a tip off either here or on Hacker News. Are you using Aristo somewhere exciting?
Native Implementations
- jStat: A JavaScript Statistical Library
- Nooots
- Text Drop App
- Butter App
- Time Glider
- Aristo Menu Plugin
- Qooxdoo Theme
Derivatives
Aristo 1.1 Released
I woke up on Saturday morning to find about 2,000 new visitors to my blog and 22 email notifications of new Twitter and Tumblr followers. It turns out Aristo made it to the front page of Hacker News for the second time in it’s short lifespan, and in turn was tweeted about by some popular Twitter users.
HN users had some great suggestions in the comments section, and most of those have been implemented and are now live on the GitHub repo and demo page. The list of changes include:
- Styled basic input and textarea fields.
- Button hover effects now fade with CSS3 transitions (Webkit, Firefox & Chrome).
- Put user-select:none; on buttons to give them a more native feel.
- Prevented empty button links from sending you to the top of a page (confusing when in a modal).
- Fixed auto-complete versus slider z-index bug by hard coding z-index. This may cause other problems, so be on the lookout.
- Fixed background bleed through bug for the progress bar.
I hope this keeps you satisfied for a while :)
Aristo 1.0 Milestone Release
Great news! The Aristo theme for jQuery UI has hit a cleaner and more concise version 1.0 release! I was able to close some issues that were raised on the GitHub repo and do a few little house-keeping things I’ve been putting off. A list of changes made in this release include:
- Converted the theme to use CSS3 gradients and effects where possible, greatly reducing the number of images used. Image fall-backs are still provided for Internet Explorer, which are not called by other browsers.
- Three issues raised on GitHub have been closed, and another will be fixed in a future bug fix commit.
- Updated the theme to work with jQuery UI 1.8.7 by re-basing the theme from the latest Theme Roller version.
- Created a demo page hosted using GitHub static pages (a very handy little feature).
In regards to the new CSS3 gradients and effects: I have deliberately chosen a stance of graceful degradation. The Wijmo library (based upon my and others’ work with Aristo) takes a more troublesome stance of “aggressive degradation”. Tough to replicate effects (such as the slider handle) are achieved with CSS3 effects that do not degrade well between browsers. The use of CSS3 overall comes at the cost of the pixel perfect precision that made the work of 280 North so great. Hopefully this is being worked on as we speak, but demo versions I have played with do need polish.
Aristo 0.8 + Minor Milestone
Icon courtesy: www.icondrawer.com
Aristo nudged up 250 GitHub followers recently, with the current count sitting at 254.
The 0.8 release is a minor update, fixing the buttons that were broken to a structural change to .ui-buttons in the jQuery UI 1.8.5 release. There are 3 open issues, but I haven’t had the time to look at these as of yet. I am still without internet following the big move to my new apartment, so thanks to those who pushed commits to the master.
jQuery UI Draggable Grid & Snap Callback
I had the unfortunate privilege of discovering a minor bug logic flaw in the jQuery UI $.draggable() function. But first, a bit of background: I’m working on a worklfow creation tool in which states are created and assigned actions. States can be linked via a four point anchor system, which is where things get a bit messy. Our draggable state DIVs are set up to use a 6x6 grid, meaning they physically snap while being dragged around the canvas area.
The problem: the drag callback function is fired before snapping and gridding is applied.
In the case of the workflow tool, raphaelJS arrows linking the states are rendered to the anchor points to demonstrate a relationship. If this redrawCanvas() function of mine is fired on the drag event, the snapped value has not yet been applied to the object. As a result, the arrows can be off by as much as 50% of a grid while dragging.
Above: An example of a grid-snapped state not aligning to its arrow.
Comments in the source code indicate this was intended for plugins and callbacks to alter the position value before it is applied:
Call plugins and callbacks and use the resulting position if something is returned
The hack: there’s no quick and easy future-proof way of fixing this for everyone, so I slipped in my own little callback into the source. It’s not ideal, but it works perfectly for our needs. In line 178 of jquery.ui.draggable.js I entered the following:
if(this.options.snapCallback) {
this.options.snapCallback();
}
And then it’s just a matter of changing your:
drag: function() { }
To a snapCallback, ensuring it will run once the position has been applied to the objects:
snapCallback: function() { }
Alternatively, your code can remain in the ondrag event - but moving it to the snapCallback ensures the styles have been applied and the DOM is updated. If anyone has a better idea (moving the drag trigger would break plugins) then please do let me know!
Interesting jQuery Mobile Design Choices
Following major announcements from Sencha Touch and jQTouch, the jQuery team has piped up: announcing jQuery Mobile. How the jQuery Mobile project differs from projects like jQTouch is the way in which it aims support a range of devices. This can only be achieved by making use of a unified design approach.
jQuery Mobile is faced with an exceptionally difficult task. jQuery Mobile theme design must complement a range of operating systems including iOS, Android, webOS, Symbian, Windows Mobile, Blackberry and more.
Over the years, Apple has introduced and perfected a range of design and usability conventions for the handheld device. It has always felt like the competition has been clamoring to catch up. Libraries like Sencha Touch and jQTouch piggy-back off the success of the iOS interface. If jQuery Mobile is to set itself apart from other libraries, and appear as native as possible across a range of devices, it must abandon some of the best-practice examples that Apple and others have already established.
Below is a comparison between jQMobile and iOS back buttons. I think the iOS back button is an excellent motif, where the tapering of the left hand side represents the direction this button will take you in. Without that, you need some kind of directional arrow. Your back button just grew 31px, and now reminds you of the early 00’s.
Rounded as Usual
I’ve been fairly critical of jQuery UI themes in the past. Points I made about the “goofyness” of the themes were in fact well received by the jQuery UI team and lead to some changes in ThemeRoller. A lot of the problems stemmed from excessive rounding, vibrant colour choices and dated gradients. With jQMobile, the rounding of pretty much every element remains unchanged. A combination of excessive rounding and the “abandoning Apple conventions” problem lead to the following example:
What this screenshot means to me is that if I want a ‘Back’ or a ‘Cancel’ button at the same time as a ‘Save’ button, (preserving padding and readability) I can only spare four characters for a title. That’s right. Four. Characters.
Don’t get me wrong, the majority of elements look big and clickable and enticing. It’s also good to see the design team toning down their colour choices to the colour-of-now: desaturated blue. jQuery and jQuery UI have revolutionised design and development for me personally, and have changed the way we do things at work. If jQMobile can iron out some of the UI teething problems, hopefully it can do the same for universal app development.
PS. For the love of god, please tone down the rounding. Everyone knows it reduces your perceived hit target. And it looks cheap.
Aristo 0.7 Released
The power of the GitHub community has proved itself once more! I’ve been far too busy of late to post any Aristo updates, so two particular members have come through with the goods. Massive props must be delivered to Muhammad Lukman, who both raised and solved four issues with the Aristo theme, and usual suspect Stefan Livens for merging the fixes in and updating the demo page.
Most importantly, I have decided to manage pull requests and forks entirely via the web interface!
Aristo 0.6 Released
Icon courtesy: www.icondrawer.com
Before I discuss what’s new in this release, I’d first like to thank the community for their interest and support in the project! The Aristo jQuery UI theme nudged over 100 followers and contributors on GitHub some time last week. So thanks again for your encouragement, issue reporting and bug fixes.
Moving on to what’s new in the 0.6 release:
- IE6 & IE7 Button Width Fix - This was a pretty critical bug preventing Aristo from rolling out as a semi-official release. Previously, buttons were taking 100% screen width in IE7 and earlier.
Unfortunately the fix for this is only partial, as buttons with icons inside of them push each other down sequentially because of their line-height value. I’ll blame IE’s poor support of display:inline-block; for my apathy. - <input type=”submit” /> - A bug brought to my attention in the comments on the 0.5 release. Calling the .button() function on a input:submit resulted in an unstyled element. A tough one to fix in all browsers, as jQuery UI does not wrap submit elements in the usual DOM, presumably to preserve form functionality.
- Button Border Inside a Tab - Due to the nesting of classes, placing a button inside a tab panel resulted in a pretty screwy looking border being placed on it.
- Autocomplete Jumpiness - A legacy bold class on hover states caused the demo page autocomplete to wrap when the user hovered over “Antigua and Barbuda”.
To date, this release closes all issues raised on GitHub. If you’ve noticed any more, please raise them on GitHub. Disqus has some serious flaws in its URL tracking, so comments are probably not ideal.
