Take The Pain Away From Spriting!
What is it for?
Sprite-Up is perfect for lazy designers and front end developers.
Today’s websites require sophisticated multi-platform designs that have to look great in different resolutions. If you are trying to build a mobile-first website you have to consider CSS performance, screens resolutions and have retina ready icons. Everybody knows that hand made sprites take a while to create and to maintain, specially if you want to add or remove images to the sprite. And if you need retina-ready sprites the job takes twice of the time. We had this problem while building a mobile-web app so we came up with sprite-Up.
How does it work?
- Sprite-Up uses Compass and Sass.
- Just add the retina and non-retina icons to different folders.
- Add the mixin to your Sass partial.
- Wow! Sprite-Up will create the sprite and the CSS selectors.
- Now you can add them into your files and forget about the CSS, the background-position and everything else.
Installation
Option 1
Install Sprite-Up using Bower
bower install sprite-up
Option 2
Or, you can install Sprite-Up using Rails Assets (Only for Bundler >= 1.7.0):
Add the Rails Assets source and Sprite-Up gem to your Gemfile, like this:
source 'https://rails-assets.org' do
gem 'rails-assets-sprite-up'
end
And then run:
bundle install
Import Sprite-Up in your main scss/sass stylesheet:
@import "sprite-up/sprite-up";
Spriting
Build your sprites
Folder organization is the key! Sprite-up creates the icon’s CSS selector by looking for your images in different folders (retina and non-retina). It will create a CSS selector for each image found respectively, as long as you’ve added it into the right folder.
We suggest you name your folders like non-retina and retina under app/assets/images/icons and app/assets/images/retina-icons respectively.
Important: take in consideration to divide the dimensions of retina icons by two for the non-retina ones. That is, if the retina icon is 32x32 then the non-retina icon must be 16x16. If you don’t follow this instruction your icons won’t look aligned.
Include the sprite-up mixin in your stylesheet (i.e _icons.sass partial or _images.sass partial)
+sprite-up("icons/*.png", "retina-icons/*.png")
We all know you’d probably need more than one sprite in your project. Worry not, you can generate as many sprites as you need as long as you have your images folders in separated directories.
+sprite-up("icons/*.png", "retina-icons/*.png")
+sprite-up("home-icons/*.png", "home-retina-icons/*.png", "home")
You are ready to go
Sprite files generated: /images/icons-<hash>.png and /images/retina-icons-<hash>.png
Need To See It?
Example Weather icons
Here we have our HTML example. Each selector has the prefix needed
<ul class='icons weather-icons'>
<li>
<i class='weather-icons-sun'></i>
Sun
</li>
<li>
<i class='weather-icons-sun-cloud'></i>
Sun-cloud
</li>
<li>
<i class='weather-icons-cloud'></i>
Cloud
</li>
<li>
<i class='weather-icons-fog-cloud'></i>
Fog-cloud
</li>
<li>
<i class='weather-icons-rain'></i>
Rain
</li>
<li>
<i class='weather-icons-storm'></i>
Storm
</li>
<li>
<i class='weather-icons-snow'></i>
Snow
</li>
<li>
<i class='weather-icons-moon'></i>
Moon
</li>
</ul>
And this is how it will look like