Uploaded image for project: 'SmartSprites'
  1. SmartSprites
  2. SMARTSPRITES-36

sprite-alignment should support center/middle option as well

    Details

    • Type: Improvement
    • Status: Resolved
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 0.2.3
    • Fix Version/s: 0.2.10
    • Labels:
      None

      Description

      Motivation

      The current list of supported values for the sprite-alignment property is incomplete: it does not cover the center value that is supported by the background-position CSS property. Adding center to the set of supported values will allow positioning sprite images at the center of the container. Original Jouni's report comes at the bottom.

      Implementation

      Add center to the set of values supported by the sprite-alignment property. If center alignment is specified for an individual image, the generated horizontal / vertical background-position CSS property will be center for vertically- / horizontally-laid out sprites. Additionally, the image will be centred within the width / height of vertical / horizontal sprites. The margins specified in sprite-margin-* will add up to the individual image being centered, which will allow shifting the individual image without adding extra padding to the image itself.

      Please see SMARTSPRITES-39 for more specification regarding interactions with sprite-width and sprite-height properties.

      Original report

      Currently the only option for for sprite-alignment are left | right | top | bottom | repeat.

      I have a use-case where I would need the option "center" as well (could be called "middle" as well).

      So when I write this in my original CSS like this
      {{
      /** sprite: verticals; sprite-image: url(../common/img/vertical-sprites.png); sprite-layout: vertical */

      background-repeat: no-repeat;
      background-position: center top;
      background-image: url(img/image.png); /** sprite-ref: verticals; sprite-alignment: center */
      }}

      it should be transformed to this
      {{
      background-repeat: no-repeat;
      background-position: center top;
      background-image: url(img/image-sprite.png);
      background-position: center -123px; /* (some arbitrary value for top) */
      }}

        Attachments

          Activity

            People

            • Assignee:
              stachoo Stanisław Osiński
              Reporter:
              jouni Jouni Koivuviita
            • Votes:
              3 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Time Tracking

                Estimated:
                Original Estimate - 4h
                4h
                Remaining:
                Remaining Estimate - 4h
                4h
                Logged:
                Time Spent - Not Specified
                Not Specified