new sprite tutorials

doc-src/content/help/tutorials/spriting/customization-options.markdown

@@ -0,0 +1,45 @@
+---
+title: Sprite Customization
+layout: tutorial
+crumb: Customization
+classnames:
+  - tutorial
+---
+#Sprite Tutorial
+<%= sprite_tutorial_links %>
+## Customization Options
+
+### Options per Sprite Map
+
+When constructing the sprite map, the entire sprite map and it's associated stylesheet
+can be configured in the following ways. Each option is specified by setting a [configuration
+variable](/help/tutorials/configurable-variables/) before importing the sprite. The variables
+are named according to the name of the folder containing the sprites. In the examples below
+the sprites were contained within a folder called `icon`.
+
+* `$<map>-spacing` -- The amount of transparent space, in pixels, around each sprite.
+  Defaults to `0px`. E.g. `$icon-spacing: 20px`.
+* `$<map>-repeat` -- Wether or not each sprite should repeat along the x axis. Defaults
+  to `no-repeat`. E.g. `$icon-repeat: repeat-x`.
+* `$<map>-position` -- The position of the sprite in the sprite map along the x-axis. Can
+  be specified in pixels or percentage of the sprite map's width. `100%` would cause the
+  sprite to be on the right-hand side of the sprite map. Defaults to `0px`.
+  E.g. `$icon-position: 100%`.
+* `$<map>-sprite-dimensions` -- Whether or not the dimensions of the sprite should be
+  included in each sprite's CSS output. Can be `true` or `false`. Defaults to `false`.
+* `$<map>-sprite-base-class` -- The base class for these sprites. Defaults to `.<map>-sprite`.
+  E.g. `$icon-sprite-base-class: ".action-icon"`
+* `$<map>-clean-up` -- Whether or not to removed the old sprite file when a new one is created. Defaults to true
+
+### Options per Sprite
+
+When constructing the sprite map, each sprite can be configured in the following ways:
+
+* `$<map>-<sprite>-spacing` -- The amount of transparent space, in pixels, around the sprite. Defaults
+  to the sprite map's spacing which defaults to `0px`. E.g. `$icon-new-spacing: 20px`.
+* `$<map>-<sprite>-repeat` -- Wether or not the sprite should repeat along the x axis. Defaults
+  to the sprite map's repeat which defaults to `no-repeat`. E.g. `$icon-new-repeat: repeat-x`.
+* `$<map>-<sprite>-position` -- The position of the sprite in the sprite map along the x-axis. Can
+  be specified in pixels or percentage of the sprite map's width. `100%` would cause the
+  sprite to be on the right-hand side of the sprite map. Defaults to the sprite map's
+  position value which defaults to `0px`. E.g. `$icon-new-position: 100%`.

doc-src/content/help/tutorials/spriting/magic-selectors.markdown

@@ -0,0 +1,74 @@
+---
+title: Sprite Magic Selectors
+layout: tutorial
+crumb: Magic Selectors
+classnames:
+  - tutorial
+---
+#Sprite Tutorial
+<%= sprite_tutorial_links %>
+
+## Magic Selectors
+
+If you want to add selectors for your sprites, it's easy todo by adding `_active` `_target` or `_hover` to the file name, In the example below we have a sprite directory that looks like:
+
+* `selectors/ten-by-ten.png`
+* `selectors/ten-by-ten_hover.png`
+* `selectors/ten-by-ten_active.png`
+* `selectors/ten-by-ten_target.png`
+    
+Now in our sass file we add:
+
+    @import "selectors/*.png";
+    
+    a {
+      @include selectors-sprite(ten-by-ten)
+    }
+    
+And your stylesheet will compile to:
+
+    .selectors-sprite, a {
+      background: url('/selectors-sedfef809e2.png') no-repeat;
+    }
+
+    a {
+      background-position: 0 0;
+    }
+    a:hover, a.ten-by-ten_hover, a.ten-by-ten-hover {
+      background-position: 0 -20px;
+    }
+    a:target, a.ten-by-ten_target, a.ten-by-ten-target {
+      background-position: 0 -30px;
+    }
+    a:active, a.ten-by-ten_active, a.ten-by-ten-active {
+      background-position: 0 -10px;
+    }
+
+Alternatively you can use the `@include all-selectors-sprites;` after the import and get the following output:
+
+    .selectors-sprite, .selectors-ten-by-ten {
+      background: url('/selectors-sedfef809e2.png') no-repeat;
+    }
+
+    .selectors-ten-by-ten {
+      background-position: 0 0;
+    }
+    .selectors-ten-by-ten:hover, .selectors-ten-by-ten.ten-by-ten_hover, .selectors-ten-by-ten.ten-by-ten-hover {
+      background-position: 0 -20px;
+    }
+    .selectors-ten-by-ten:target, .selectors-ten-by-ten.ten-by-ten_target, .selectors-ten-by-ten.ten-by-ten-target {
+      background-position: 0 -30px;
+    }
+    .selectors-ten-by-ten:active, .selectors-ten-by-ten.ten-by-ten_active, .selectors-ten-by-ten.ten-by-ten-active {
+      background-position: 0 -10px;
+    }
+    
+## Disabling
+  To disable this feature set `$disable-magic-sprite-selectors` to false before calling the sprite mixin
+  
+    a {
+      $disable-magic-sprite-selectors:false;
+      @include selectors-sprite(ten-by-ten)
+    }
+  
+

doc-src/content/help/tutorials/spriting/sprite-layouts.markdown

@@ -5,7 +5,18 @@ crumb: Sprite layouts
 classnames:
   - tutorial
 ---
-# Sprite layouts
+# Sprite Tutorial
+<%= sprite_tutorial_links %>
+
+## Sprite Layouts
+
+Example:
+
+    $icon-layout:horizontal;
+    @import "icon/*.png";
+    
+    $dropcap-layout:diagonal
+    @import "dropcap/*.png";
 
 ## Vertical
 

doc-src/lib/default.rb

@@ -1,6 +1,7 @@
 # All files in the 'lib' directory will be loaded
 # before nanoc starts compiling.
-
+require 'erb'
+require 'active_support/inflector'
 include Nanoc3::Helpers::LinkTo
 include Nanoc3::Helpers::Capturing
 include Nanoc3::Helpers::Rendering
@@ -136,4 +137,17 @@ end
 def long_compass_version
   require 'compass/commands'
   Compass::Commands::PrintVersion.long_output_string
-end
+end
+
+
+def sprite_tutorial_links(index=false)
+  string = <<-ERB
+<% unless  index %>
+  * [Sprite Tutorial Index](/help/tutorials/spriting/)
+<% end  %>
+<% Dir["./content/help/tutorials/spriting/**/*.markdown"].sort.each  do |file| %>
+  * [<%= File.basename(file, '.markdown').gsub('-', ' ').titleize %>](/help/tutorials/spriting/<%= File.basename(file, '.markdown') %>)
+<% end  %>
+  ERB
+  ::ERB.new(string).result(binding)
+end