Q
Version: 0.12.2

Sprite Tutorial

Sprite Layouts

Example:

$icon-layout:horizontal;
@import "icon/*.png";

$dropcap-layout:diagonal
@import "dropcap/*.png";

Vertical

@import "mysprite/*.png";

Example Output:

Vertical Example

Horizontal

$mysprite-layout:horizontal;
@import "mysprite/*.png";

Example Output:

Horizontal Example

Notes:

  • Responds to the same configuration options that vertical has.

Diagonal

$mysprite-layout:diagonal;
@import "mysprite/*.png";

Example Output:

Diagonal Example

Notes:

  • Configuration options do not effect the layout
  • This is incredibly resource intensive on the browser

Smart

$mysprite-layout:smart;
@import "mysprite/*.png";

Example Output:

Smart Example

Notes:

  • Configuration options do not effect the layout
  • Most efficient use of browser memory

Example icons from Open Icon Library and are released under public domain