By now, you probably already know that Google hosts jQuery on its AJAX APIs CDN, free of charge. As I’ve discussed here in the past, I’m a big fan of using their CDN to achieve decreased latency, increased parallelism, and better caching.
If you’ve explored the AJAX APIs documentation a bit, you may know that jQuery UI is also hosted on Google’s CDN. Unfortunately, since jQuery UI plugins depend on a ThemeRoller theme, using a CDN for jQuery UI isn’t as easy as with jQuery itself.
Or, is it?
My <head> is in the cloud
While poking around a couple months ago, I stumbled upon something that I’ve found extremely useful: An entire jQuery UI theme hosted on Google’s CDN!
Not only is the theme’s CSS stylesheet there, but all 14 of the theme’s images are hosted in the correct relative location too. That means you can apply the entire theme to a page with a single CSS reference and no local files.
Using this on your own pages couldn’t be easier. There are no files to download, no paths to worry about, and no configuration is required. Just a reference to jQuery, jQuery UI, and the ThemeRoller theme you want to use will is all you need.
For example, if you wanted to build a quick demo of the jQuery UI Tabs plugin, use these references in the head of your page:
Note: You shouldn’t use the <base> tag like this in your pages. It affects all links on the page, not just those in the <head>. I’m just using it here to avoid horizontal scrolling (the bane of my existence when posting code here).
Then, just a bit of corresponding markup in the body of the document (see the jQuery UI Tabs documentation for specifics):
That HTML (without a single file or image hosted locally) results in this:
Don’t like the theme in my example? Don’t worry, because all 24 of the standard ThemeRoller presets are also hosted on the CDN. See the end of this post for a full listing.
There are a couple of potential issues when using these CDN hosted themes.
First, these themes aren’t minified. Minification shaves about 20% off the size of an average ThemeRoller theme’s CSS, which is definitely worthwhile. Hopefully, minified versions will be available at some point (assuming I didn’t miss ones that may already be hiding there somewhere). In the meantime, Google does properly gzip compress them though, which makes the difference less significant.
Second, if you normally customize ThemeRoller’s CSS or images manually, this probably isn’t for you. Lacking control over the base CSS style is something that you can work around, but isn’t worth the complexity and extra HTTP requests.
However, you can still reference the CDN’s images from custom CSS, by using absolute paths.
Overall, this seemingly small feature has been surprisingly useful in my day-to-day development. While it’s technically not very difficult to download and set up local ThemeRoller themes, there’s more friction to it than I care for. Boiling the entire process down to a single CSS reference removes all of that friction.
Even if you don’t like the idea of relying on a CDN hosted theme for production sites, this is great for prototyping. Anything that makes prototyping faster is a big win, because it allows you to try more ideas in the same amount of time.
What do you think? Does this sound useful to you? Are you comfortable leaning on Google’s CDN for your entire jQuery UI theme? Would you use this in production?
Full Theme Listing
The URLs below reference jQuery UI v1.7.2 themes. If 1.7.2 isn’t the latest version at the time that you’re reading this, you should be able to replace 1.7.2 in the URL with the current version and find a current theme hosted on the CDN.
Click any of the thumbnails to view that theme on ThemeRoller.
Click any of the input fields to select the full URL to the theme’s CDN hosted CSS file, ready for copy/pasting into your page.
|UI Lightness||UI Darkness|
|Hot Sneaks||Excite Bike|
|Mint Choc||Black Tie|
10 Mentions Elsewhere
- DotNetBurner - jQuery
- » Twitter alerts: using twitter streaming API for fun and profit Corunet. El Blog
- ASP.NET GridView – edit records using JQuery Dialog « RAD for N-Tier web apps in .NET
- uberVU - social comments
- 3 reasons why you should let Google host jQuery for you
- The Official jQuery Podcast
- The Official jQuery Podcast – Episode 32 – Dave Ward
- jQueryUI a Microsoft CDN-en « Balássy György szakmai blogja
- jQuery UI Component Library released by Component One | Devpit