One Sass Color to Rule Them All

Have you ever gotten into the situation where you have a set of colors that are all quite similar, but you need each of them defined to create gradients, text shadows, borders, and the like? For example, look at the following buttons. There are 3 variations of the button and…

Using Nested Sass Maps for TypeSetting

If you've written much CSS then you've probably gotten into the situation where multiple styles are repeated throughout your project. Trying to make a global change in that environment can become VERY cumbersome to say the least. The above example defines a group of type settings over and over again…

Enhanced Google Chrome Emulation Tools

You are probably already aware that the current Chrome DevTools have a decent set of mobile emulation tools. Thankfully for us, the tools are getting even better! If you are using the Canary version of Chrome the emulation tools look much different than they do on the stable branch. When…

Recommended GitHub Atom Packages for Web Developers

I've been using GitHub's Atom editor for the past couple of weeks and I've really enjoyed it. At first there weren't very many extensions/packages available, but the community has been quick to fill in that gap. You can browse the packages online or from Atom's Preferences... (⌘,) Official Packages GitHub…

CSS Animated Hamburger Icon

Problem I've been working more on mobile web these days and thought it would be fun to animate the prolific hamburger nav icon. Non-Animated CSS Hamburger Icon You could use Font Awesome or an image to represent the hamburger, but those aren't necessary. Instead, you can create a version of…

AngleBrackets: April 13 - 16, 2014

The time is coming for the 3rd AngleBrackets conference. I've been honored to participate in the past 2 events and I look forward to the 3rd event in Orlando, FL. I'll be presenting 3 different sessions on front-end web development topics. Speakers Some of the other speakers that you might…