Writing jQuery UI code isn't difficult, but getting the right parts of the library can be a bit confusing for HTML5 and CSS3 programmers. The jQuery UI library is much larger than the standard jQuery package, so you may not want to include the entire thing if you don't need it.
Previous versions of jQuery UI allowed you to download the entire package but stored each of the various elements in a separate JavaScript file. It was common to have a half-dozen different script tags active just to get the various elements in place.
Worse, some dependency issues existed, so you needed to make sure that you had certain packages installed before you used other packages. This made a simple library quite complex to actually use.
Fortunately, the latest versions of the jQuery UI make this process quite a bit simpler:
Pick (or create) your theme.
Use the themeRoller site to pick a starting place from the template library. You can then customize your theme exactly to make whatever you want (changing colors, fonts, and other elements).
Download the theme.
The themeRoller has a download button. Click this when you're ready to download your theme.
Pick the elements you want.
When you're first starting on a project, you'll probably pick all the elements. If you find that the page is loading too slowly, you might build a smaller version that contains only those elements you need. For now, pick everything.
Download the file.
After you've chosen the elements you want, you can download them in a zip file.
Install the contents of the zip file to your working directory.
The zip file contains a number of files and directories. Copy the css and js directories into the directory where your web pages will be (often the public_html or htdocs directory). You do not need to copy the development-bundle directory or the index.html page.
If you install multiple themes, copy only the theme information from additional themes.
All themes use the same JavaScript. Only the CSS (and related image files) changes. If you want to have multiple themes in your project, simply copy the CSS contents. Each theme will be a different subdirectory of the main CSS directory.
Link to the CSS files.
Use the standard link technique to link to the CSS files created by jQuery UI. You can also link to your own CSS files or use internal CSS in addition to the custom CSS. Be sure that you get the path right.
Link to the JavaScript files.
The jQuery UI toolkit also installs two JavaScript files: the standard jQuery library and the jQuery UI library. By default, both of these files are installed in the js directory. You'll need to link to both files. Sometimes you will see minimized files alongside ordinary versions. The minimized version will have the term min embedded. Either version is fine, but the minimized version will load faster.
If something isn't working right, check your file paths again. Almost always, problems arise because you haven't linked to all the right files. Also, note that the CSS files created by jQuery UI also include images. Make sure that your theme has an associated images directory, or your project may not work correctly. If you copied the entire CSS and JS directories from the download, you should be fine.