Since the UI team is in the process of re-writing the ThemeRoller application for performance and maintenance reasons, we should consider re-think the design of the TR tool and the themes themselves to bring them closer to the more modern system used for jQuery Mobile.
Theme changes:
- Incorporate box-shadow and text-shadow CSS3 properties to add visual depth to the themes
- Deprecate the image pattern-based background images in favor of CSS based gradients to reduce the number of images required for a theme
- Consider moving to the vector-based icons under development to gain scalable icons
- Harmonize the theme class naming conventions between UI and Mobile or just have TR write different classes for each?
ThemeRoller Tool changes:
- Architect the system so it can serve both the UI and Mobile projects with the same underlying "plumbing" and re-usable UI elements
- On the UI re-use side, the current UI themes only really have a single theme "swatch" each for bars, content areas and buttons along with a few extra levers like error and highlight. This could be mapped into the Mobile system of multiple "swatches" so there is the same mechanism for both systems or at the very least, re-use the same lever controls
- Each standard swatch lever for a bar, content clock or button state would have the following fields:
- Background: flat color or CSS gradient (support multi-stop gradients for glassy effects in addition to simple two stop gradients)
- Stroke: hex color
- Text: hex color
- Text shadow: hex color + x/y offsets, consider ways to auto-calculate this so there may be an inset/outset toggle + intensity slider instead
- Global levers, like current TR has
- Font
- Corner radius: two settings for button vs. boxes/headers
- Box-shadow: settings for shadow color and amount for dialogs/tooltips, buttons, bars, content blocks
- Modal screen: css-gradient based, like all backgrounds
- Current TR setting to deprecate
- Shadow: to be replaced with box shadow settings
- Error: move into a new content swatch ("b")
- Highlight: move into a new content swatch ("c")
Comments (4)
Ted Goodridge said
at 2:28 pm on May 26, 2011
I'll toss in the idea of outputting individual multi-state sprites for each icon in the icon set.
Pros:
• Potentially smaller overall image file size for download.
• No load delay on state change (or no need for pre-loading).
• Allows for future additions to the icon library without a change to a master image sprite.
Cons:
• Lots of individual image files saved for a theme (could make them selectable for inclusion in a theme, as well as automatically include ones being used with widgets).
I plan on working further on the icon set over this long weekend, and hopefully will be able to get some demos together.
Richard D. Worth said
at 4:05 pm on Jun 21, 2011
We should add the same requirement as the Download Builder Rewrite http://wiki.jqueryui.com/w/page/41505725/Download-Builder-Rewrite "Should be written as a service that does not interact directly with anything related to HTTP. It should be possible to build an HTTP interface as well as a CLI interface on top"
Chris said
at 9:32 am on Aug 4, 2012
Also in the Future it should be possible to call ThemeRoller via URL-Settings. (eg all the Parameters encoded in the Hash-Tag). There are many Pages out there providing a Theme as a simple Link. In addition someone can build a simple "Translator" old-params->new-params.
I found this Parameters very useful for my own "Micro-SASS" within PHP.
Just grab the Hash-Tag (without the hash),
parse it via "parse_str" (eg. parse_str($hash, $params);
and replace the placeholders in your own CSS via $your_css_string = strtr($your_css_string, $params);
chris
sievlev said
at 3:34 am on Nov 28, 2012
Have you any plans to integrate themeroller with lesscss framework?
You don't have permission to comment on this page.