[Dojo-interest] Tundra theme and CSS Sprites

[Kris Schneider]

On 12/19/07, Dustin Machi <dmachi at dojotoolkit.org> wrote:
> Daniel,
>
> For sure its a valid technique and we use it on apps we put into
> production all the time.  I wish we had a way to generate the css
> sprites though.  It seems to me that having them all wrapped up all the
>  time is hard on maint.

It seems like it would be possible to leverage something like
ImageMagick (http://www.imagemagick.org/):

http://www.imagemagick.org/script/montage.php
http://www.imagemagick.org/Usage/montage/

Or even Java 2D. Isn't Java used for the build system?

> Dustin
>
>
> Karl Tiedt wrote:
> > I believe Soria is a step towards this, if not currently, I'm almost
> > positive the Pete has a sprite version he was working on.
> >
> > -Karl
> >
> > On Dec 19, 2007 4:15 PM, Torrey Rice <itorrey at gmail.com> wrote:
> >
> >> I like the idea and would be interested in seeing the results and if it
> >> works well we'll incorporate it. Currently the theme isn't super
> >> optimized so there is definitely room to clean it up and reduce the
> >> connections.
> >>
> >> Thanks,
> >>
> >> Torrey
> >>
> >> Daniel wrote:
> >>> Hello,
> >>>
> >>> Ok, I have now optimized my skeleton app to the point where, according
> >>> to Firebug+Yslow, the biggest issues are:
> >>>
> >>> - Not having ScrollBar.js in the build :(
> >>> - Too many HTTP requests: 12 image downloads by the tundra theme.
> >>>
> >>> Has anyone given any thought to modifying tundra to use CSS sprites? For
> >>> example, instead of having four images for buttons:
> >>>
> >>> buttonActive.png    buttonDisabled.png
> >>> buttonEnabled.png   buttonHover.png
> >>>
> >>> One could have a single very tall image combining all four, and use
> >>> something like:
> >>>
> >>> .button {background-image:url('images/buttonBg.png')}
> >>> .buttonActive   {background-position:0px 0px}
> >>> .buttonHover    {background-position:0px -22px}
> >>> .buttonEnabled  {background-position:0px -44px}
> >>> .buttonDisabled {background-position:0px -66px}
> >>>
> >>> So you have 1 HTTP request instead of 4. You could do the same for the
> >>> arrows, the tree widget, progress bar, and others.
> >>>
> >>> Has anyone thought of doing this? I ask because I'm thinking about doing
> >>> this for my tundra-derived theme and I wonder whether (1) it's a waste
> >>> of time or (2) it's a great idea and you'd like a patch.
> >>>
> >>> I'd probably try tomorrow or Friday. It's a fair bit of work, so I don't
> >>> want to start it if there's a reason why this isn't a great idea. It
> >>> looks like a great idea to me. Each HTTP request incurs a non-trivial
> >>> overhead and this promises to cut that down significantly.
> >>>
> >>> Cheers,
> >>> Daniel.

-- 
Kris Schneider <mailto:kschneider at gmail.com>