The jQuery UI CSS Framework – Part 1: Intro and How To Style a Button

By | January 20, 2010

This is the first in a series of articles on the jQuery UI CSS Framework.. This is a powerful suite of CSS selectors that you can use to build web applications with a consistent UI. The main jQuery UI demo page shows you a list of UI widgets (which are still somewhat limited in scope compared to ExtJS, for example), but it doesn’t do a very good job on selling you on the benefits of designing other UI components, or components of those widgets, using the UI CSS framework. In this article I explain the framework, its benefits and weaknesses, and show you one simple example of styling a button.

What is the jQuery UI CSS Framework?

It is a set of CSS selectors that let you design your web pages to conform to the jQuery UI widgets standards. Quote:

The jQuery UI CSS Framework provide semantic presentation classes to indicate the role of an element within a widget such as a header, content area, or clickable region. These are applied consistently across all widgets so a clickable tab, accordian or button will all have the same “ui-state-default” class applied to indicate that it is clickable.

(from the jQuery UI Theming documentation page).

Benefits of the jQuery UI CSS Framework

Here are the top benefits I think the framework has to offer:

  • It handles difficult design issues for you. For example, you can apply rounded corners to buttons and links easily, just by adding a class of  “ui-corner-all” to your element.
  • It gives you a consistent look and feel to your page design elements
  • You can use the jQuery UI widgets (such as tabs, dialog boxes, accordions, etc. in conjunction with your own custom elements (text, tables, buttons, boxes, icons, etc.) and get the same look and feel for both.
  • The UI is skinnable. You can use Themeroller to roll your own theme, or select an existing theme. For example, I’m using the ‘Redmond’  theme in an application I’m currently building. You can see the Gallery of themes by clicking the ‘Gallery’ tab in the top left corner.  The gallery also shows you what the standard jQuery UI widgets look like. Unfortunately it doesn’t show you other common design elements- but that’s why I’m blogging!
  • You can easily switch to another theme just by changing a single path reference in your applications. You can see this at work by using the Themeswitcher widget, which is easy to embed in your page (just remember you will be connecting to the jqueryui.com website when you use this widget).

Downsides to the Framework

The framework is not without its weaknesses, some of which, over time, I’m sure will be addressed. The major ones I see are:

  • Poor documentation of the purpose behind each selector.  For example:

    .ui-helper-clearfix: Applies float wrapping properties to parent elements

    . What exactly does this mean? And where would you use it? I think I’ve figured it out, by trial and error, but couldn’t the authors write something more meaningful?

  • Reliance on em as the unit of measure rather than pixel. I realize there are lots of advantages to this, but it has its drawbacks too- most notably, when you nest some UI elements you can end up with different font-sizes, due to the use of 1.1em in some cases (this is a multiplier, so in my app I have 1em applied, which results in a font size of 11px, then I have a tab with content. The text in that content comes out at 12.1px (1.1em). If you don’t understand em versus px, try this article. Also, see my post on using 62.5% on a body CSS selector..
  • Incomplete framework. Most notably, tables are not addressed. (I use tables to present database information in business apps). Tables fall outside the regular cascade rules, it seems, so the font size for table content is screwed up. I suggested a simple fix of adding the word ‘table’ to a selector, but that got dismissed as too specific. So whenever you use a table in conjunction with the Framework CSS, you’ll have to add a customized CSS rule, such as this one:
    .ui-widget table { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1em; }. I could rant about this, and may do in another post… Other selectors are missing, too, such as alternating row colors for table zebra striping. Perhaps they will add this to the Themeroller app, as well as to the CSS Framework API specifications.
  • Sometimes you need other CSS to make things look like they do in the online examples. I ran across this with the Dialog example that shows a form. The form looks really beautiful, but it actually uses several additional selectors besides the ones included in the Framework CSS.  I don’t really think there’s much of a technical alternative here, but it’s something you need to be aware of.

How To Learn About The Framework

I learn about how to use the framework by using the following strategies:

  • Read the official CSS Framework documentation.
  • Try out the widget examples and do a ‘View Generated Source’ or ‘Inspect Element’ with Firebug. This shows you how the UI Widget developers utilized the CSS framework. For example, I noticed that the Dialog widget shows really nice looking Ok and  Cancel buttons, so I inspected them to see which CSS rules had been used. (See my example below).
  • Follow the jQuery UI forum and read books. There’s a new edition of a book on jQuery UI 1.7 that recently (Nov 2009) came out.

Example Using the Framework To Style a Button

Here’s a simple example of using the CSS selectors to style a button. I’m using the Redmond theme here.

I assume you know how to install the jQuery UI library and CSS.  You can grab it here.

Here’s the code:

    <style>
    body {font-size: 62.5%}
    </style>
<button id="cancel" type="button"  class="ui-state-default ui-corner-all">Cancel</button>

Here’s what it looks like:

jQuery UI button in FireFox

jQuery UI button in FireFox

jQuery UI button in Chrome

jQuery UI button in Chrome

jQuery UI button in IE

jQuery UI button in IE

As you can see, FireFox and Chrome each do a nice job of rendering the rounded corners, while IE 8 still doesn’t support this feature (at least, not with CSS).

Explanation of The CSS

I’m using two classes on the button element. This is a common coding technique when using the jQuery UI CSS framework. It results in combining the various selectors of each style in an accumulative manner. The ui-state-default class “Applies “clickable default” container styles to an element and its child text, links, and icons.” For example, we could apply this to a link and get essentially the same effect. This class includes a background image that provides the button coloring. As I mentioned earlier, if you change the theme used in your app, the button will appear in the color of that theme.

The ui-corner-all selector applies a radius (rounded corner) to each of the four corners of the button border. That’s it!

Next Article

In the next article I will show you how to style a div to create a nice looking box with a heading in it.

7 thoughts on “The jQuery UI CSS Framework – Part 1: Intro and How To Style a Button

  1. Pingback: The jQuery UI CSS Framework – Part 2: How To Create Widget-style Boxes

  2. Robin

    Thanks for the tip. I couldn’t get my head round resizing those supersize buttons.

  3. Rolek

    There is a solution for rounded corners in IE: curvycorners

Leave a Reply

Your email address will not be published. Required fields are marked *