Getting Flexy

At GitHub I get the opportunity to work on a lot of internal tools and apps. What this means is I get to design and build things for some of the smartest developer and designer folk in the world. And I get to eleviate some of the headache that having a bajillion internal tools can cause.

Right now I'm working on our internal app store we call Speakeasy. It's one of the first internal apps new hires see and the goal is to make grabbing the things these super excellent human beings require as simple and beautiful as possible.

Since most people open this from their phone for the very first time we took something that was more web-heavy and are working on turning it into something that's just as easy to use from any mobile device hence GETTING FLEXY.

Twitter Bootstrap has some excellent media query css structures for doing this. From which I learned how to hide and show specific elements based purely on a device's screen width.

I also used some super awesome CSS3 effects like multiple gradient backgrounds, multiple text-shadows, and webkit's mask image feature (which is pretty experimental). I'm also writing this in HTML5 because it's an internal app, which basically means I get to say 'fuck you' to every legacy browser out there.

One other thing worth mentioning is that the icons are a part of the font from the rad guys at Oak Studios, called Symbolset. The CSS uses class selectors to fire pseudo elements with the font embedded in the content attribute. Turns out Dan Eden was wrong. You can totally image mask a gradient on top of a pseudo-element as long as you're using the parent class to draw the mask. GO NUTS.

Super excited to ship this to my scros this week and to hopefully give you guys a better look at the app's new views/screens.