Designing Your Page Around a jQuery UI Theme

The release of jQuery UI 1.5 brought with it the Themeroller, which is a quick and easy way to customize and download a set of jQuery “widgets” for use on a web page.

Simply choose from one of the pre-built themes, or adjust the settings to your own liking and download the theme. Your download will include all the files necessary to for all these widgets to work, and a demo file with all of them on one page.

In fact, these pre-built theme could serve you well as a starting point for a new design. Let’s manipulate a theme download into a basic website using the Tabs and Accordian.

Cleaning House

We are going to use the tabs widget for our main content area of the site, and the Accordion for the sidebar. A good first step would be to get your folder organized and then start removing extra code from the HTML and CSS files.

I started out by re-naming the demo.html file to index.html and the CSS file to style.css.

Then I removed all the CSS from the CSS file that had to do with anything other than the Tabs and the Accordion. There is a lot of extra cruft in the default CSS file, including resets on tons of elements that don’t really need it if you use a global reset. Clean house at will here.

Then do the same thing in the HTML file, removing all code that isn’t basic structure or part of the tabs or accordion. Here is what my page looks like after cleaning up:

Structure

The tabs make good sense to use as a main content area of a site. Each of the tabs can essentially be a different area of the site. First of all, lets wrap the entire site in a div with an ID of page-wrap so we can center it and set a fixed width. Then since both the tabs and accordion are already in wrapping div’s, we can target them with CSS, set static widths and float them to either side. This is what the CSS might look like:

#page-wrap {
	width: 900px;
	margin: 0 auto;
}
#accordion {
	width: 280px;
	float: right;
}
#tabs {
	width: 600px;
	float: left;
}

Now the tabs are taking on more of a main content look and the accordion is like a sidebar. Each tab can function like a different section of the site, only it’s a very cool dynamic way to do it since switching pages will require no page load at all!

Here is what my page looks like after a bit of restructuring:

Fleshing out content

Let’s get that default content out of there and start plugging in our own stuff. Well, this is still a demo so I’ll leave most of that Lorem Ipsum stuff… But now take a look after I toss in a few graphics and plugin some more realistic content:

Final

That whole site took about 20 minutes to throw together. It’s no masterpiece by any means, but it’s a good start on a nice and clean looking site. Goes to show how quickly you can get started building web pages and even having cool dynamic functionality through jQuery and the UI themeroller.

VIEW DEMO

DOWNLOAD FILES