wiki:WikiStart
Last modified 10 years ago Last modified on 07/19/07 12:29:06

Welcome to UABgrid Theme

Overview

The UABgrid theme project is about maintain the UI look of UABgrid (eg. themes, skins). At the moment were just maintaining one theme. We'll give it the code name "UABgrid Base". This is a simple header + conent area (left and right panes) + footer. This basic theme needs to mapped to all the UIs of the various web-tools used by UABgrid. The base theme is defined as a div-based theme.

Most of the tools we use have at least a rudementary separation of logic and presentation, so it's somewhat straight forward to apply the UABgrid look to these tools. Some tools come with a table-based layout by default though and it's preferrable to convert this to a div-based layout. Some tools have fancy theme engines that make this task much easier.

In all cases though, it's necessary to take the basic UABgrid theme and apply it to a particular tool. This is the focus of the UABgrid theme project. It concentrates on maintaining the base layout (div-based) and then managing the exploration of how to apply that look to specific UABgrid components. UABgrid Login is the first such example. UABgrid-docs (eg. mediawiki) is next on the list. Note the actually theme application to the component will occur in the component-specific project though, typically this is our site customization (see UABgrid Project Structure for details).

Another area of development in UABgrid theme is utility pages. These are pages that will be broadly useful but don't have specific projects that they belong to. For example the "page moved" paged to help maintain forward references for moved resrouces. This can be a simple static web page that just directs the user (automatically) on to the new location of a resource. This gives folks a chance to update their browser links and gives us a chance to retire nolonger used resource address after a resonable period of time.

Feature Discussion

Meta-Navigation

An open issue at present is how (or whether) to deal with the highly distributed nature of the UABgrid desktop via the theming process. That is, should space be allocated in the theme for meta-navigation elements. Essentially a menu the would include cross-tool liks to support easier navigation from one tool to the next and back again. A sophisticated version of this would likely require code enhancements to the underlying tools (or configuration customizations for those that support custom menus). There is a little of this in UABgrid login with the "home" and "help" links.

There are other ways to deal with this as well. The browser back button is the worst of these, but some browsers (firefox) support live bookmarks (essentially RSS fed bookmarks). myVocsbox provides a way to feed a set of commands as bookmarks to such browsers that can provide powerful metanavigation commands. The configuration and operation is outside the scope of theming but was brought up due to its relavance. Other client side tools can be used (even the traditional command line or desktop menu integration) to support this. Essentially, these may be viable alternatives for address this issue.

FAQ

How do I get elements to show up consistently in all browsers?

HTML layouts across browsers can be a complex topic. With the UABgrid theme we generally target IE6&7, FF1.5-2.x, Safari/Konqueror?. Viewing your code in all three of these browsers is a good way to discover subtle errors in your div layout and CSS. By far, the bug-a-boos come from the CSS and using careless choices, stray data, or false assumptions about the impact of various CSS commands.

If you are having a problem with the layout of a section of the page, one of the best ways to get it working is to isolate your code. This is standard programming practice. We don't think twice about isolating our functions and then doing test executions with differnet data until we get it right. Then we move our function back into place and can trust its operation. If the resulting computations still come out wrong, we can be confident that the error is occurring outside the context of the function. Other bad data my be corrupting our input data or we have code elsewhere that is breaking the code in our function of interest. This latter problem is often a problem in interpreted languages (like HTML) where we can't see the effects till run-time. That is, there is no compiler to tell us we're doing something wrong, the error just shows up in the output. When we think of our web pages in the same way as our coding environments then the solutions are pretty simple, even if the tool chain is somewhat more primitive.

As an example, let's say we're trying to build a rounded corner background to a text box and we think we have it working but when we look at the page in multiple browsers the bottom of the text area doesn't have the corner images and the containing div background lining up correctly. The problem is either going to be dangling divs in the area we working on, incorrect CSS directives, or something elsewhere on the page. We need to isolate the code just like we do when programming. The browser is the execution environment that takes the function (our HTML) and feeds in data (the CSS) to render an image in the browser. By isolating the code you can test it and the data and see where there error comes from. Once this is working in all execution environments (interpreters a.k.a. browsers) you can move it into place in the full script (entire HTML page). If it messes up after you put it in place then the bug is likely in the HTML or CSS (functions or data) external to the function of interest.

You isolate your code by taking the HTML of interest and putting it in it's own page, take the CSS of interest and put it in its own page. Then run the two together. Doing this is a whole lot easier if clean development practices have been followed, ie. you've got relative links to images and css so you can re-root (duplicated and re-locate) page elements with ease. If you haven't been doing that, this also becomes an opportunity to clean up your code. ;)

Resources

Some links on web design using CSS were collected during the development of the base theme, you might find them useful:

Bookmarks tagged with css