Nathan's Blog

Web development and useful information

Responsive utility classes

Utility classes serve a single purpose.
Examples of utility classes: .align-left, .float-left, .clearfix
Responsive utility classes allow you to create very flexible responsive websites.

This post is about what makes a great responsive utility class.

I’ll talk about: naming and a useful pattern.

For a good introduction to utility classes I suggest David Clark’s excellent article here.

Naming

I don’t like namespaced or aliased utility classes.
I don’t like them because they are harder to think about.

An example of a bad utility class is: .u-mt-10@md

Why is this bad?
You must know that .u is a convention for utility classes.
You must know that mt refers to margin-top.
You must know that @md means this utility class targets “Medium” sized devices.

What’s an alternative?

Utility classes should use CSS property names and values: .margin-top-10-xs

It is clear that this utility class adds 10 pixels of top margin.
Users familiar with Bootstrap’s grid system may guess that this targets “Extra small” viewports and greater.

Pattern: Inclusives and Exclusives

Two types of responsive utility classes are needed when building layouts: inclusives and exclusives.

  1. Inclusive: You need a utility class to target a specific device size and everything greater than it (most common)
  2. Exclusive: You need a utility class to only target a specific device size

Separate responsive utility classes into two categories: inclusives and exclusives.

A simple naming convention in your utility class tells you how it will behave.

Inclusives

Inclusive classes include the named device size and device sizes greater than itself.

When you use Bootstrap’s responsive grid you only have to define an element as .col-xs-12 and you get 12 columns on mobiles, tablets and desktops.

Noticing that this simple pattern results in less classes showed me that by default all responsive utility classes should behave this way.

Responsive utility classes are inclusives by default.

Every utility class that uses the convention of .property-value-deviceSize is an inclusive class.

You may have noticed our utility classes follow a different convention to Bootstrap’s columns.

Bootstrap uses: .property-deviceSize-value
We use: .property-value-deviceSize

This was intentional because it’s easier to think about.

When creating an element I know I want to apply 10 pixels of top margin to an element. The targeted device is a detail.

In my head I’ll say “margin top 10 on mobiles and greater”, not “margin top on mobiles and greater, of 10 pixels”.

How inclusives look in code

/* Inclusives */

// Mobile and >
.margin-top-10-xs {
    margin-top: 10px;
}
// Tablet and >
@media screen and (min-width: $screen-sm-min) {
    .margin-top-10-sm {
        margin-top: 10px;
    }
}
// Desktop and >
@media screen and (min-width: $screen-md-min) {
    .margin-top-10-md {
        margin-top: 10px;
    }
}

Exclusives

Exclusives target the named device size only.

They follow this convention: .property-value-only-deviceSize
A margin top of 10 pixels applied to only mobiles looks like: .margin-top-10-only-xs

How exclusives look in code.

/* Exclusives */

// Mobile - max-width used
@media screen and (max-width: $screen-xs-max) {
    .margin-top-10-only-xs {
         margin-top: 10px;
     }
}
// Tablet
@media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    .margin-top-10-only-sm {
        margin-top: 10px;
    }
}
// Desktop
@media screen and (min-width: $screen-md-min) {
    .margin-top-10-only-md {
        margin-top: 10px;
    }
}

Distinguishing between inclusive and exclusive classes leads to incredibly flexible responsive utility classes.

Structural responsive utility classes

Copy this pattern for other structural properties.

Responsive utility classes are almost always used on structural CSS.

– Margin
– Padding
Line breaks

Utility classes should be imported last

Adding utility classes last helps you avoid specificity issues.
Using Sass or Less simply import your utility classes last.
By including our utilities last, I’ve not had to use !important yet.

@import base/reset.scss;
@import layout/layout.scss
@import module/headers.scss;
@import page/homepage.scss;
@import utilities/utilities.scss;

tl;dr

By naming our responsive utility classes with valid CSS property names and values we have created clear, easy to use utility classes that don’t require education – if you are familiar with CSS properties already.

By breaking responsive utility classes into inclusives and exclusives by -xs being inclusives and -only-xs being exclusives, our responsive utility classes are very flexible.

Music of 2015

Here’s a list of my favourite songs and albums in 2015, with a streamable Spotify playlist for both.

Play in Spotify
Top 50 songs of 2015 – 3 hr 18 min

Play in Spotify
Best albums 2015 – 5 hr 45 min

Songs

My top 50 songs in 2015.

It’s mostly female sung electronic pop, not-boring drum & basselectronic and a pinch of alternative.
1, 2, 5, 12, 44, 50 are from the PC music genre which a friend introduced me to, and I can’t get enough of.

