Getting started with jQuery UI is easy. You simply navigate over to jqueryui.com/download to obtain a copy. You can either download a preexisting theme or make your own. As Figure 8-1 shows, the download page also gives you the option of choosing which components to include in your download. It’s the rare project that makes full use of all the widgets and tools of jQuery UI, and in those cases, it’s better to download only the necessary components in order to reduce the download size footprint on your final product. But for exploring and experimenting, download the complete set of options.
If you want to edit your theme, inside of the file css/selected-theme-name/jquery-ui-xxx.css, there is a series of commented outlines (in my file, it’s around line 50) with an HTTP address. Use this address to re-create your altered theme in ThemeRoller, and continue modifying to your heart’s content.
The following folders are included in the jQuery UI download:
- index.html: A “gallery” of the widgets included with jQuery UI as well as the CSS classes
- js: A folder containing a copy of the latest, full version of jQuery UI, alongside a local copy of the core jQuery library
- css: A folder containing a default jQuery UI theme
- development-bundle: A folder containing full, unminified versions of all the jQuery UI files
jQuery UI contains a comprehensive CSS framework, which gives all of the widgets a consistent look and feel.
The CSS framework files are located in two places: the css folder at the top level and the development-bundle/themes folder. The .css file found at the top level contains all of the definitions in a single place, which reduces the amount of HTTP requests required to obtain CSS definitions. The files found under the development-bundle directory contain both the base theme and the selected custom theme.
Source: Otero Cesar, Rob Larsen (2012), Professional jQuery, John Wiley & Sons, Inc