Skip to content

Instantly share code, notes, and snippets.

@niklas
Last active August 29, 2015 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save niklas/8937584 to your computer and use it in GitHub Desktop.
Save niklas/8937584 to your computer and use it in GitHub Desktop.
compass CSS-Sprites alternatives
CSS-Sprites alternatives
https://github.com/flyerhzm/css_sprite
* minimagick!
* dirty code
* hard to customize until refactored
https://github.com/railsjedi/sprite
* uses rmagick
* looks extreme configurable
* based on css_sprite, refactored
* no framework integration
* clean code
* sass: yes
=>
- depends on ruby_code_source (fixed)
+ refactored, but may still need work
- specs are not extensive, barely enough
- whitespace hell, doc copypasta
+! but has compass-compatible sass-extension
- image generation smelly (big method, untested, hard to extend with extra offsets)
MAYBE. with work
https://github.com/Rabsztok/dynamic-sprites
* uses rmagick
* only CLI
* sass: yes
* no tests
=>
-+ uses Magick:ImageList#montage (almost fast)
- tests? yeah, but very minimal (test-unit)
- no customization of output at all
NOPE
https://github.com/jakesgordon/sprite-factory
* ANY image library
* sass: yes
* asset pipeline
* highly customizable
* code?
* minimagick?
=>
+- more a toolset
+ custom layout strategies possible (offsets)
+ nice code (half depinj)
- output shitty
- no sass integration
- output not extendable without refactoring a bit first
+ easy to add mini_magick support
- "Images" are just stupid hashes (easy to improve)
+ tests
- test-unit
+ but well written
MAYBE with work on output,sass integration,config file
Needed Sprite helpers:
* sprite-map glob->map
* @sprite map, sprite -> dimensions, position
* sprite-position map, sprite -> position
* sprite-url url to map
* sprite-file relative path
* image-width/image-height
* ruby-based helpers
Needed options:
* spacing/margin around sprite
* specific spacing for each sprite
* ? deterministic order
------
vorher:
$my_sprite = sprite-map 'sprite/my/*.png'
position: sprite-position($my_sprite, logo)
VVVVVVVVVVVV
nacher (maybe):
@include my-sprite-position(logo)
@include my-sprite-width(logo)
@include page-default-sprite-position(logo, -2px)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment