View
 

Themeroller

Page history last edited by Todd Parker 14 years, 10 months ago

Themeroller 1.6 > 1.7 re-factor summary

The Themeroller tool went through a fairly major overhaul for the 1.7 release to set the stage for a broader and more consistent use of Themeroller styles in jQuery UI. These include:

 

  • re-vamped layout to make more room for widgets and make the left bar easily converted into a future bookmarklet tool.
  • new, extended class framework with a new naming convention that is more scalable and better organized that can serve as a powerful CSS API
  • re-class all the current 1.6 widgets, demos and documentation to use new, generic classes and move away from custom variablized css per widget
  • re-factor icon set into a single PNG 8 sprite with anti-aliasing, extend icon set to be more comprehensive
  • introduce versioning for Themeroller downloaded css and tool
  • add optional (and experimental) css-based corner classes to the css framework and TR tool
  • add new levers for shadow color, opacity, thickness, offset
  • add an inspector style interaction so a user can click on a widget and see what TR lever it maps to or hover on a lever on the left and see all the places it is used in the widgets

 

 

Rounded Corners in ThemeRoller:

Rounded Corners will be implemented in the next version of ThemeRoller via CSS Border-Radius.  This is where rounded corners are specified via CSS3's border-radius rule. Radius will default to zero and will be adjustable via a lever in the ThemeRoller interface; most likely a select menu of options that look best.

 

These settings will generate framework classes that can be applied to widgets to allow specific corners to be rounded. These classes look like .ui-corner-ne or .ui-corner-right or .ui-corner-all (for rounding 4 corners). Since these are now fairly compact, we are discussing using them in our own UI widgets.

 

We think this approach is the least obtrusive to both markup and external implementations and is most forward-looking in terms of markup best practices. IE users will not see rounded corners, which may not be acceptable for some clients, but of course a developer can always tweak the CSS to their needs. It is unclear whether IE8 will implement border-radius, but it will be easy to support it when it

does.

Note that css border-radius has some disadvantages: It's not fully cross-browser yet (works in safari and firefox, but not IE7). Corner smoothness can vary, particularly at

higher contrasts. Doesn't always look great in Firefox. Requires

browser-specific CSS at this time, but is always followed with the w3c syntax.

 

Spinner icons

As discussed, we do need to figure out how to let users drop in a variety of animated Ajax spinner icons like ajaxload.info. The big issue we need ot solve is that these are typically animated gifs which have only 1 level of transparency which means that we can only produce aliased loaders or need to create custom loader animations anti-alised against the correct backgroung color and texture where they appear in the interface. We've created a very small and simple transparent alias animated gif that uses straight lines and white/gray/black colors so it will look ok (but not great) on any color.

 

Here is an example of this simple loader on a range of colors:

 

 

 

The ideal situation would be to have animated spinners that are created with multiple levels of alpha transparency so one loader would work on any background automatically. This would require using the PNG-24 format which doesn't support animation and does not work in IE6 and would require a hack. We'd need to create spinners in the form of a large sprite with each animation frame placed side-by-side, then clipped and moved on an interval to make it look like an animation. Anyone want to try a proof of concept for this?

 

 

 

 

High contrast mode for accessibility

We should think about addressing High Contrast Mode (where, for example, background images get turned off). The basic strategy to deal with HCM is to detect the mode in onload (and to be the first onload handler), and

dynamically load a style sheet which might for example, change a close

box background image into a letter 'x'. To try out HCM on Windows try

[Left alt]+[Left shift]+[print screen].

We could easily create a HCM theme in Themeroller and jsut use this via the mechanism described above. Maybe David Bolter can offer more details on how to detect for this mode in a browser. Should be pretty easy to do and worth the effort. Assuming that text sizes should also be bumped up quite a bit too

Comments (0)

You don't have permission to comment on this page.