Close

Copyright © RebelMouse 2019

Follow Us:

Generating Spritesheets

If you are not familiar with spritesheets, please read this article first http://www.w3schools.com/css/css_image_sprites.asp.


How it Works

RebelMouse provides you with tools to create spritesheet files automatically using your individual icons. The tool will create spritesheet files in both retina and non-retina formats, as well as their respective CSS markup.

To generate spritesheets for your projects use

roar-generate_sprites

The image folder is located in static/img/whitelabel/. All images should be located here.

A spritesheet is created for each group of files under each folder of the sprites folder.

Take as an example this set of folders:

static/img/whitelabel/sprites/logos/static/img/whitelabel/sprites/ui/

2 spritesheet files will be created for folders ui and logos automatically by using the roar-generate_sprites command.

Spritesheets will be located here:

static/img/whitelabel/spritesheets/logos@2x.pngstatic/img/whitelabel/spritesheets/logos.pngstatic/img/whitelabel/spritesheets/ui@2x.pngstatic/img/whitelabel/spritesheets/ui.png

Stylesheets will be located here:

static/css/roar/spritesheets/logos.cssstatic/css/roar/spritesheets/ui.css

Step by Step

Create a folder called sprites, under static/img/whitelabel/, if it's not already created.

Create a folder for each new spritesheet you need, under sprites folder.

Put all the .png files you need into created folder. Note: images should be retina size, meaning 2x of their normal size.

Run the command roar-generate_sprites.

Import the generated CSS into your project's critical.css file, if it is not there yet.


Using the Spritesheets

Beside the spritesheet .png file, a .css file is generated as well. It contains CSS classes for all images which also handle retina displays which means you don't have to worry about high quality displays. Simply add the class to the element you want the image to show in.

For example, if your image file is located:

static/img/whitelabel/sprites/ui/yourfile.png

Then the class will be:

.sprites-ui-yourfile

RebelMouse CEO: Reimagining Diversity “Starts in the Office”

Why women, minorities, and the LGBTQ+ community will restructure workplace norms

Entering a new decade means a new opportunity to change how we approach diversity. In a joint interview alongside Leanne Pittsford of Lesbians Who Tech, RebelMouse founder and CEO Andrea Breanna said that the only way to fight patriarchal dominance is to encourage and nurture more women, minorities, and members of the LGBTQ+ community in the workplace, particularly in tech.

Over half of RebelMouse's employees are women or identify as LGBTQ. Read our full diversity and inclusion report here.

Check out the full video below.

Related Articles

Publishers No Longer Have to Submit Their Site to Google News

Google's Publisher Center creates new opportunities for audience growth

Just before the start of the next decade, Google announced an important change to its Google News offering with the launch of Google Publisher Center. The new interface merges Google News Producer and Google News Publisher into one to streamline the partnership process for publishers.

Overall, the change should make it easier for publishers to manage their Google News settings, including updating themes, directing URLs to section pages, and configuring user permissions. Read the full list of features here.

Keep reading...

How to Find Work-Life Balance as a Remote Employee

Tips from our CEO on making the most of an office-free lifestyle

Working from home is becoming increasingly popular, with an estimated 66% of companies now allowing remote work and 16% operating completely office-free. RebelMouse is one of those fully remote companies, and over the years we've mastered how to stay close to each other despite being spread across more than a dozen countries. We believe working remotely is good for both our personal lives and our productivity. Read more about this here.

Still, working free from the shackles of an office environment doesn't mean every day is a dance party in your pajamas from 9 to 5. Working from home comes with its own set of challenges just like any other job.

Keep reading...
Subscribe to Our Newsletter