Play in Spotify – 3 hr 18 min

  1. A. G. Cook — Beautiful
  2. Hannah DiAmond — Attachment
  3. Spor — Strange Heart
  4. Grimes — Flesh Without Blood
  5. QT — Hey QT
  6. Null — Dhash
  7. Phace — Empty Talk
  8. Nils Frahm — Says
  9. Null — Oil Run
  10. Spor — Always Right Never Left
  11. Null — Back 2 Normal, Almost
  12. A. G. Cook — Keri Baby feat. Hannah Diamond
  13. Grimes — REALiTi
  14. Spor — Like Clockwork
  15. Cradle of Filth — Coffin Fodder
    The lead guitar melody starting at 0:23!
  16. Calvin Harris — Faith
  17. Grimes — World Princess Part II
  18. Noisia – Reptilians
  19. Hit The Switch — Aphasia
  20. Grimes — Kill v. Maim
  21. Alexandra Stan — Mr. Saxobeat (Radio Edit)
  22. Wavves — Nine Is God
  23. Skrillex & Diplo — To Ü (feat. AlunaGeorge)
  24. Fetty Wap – Trap Queen
  25. Lo-Fi-Fnk — Pirate Radio
  26. Ferry Corsten — Hyper Love (Summer 15 Radio Edit)
  27. Null — Luv U, Luv Me
  28. Ferry Corsten — Find a Way (Radio Edit)
  29. Ferry Corsten — Angel Dust (Radio Edit)
  30. Spor — As I Need You
  31. Ad Inferna — A.I. DOMINION
  32. Everything Everything – Spring / Sun / Winter / Dread
  33. Ferry Corsten — Reborn (Radio Edit)
  34. Ferry Corsten — Back To Paradise (Ferry Fix)
  35. Grimes — Belly of the Beat
  36. Calvin Harris — Blame feat. John Newman
  37. Skrillex & Diplo — Beats Knockin (feat. Fly Boi Keno)
  38. Spor — Arms House
  39. Silverstein — Face of the Earth
  40. Mute — Bates Motel
  41. Lethal Bizzle — The Drop (feat. Cherri Voncelle)
  42. Skrillex & Diplo — Jungle Bae (feat. Bunji Garlin)
  43. Major Lazer — Roll the Bass
  44. Hannah DiAmond — Every Night
  45. Weezer — Everybody Needs Salvation
  46. Calvin Harris — Under Control w/ Alesso Feat. Hurts
  47. Everything Everything – Get to Heaven
  48. Phace – My Mind is Modular
  49. Null – Ronde Interstellaire
  50. Danny L Harle – Forever

Albums

Seven of my most loved albums/EP/LPs in 2015.

Play in SpotifyAll albums – 5 hr 45 min

Spor – Caligo

Released: February 19, 2015

Spor - Caligo

An excellently produced, diverse album that I could not stop listening to. It was released on BitTorrent too. The soundtrack to the first half of my 2015.

Website: http://sottovoce.co/spor/
Soundcloud: https://soundcloud.com/spor
Spotify: https://open.spotify.com/album/1f24d62eDAWJCjzOO0nX7T
Twitter: https://twitter.com/spor
Tickets: http://sottovoce.co/spor/
Buy album: here

Null – Almost

Released: 2 March 2015

Null - Almost

This was my favourite find of 2015!
From Melbourne, Australia.
Intelligent electronic with some ’90s techno and house sounds in there.
I also enjoyed this Hardcore/Rave mix by him.
He has one of the best artist websites I’ve seen. A rich multimedia experience where the visuals perfectly complement the music. Felt like I was experiencing the visual half of the EP.

Website: http://www.nullelectronics.com
Soundcloud: https://soundcloud.com/null_electronics
Spotify: https://open.spotify.com/album/2Q2MU66DuRojbHJhHDbDQv
Twitter: https://twitter.com/nullelectronics
Tickets: https://www.facebook.com/NullElectronics/events <-- if there's a better link, comment and I'll update. Buy album: https://nullelectronics.bandcamp.com/album/almost

Grimes – Art Angels

Released: November 6, 2015

Grimes - Art Angels

After listening to the first three tracks I was so excited, I looked for and bought tickets to her March 2016 show in London.
This is masterful pop. Creative genius shit.

Website: http://www.grimesmusic.com
Soundcloud: https://soundcloud.com/actuallygrimes
Spotify: https://open.spotify.com/album/5hB4jVN4ZHpubyiMmW81K1
Twitter: https://twitter.com/Grimezsz
Instagram: https://www.instagram.com/actuallygrimes
Tickets: http://www.grimesmusic.com/tour-dates
Buy album: iTunes | Google Play | Amazon

Noisia – Incessant EP

Released: April 20, 2015

Noisia - Incessant EP

First heard in this Lifted Podcast episode.
The EP is excellent, interesting drum & bass.
The samples in the track, “Reptilians” are hilarious.

Website: https://www.noisia.nl
Soundcloud: https://soundcloud.com/noisia
Spotify: https://open.spotify.com/album/4qsnrwQbI6qXo8VmK3Najp
Twitter: https://twitter.com/Noisia_nl
Tickets: https://www.noisia.nl/shows
Buy album: https://www.noisia.nl/store/release/noisia-incessant-ep-mp3

Ferry Corsten – Hello World EP 2

Released: July 13 2015

Ferry Corsten - Hello World EP 2

A solid trance release that never gets boring thanks to the changing nature of each song.
There’s a Carl Sagan sample sample in the opening track too: “Reborn”.

