Fixed stylesheet expectations

twolfson · Mar 19, 2016 · 68b104c · 68b104c
1 parent cb32e88
commit 68b104c
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
   },
   "dependencies": {
     "async": "~1.5.0",
-    "spritesheet-templates": "~10.1.0",
+    "spritesheet-templates": "~10.1.1",
     "spritesmith": "~3.1.0",
     "underscore": "~1.4.2",
     "url2": "1.0.0"

diff --git a/src-test/expected_files/sprite_positions.basic.styl b/src-test/expected_files/sprite_positions.basic.styl
@@ -61,13 +61,20 @@ The provided mixins are intended to be used with the array-like variables
   sprite($icon_email)
 }
 
-Here are example usages in HTML:
+Example usage in HTML:
 
 `display: block` sprite:
 <div class="icon-home"></div>
 
-`display: inline-block` sprite:
-<img class="icon-home" />
+To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
+
+// CSS
+.icon {
+  display: inline-block;
+}
+
+// HTML
+<i class="icon icon-home"></i>
 */
 spriteWidth($sprite) {
   width: $sprite[4];

diff --git a/src-test/expected_files/sprite_positions.cssOpts.css b/src-test/expected_files/sprite_positions.cssOpts.css
@@ -1,13 +1,20 @@
 /*
 Icon classes can be used entirely standalone. They are named after their original file names.
 
-```html
-<!-- `display: block` sprite -->
+Example usage in HTML:
+
+`display: block` sprite:
 <div class="icon-home"></div>
 
-<!-- `display: inline-block` sprite -->
-<img class="icon-home" />
-```
+To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
+
+// CSS
+.icon {
+  display: inline-block;
+}
+
+// HTML
+<i class="icon icon-home"></i>
 */
 #container .sprite1 {
   background-image: url(sprite.cssOpts.png);

diff --git a/src-test/expected_files/sprite_positions.cssVarMap.styl b/src-test/expected_files/sprite_positions.cssVarMap.styl
@@ -61,13 +61,20 @@ The provided mixins are intended to be used with the array-like variables
   sprite($icon_email)
 }
 
-Here are example usages in HTML:
+Example usage in HTML:
 
 `display: block` sprite:
 <div class="icon-home"></div>
 
-`display: inline-block` sprite:
-<img class="icon-home" />
+To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
+
+// CSS
+.icon {
+  display: inline-block;
+}
+
+// HTML
+<i class="icon icon-home"></i>
 */
 spriteWidth($sprite) {
   width: $sprite[4];

diff --git a/src-test/expected_files/sprite_positions.retina.styl b/src-test/expected_files/sprite_positions.retina.styl
@@ -112,13 +112,20 @@ The provided mixins are intended to be used with the array-like variables
   sprite($icon_email)
 }
 
-Here are example usages in HTML:
+Example usage in HTML:
 
 `display: block` sprite:
 <div class="icon-home"></div>
 
-`display: inline-block` sprite:
-<img class="icon-home" />
+To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
+
+// CSS
+.icon {
+  display: inline-block;
+}
+
+// HTML
+<i class="icon icon-home"></i>
 */
 spriteWidth($sprite) {
   width: $sprite[4];

diff --git a/src-test/expected_files/sprite_positions.retinaMapped.styl b/src-test/expected_files/sprite_positions.retinaMapped.styl
@@ -112,13 +112,20 @@ The provided mixins are intended to be used with the array-like variables
   sprite($icon_email)
 }
 
-Here are example usages in HTML:
+Example usage in HTML:
 
 `display: block` sprite:
 <div class="icon-home"></div>
 
-`display: inline-block` sprite:
-<img class="icon-home" />
+To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
+
+// CSS
+.icon {
+  display: inline-block;
+}
+
+// HTML
+<i class="icon icon-home"></i>
 */
 spriteWidth($sprite) {
   width: $sprite[4];