Intro

Recently I had a chance to build a Spotify App. I had a great time and learned a lot. I just wish they had some code for their patterns they ask for and I am sure you feel the same way. For an example in the UI guidelines they talk about using a "standardized track listings", but don't really tell you how to do it. So I decided to create my own pattern library for Spotify Apps. I may be off on color, sizes, etc, but I am only going off of what they currently have. Remember this is only a starting point.

Each tab on the left will guide you to the appropriate examples. Oh yeah, you can also live edit if you would like.

I have started a discussion on community.spotify.com.

Resources

Questions

Where did you get the images? Did you make them yourself?

No, I remembered that I could just take it from the app itself. I am not going to provide those files as I am sure they will update when the app does, but I will show you how to get them.

These instructions are only for iOS users.

Open a "Finder" window
Navigate to your "Applications" folder
Right click on "Spotify.app"
Select "Show Package Contents"
Open the "Contents" folder
Open the "Resources" folder
Sound the trumpets, you have all the assets you need

Can I contribute to this Pattern Library?

As of now you can. I have put it up on GitHub.

Why do you have only Firefox and Webkit browser prefix in the CSS?

First, I have to explain that Spotify Apps only use the webkit rendering engine. So why the Firefox prefix? I perfer to do most of my development in Firefox, that's why.

Is the code responsive, meaning will it work with any width?

Of course it is. You can never know a browser's width, let alone the width of you Spotify app.

How long did this take you so far?

7 hours 32 minutes.

I love/hate this and I am from Spotify, can ...

I contact you? Of course, please email me at kennedysgarage@gmail.com
you take it down? Sure. I did't mean to cause any harm. Please don't sue me.