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.

Even better, while JavaScript and CSS includes are unable to take full advantage of the increased parallelism a CDN offers, the theme’s images do. This makes loading the theme from Google’s CDN particularly effective.

Using it

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:

<!DOCTYPE html>
<html>
<head>
  <!-- To avoid horizontal scrolling in this code listing. -->
  <base href="http://ajax.googleapis.com/" />
 
  <!-- Reference the theme's stylesheet on the Google CDN -->
  <link href="/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css"
        type="text/css" rel="Stylesheet" />
 
  <!-- Reference jQuery and jQuery UI from the CDN. Remember
       that the order of these two elements is important -->
  <script src="/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script src="/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
 
  <!-- Initialize the tabs when the document is ready -->
  <script type="text/javascript">
    $(document).ready(function() {
      // See the jQuery UI Tabs documentation for
      //  more information about how this works.
      $('#tabs').tabs();
    });
  </script>
</head>

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

<body>
  <div id="tabs">
    <ul>
      <li><a href="#tab-1">Tab 1</a></li>
      <li><a href="#tab-2">Tab 2</a></li>
      <li><a href="#tab-3">Tab 3</a></li>
    </ul>
 
    <div id="tab-1">
      <p>These tabs were created with JavaScript, CSS, and 
        images hosted on Google's AJAX APIs CDN.</p>
 
      <p>Thanks, Google!</p>
    </div>
    <div id="tab-2">
      <!-- Tab 2's content goes here. -->
    </div>
    <div id="tab-3">
      <!-- Tab 3's content goes here. -->
    </div>
  </div>
</body>
</html>

That HTML (without a single file or image hosted locally) results in this:

tabs-example

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.

Nothing’s perfect

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.

Conclusion

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
Smoothness Start
Redmond Sunny
Overcast Le Frog
Flick Pepper Grinder
Eggplant Dark Hive
Cupertino South Street
Blitzer Humanity
Hot Sneaks Excite Bike
Vader Dot Luv
Mint Choc Black Tie
Trontastic Swanky Purse