Smart Sprites Resources

  • Tags : resources, resource-mapper
  • Latest : 0.2
  • Last Updated: 16 April 2012
  • Grails version : 1.3.7 > *
  • Authors : Jeff Beck and Colin Harrington
1 vote
Dependency : 
compile ":smart-sprites-resources:0.2"
Custom repositories : 
mavenRepo "http://grails.org/plugins"

Documentation Source Issues

Summary

Creates Sprites using SmartSprites as a component of the Resources plugin.

Installation

To install the plugin first make sure you have an appropriate repo added and then add the plugin dependency:

grails-app/conf/BuildConfig.groovy 

repositories {
    grailsRepo 'http://grails.org/plugins' 
    grailsPlugins()
    grailsHome()
    grailsCentral()
}
plugins {
    compile ':smart-sprites-resources:0.2'
}

Description

Smart Sprites Resources

This plugin is intended to provide the support for SmartSprites CSS Sprites from the UiPerformance Plugin in the new resources framework.

Pull requests welcome, see the Github for info.

Example (Taken from UiPerformance Plugin)

This plugin recognizes CSS files that are marked up using SmartSprites comments. Details available in the library's site documentation. Everything is defined as a comment, so these changes have no impact on development mode.

In a CSS file that contains one or more style rules that define a background image, add a comment defining an image sprite, e.g. 

/** sprite: mysprite; sprite-image: url('../images/mysprite.png'); sprite-layout: vertical */

You can choose whatever name you want for the sprite and its file name. The sprite name (@mysprite@ in this example) is used as a key to link individual CSS classes with a sprite file since you can declare multiple sprite files per CSS file (although this shouldn't be necessary) or even split CSS files and refer to one sprite image from all of them.

Then you can instruct SmartSprites to merge some or all of the individual images into the sprite and replace the CSS with a reference to the sub-image within the sprite. Some changes are necessary though - you can't define the background attribute as a combined attribute. Instead you must split it into background-image, background-repeat, background-position, etc. So you would need to redefine

.menuButton a.home {
   background: url(../images/skin/house.png) center left no-repeat;
   …
}

as the equivalent but more verbose

.menuButton a.home {
   background-repeat: no-repeat;
   background-position: center left;
   background-image: url('../images/skin/house.png');
   …
}

and to include the image in the sprite you add a comment to the background-image attribute referencing the sprite file declared at the top (link the sprite-ref name to the declaration's sprite attribute, along with any extra attributes that are necessary for fine-tuning:

.menuButton a.home {
   background-repeat: no-repeat;
   background-position: center left;
   background-image: url('../images/skin/house.png'); /** sprite-ref: mysprite; sprite-margin-bottom: 5px; sprite-margin-top: 3px; */
   …
}

Images that repeat as backgrounds aren't good candidates for inclusion in sprites, so I didn't rework those but the remaining classes are as follows:

.menuButton a.list {
   background-repeat: no-repeat;
   background-position: center left;
   background-image: url('../images/skin/database_table.png'); /** sprite-ref: mysprite; sprite-margin-bottom: 5px; sprite-margin-top: 3px; */
}
.menuButton a.create {
   background-repeat: no-repeat;
   background-position: center left;
   background-image: url('../images/skin/database_add.png'); /** sprite-ref: mysprite; sprite-margin-bottom: 5px; sprite-margin-top: 3px; */
}
.message {
   background-repeat: no-repeat;
   background-position: 8px 50%;
   background-image: url('../images/skin/information.png'); /** sprite-ref: mysprite; sprite-margin-bottom: 4px; sprite-margin-top: 4px; sprite-margin-left: 8px; */
   background-color: #f3f8fc;
}
div.errors li {
   background-repeat: no-repeat;
   background-position: 8px 0%;
   background-image: url('../images/skin/exclamation.png'); /** sprite-ref: mysprite; sprite-margin-bottom: 8px; sprite-margin-left: 8px; */
}
th.asc a {
   background-image: url('../images/skin/sorted_asc.gif'); ** sprite-ref: mysprite; sprite-margin-bottom: 5px; sprite-margin-top: 3px; *
}
th.desc a {
   background-image: url('../images/skin/sorted_desc.gif'); ** sprite-ref: mysprite; sprite-margin-bottom: 5px; sprite-margin-top: 3px; *
}
.buttons input.delete {
   background-color: transparent;
   background-repeat: no-repeat;
   background-position: 5px 50%;
   background-image: url('../images/skin/database_delete.png'); /** sprite-ref: mysprite; sprite-margin-bottom: 6px; sprite-margin-top: 2px; sprite-margin-left: 5px; */
}
.buttons input.edit {
   background-color: transparent;
   background-repeat: no-repeat;
   background-position: 5px 50%;
   background-image: url('../images/skin/database_edit.png'); /** sprite-ref: mysprite; sprite-margin-bottom: 6px; sprite-margin-top: 2px; sprite-margin-left: 5px; */
}
.buttons input.save {
   background-color: transparent;
   background-repeat: no-repeat;
   background-position: 5px 50%;
   background-image: url('../images/skin/database_save.png'); /** sprite-ref: mysprite; sprite-margin-bottom: 6px; sprite-margin-top: 2px; sprite-margin-left: 5px; */
}