Category: Tutorials

Tutorials showing you how to do things – my way!

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]


How To: Installing Node.js and npm on a Raspberry Pi 3

In this post we will review how to install Node.js and npm on a Rasbperry Pi 3 running a fresh installation of Raspbian Stretch Lite. The version of node I’ll be installing is 8, however if you need to install a different version you can still use these instructions. Let’s get started!

This is essentially a three part process. First we remove any installation or packages that may have come preinstalled with Raspbian. Next, we’ll run a bash script provided by NodeSource which updates our repository so we can do a simple apt install. And lastly we’ll use apt to install Node.js. [continue reading]


Footer Reveal on Scroll

I recently came across this neat way to present footers while browsing around and decided to try and replicate it. It works by setting position: fixed; and z-index: -1; on our <footer> tag, and on our last article we add a large margin-bottom to reveal the content beneath. It’s very easy to implement if your footer has a static height, and of course works for multiple breakpoints via @media queries.

Here is a quick codepen, and you can pull the source code here.


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]