Opened 9 years ago

Closed 9 years ago

#5075 closed enhancement (notabug)

ui.button.css -- several rules are in px, s/b em?

Reported by: StevenBlack Owned by:
Priority: minor Milestone: 1.8
Component: ui.css-framework Version: 1.7.2
Keywords: Cc:
Blocked by: Blocking:

Description

This arises from the following question about scaling-up the jQuery-ui sprites so the icons display larger.

http://forum.jquery.com/topic/scaling-up-jquery-ui-sprite

The sprite upsize process, which is a rather natural implementation case scenario, would be a lot cleaner with em metrics.

Looking at ui.button.css, three rules contain px measurement when em measurement is probably called-for.

The 3-rules extracted from ui.button.css:

.ui-button-icon-only .ui-icon, .ui-button-text-icon .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }

.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }

.ui-button-set { margin-right: 7px; }

Change History (2)

comment:1 Changed 9 years ago by scottjehl

Hi Steven, Thanks for commenting. We love flexible units and try to use them on everything we can in UI.

However, our icon sprite is a fixed-size image, so we need to use pixels for any positioning, dimensions, and background-position of elements that make use of the icons.

For example, we typically size a ui-icon span at 16px x 16px. If we used ems (1.6em x 1.6em) for this, any inherited font-size larger than 10px would cause other icons in the sprite to be revealed, and any smaller font size would begin to crop the icon out of view.

The negative margins you mentioned above offset the 16px x 16px span perfectly based on half its width or height. Changing the margin value to ems would cause the icon span to offset more or less than it should, depending on the font size.

These aren't values that we want to be flexible based on font-size. They're fixed to match the image dimensions.

For the same reasons, we have to use pixels to point to icon positions in the sprite, when using background-position. Ems wouldn't work there either because the position would change depending on font-size, when really, we are always trying to find an icon at an absolute pixel location in the sprite.

A larger icon sprite would require a full new set of

All that said, the last style you show above could safely use ems, but it's not really related to the ones before it. Using ems there would just add flexibly adjusted space to the right of the button set, which may or may not be desirable depending on the interface.

Anyway, do you agree/disagree with my comments? I'd propose marking this ticket closed and possibly changing that button set margin to .7em if you think it helps.

Thanks -Scott

comment:2 Changed 9 years ago by Scott González

Resolution: invalid
Status: newclosed
Note: See TracTickets for help on using tickets.