Website: http://www.ferrycorsten.com
Soundcloud: https://soundcloud.com/ferry-corsten
Spotify: https://open.spotify.com/album/111VLPdvJnxwC2V4aVcVUi
Twitter: https://twitter.com/FerryCorsten
Tickets: http://www.ferrycorsten.com/tour
Buy album: Beatport | iTunes | Google Play

Skrillex & Diplo – Skrillex and Diplo Present Jack Ü

Released: 27 February 2015

Skrillex & Diplo — Skrillex and Diplo Present Jack Ü Cover

Walking through Leicester Square after work one day I heard, “To Ü (feat. AlunaGeorge)” played on a loud speaker by some male dancers. What is this song? This is great. I Soundhounded it I found that it was by Jack Ü.
This album is a lot of fun. If I was a party person, I’d play this album at my party.

Website: http://jackuofficial.com
Soundcloud: https://soundcloud.com/jacku
Buy album: http://jackustuff.com/collections/music/products/skrillex-and-diplo-present-jack-u-vinyl

Phace – Shape the Random LP

Released: 16th March 2015

Phace - Shape the Random cover

Found this album from a friend’s recommendation. Is there anyone else who sounds similar to Noisia I asked?
This album is incredibly stimulating.
I enjoy listening to this while coding.

Website: http://phace.space
Soundcloud: http://soundcloud.com/phace
Spotify: https://open.spotify.com/album/3mVW59ULmDzbDzQPtwnTHo
Twitter: https://twitter.com/phace_
Tickets: http://neosignal.de/about/phace
Buy album: Bandcamp | Neosignal Recordings Store | Beatport | iTunes

Easy DNS switching on OS X

I’m currently using my Raspberry Pi B+ as an ad-blocker. It works great.

Install Ad-blocker on your Raspberry Pi

If you have an up-to-date Raspberry Pi running Raspbian, you can install this by running a single command, here: http://jacobsalmela.com/instant-raspberry-pi-ad-blocker/

Make sure you assign a static IP to your Raspberry Pi: http://www.modmypi.com/blog/tutorial-how-to-give-your-raspberry-pi-a-static-ip-address

By default your Pi will be assigned a dynamic IP by your router. Assigning a static IP means you can connect using the same IP address every time, and setup easy DNS switching below.

Point your DNS server to your Raspberry Pi

To use your new Ad-blocker, set your DNS server to the static IP of your Raspberry Pi.
In this example I’m using OS X.
Changing your DNS in OS X is done by opening System Preferences > Network > Advanced > DNS and setting the static IP here.

Set DNS server on OS X

Try it out

Your Raspberry Pi ad-blocker should now be working. You can test if it’s working by visiting this URL: http://ads-blocker.com/testing.
If you don’t see ads on the page, it’s working.

Disabling Ad-blocking

I ran into an issue using my Raspberry Pi ad-blocker where clicking sponsored Google Ads in search results does not redirect to the link.
I wondered if there was an easier way to switch back to my default DNS server in OS X, than manually changing it in System Preferences.

Enter OS X’s Automator. It comes with OS X.

Easy DNS switching on OS X using Automator

1. Open Automator

2. Choose the ‘Application’ type

Automator - Application Type

3. Type ‘Shell’ into the filter to find the ‘Run Shell Script’ action. Double-click it to open the action in the right hand pane.

Screenshot 2015-03-29 19.07.23

4. Copy and paste this shell script, replacing 192.168.0.69 with YOUR Raspberry Pi’s static IP:

#!/bin/bash
# Use the DNS server hosted on my Raspberry Pi
networksetup -setdnsservers Wi-Fi 192.168.0.69

Automator - Run Shell Script

Note: If you use an Ethernet cable instead, change Wi-Fi above to Built-in Ethernet. I can’t bring myself to buy the £25 Thunderbolt to Ethernet adapter so I use Wi-Fi.

If you connect another way, you can find a list of all the network services on the server’s hardware ports by typing:

networksetup -listallnetworkservices

Change Wi-Fi to the network service you use to connect to the Internet.

5. Save and choose a name for your app, something like ‘Block-ads.app’

6. By default, your app will have the Automator icon. If you’d like to change the icon that’s easily done. All you need is to find a 128×128 PNG.

Default automator icon

7. Using the excellent www.iconfinder.com makes this simple. I found a nice free Raspberry Pi 128×128 PNG icon – https://www.iconfinder.com/icons/386490/raspberry_icon#size=128

8. Download the PNG to your computer, open it in ‘Preview’ and copy the icon using ⌘C.

9. Right click your app’s icon and select ‘Get Info’. Click on the current Automator icon in the top left.

Change icon

10. Press ⌘V to change the icon to the icon in your clipboard

Screenshot 2015-03-29 18.33.38

You can now use this app to easily turn ad-blocking on.
It will prompt for your password when you run it.

11. To create your ‘Show ads’ app, repeat the above steps and change the DNS server to your default DNS server address.

For my ‘Show ads’ app I used this icon: https://www.iconfinder.com/icons/386450/apple_ios_icon#size=128

Icon Downloads

Download Raspberry Pi icon (block ads) – 128×128 PNG
Download Apple icon – (show ads) 128×128 PNG

Page 1 of 7

Powered by WordPress & Theme by Anders Norén