Tag: css

How To: Setting up Compass with SCSS in PhpStorm

PhpStorm includes a very useful feature called File Watchers which if you’re already working with Compass should sound very familiar. From the documentation, File Watchers is defined as “..a PhpStorm system that tracks changes to your files and runs a third-party standalone application.” So basically whenever a watcher is running it will execute a program when there are changes made. This makes using Compass more straight forward since you no longer need to open a terminal/command prompt, navigate to your project, and run Compass. Or in case you forget to compile and can’t figure out why your changes aren’t appearing (we’ve all done it, I won’t judge.) [continue reading]


CSS Sprites

What is a Sprite Sheet?

Put simply, a sprite sheet is an image file composed of smaller individual graphics. These graphics can be various states of a UI element, individual frames of an animation, or even various design elements that appear commonly throughout a site’s design. This practice is definitely not new – it’s been done since the early days of video games, however since being introduced to the world of web design they’ve generally been considered as good practice. There’s a lot of debate about whether or not using sprites are actually beneficial, but as with most techniques there is always a time and a place to use them. Before we get into the pros & cons let’s first review how to implement a sprite.

Adding Sprites To Your Site

Sprites are fairly straight forward to implement, it just takes a little time creating your sprite sheet and defining the CSS rules that will best suit your needs. They can be applied to various HTML elements such as lists (both ordered & unordered), divs, spans, anchor tags, and so on. As I mentioned above one way they can be used are for hover states, which is the example we’ll be exploring. Here we have a version of the sprite map used on this site which includes two states – default and hover.

social media sprite from battlehillmedia.com

Various elements of a sprite sheet

Organization is very important when creating a sprite sheet. If you use a systematic grid approach to laying out your elements it will make calculating your background-position values a bit easier later on, especially if all your elements are the same exact size as with the example above.

CSS
.sprite {
    background-image:url('social.png');
    background-repeat: no-repeat;
    display:block;
    width:64px;
    height:64px;
}

.facebook { background-position: 0px 0px; }
.facebook:hover, .facebook:active { background-position: -64px 0px; }

.twitter { background-position: 0px -64px; }
.twitter:hover, .twitter:active { background-position: -64px -64px; }

.instagram { background-position: 0px -128px; }
.instagram:hover, .instagram:active { background-position: -64px -128px; }

[continue reading]