Motorcycons – An Icon Font for the Powersports Industry

A core concept of selling automotive, motorcycle and powersports parts online is fitment. Mapping parts to vehicles. While working in the powersports industry I found that icons provided a quick, universal way of conveying that association visually. However, it was a challenge to find quality sources for appropriate iconography. So I created Motorcycons. A free icon font set for other Moto-Feds (Motorcycle Front End Developers. #IJustMadeThatUp) to use in their projects. Continue reading Motorcycons – An Icon Font for the Powersports Industry

Batch – My Open Source Flexbox Grid System

Like many other Front-End Developers I’ve been using Bourbon and Neat in a lot of my projects recently. Bourbon’s mixin library and Neat’s float based grid are true time savers. However, as browser support for the flexbox layout mode increases we’re able to use it more confidently to solve age old CSS layout challenges.

I’ve found myself recreating piecemeal flexbox grids on several projects so I decided to publish a customizable, reusable library. Introducing Batch! A simple, responsive, flexbox grid system.
Continue reading Batch – My Open Source Flexbox Grid System

SVG Illustration Animation Experiment

My favorite toy as a child was the Fisher-Price motorcycle model number 356. I was obsessed with pushing it all around the house. Over curves of furniture and folds in blankets. I’ve had it sitting on the window sill above my computer for years so when I decided to create an animation demo it was the perfect subject matter. My self-assigned task was to create a vector illustration that’s broken into elements to be displayed on a responsive web page as SVGs and animated with CSS using jQuery.

Continue reading SVG Illustration Animation Experiment

Automating a Sass Color Palette Reference Page

Sass variables are great for defining colors in large projects. By following the common pattern of including them in a “_variables.scss” partial it makes it easier for developers to manage. It’s also helpful to include an index page for displaying the color names and values as a reference for the team and the client.

  • Red : #c50000
  • Blue : #005dc5
  • Green : #009c1a
  • Orange : #e57400

Continue reading Automating a Sass Color Palette Reference Page

May The Source Be With You

Responsive design and progressive enhancement are undeniably the new standards in web design. But the challenge of adapting a design for different types of media isn’t new. Every graphic designer has labored to rework a design to fit on a poster, in a brochure, on a postcard or even on a business card. The difference in the modern web environment is now a designer has to engineer an entire visual campaign into one layout while working within the constraints of html.
Continue reading May The Source Be With You

The Basics of Managing Multiple Ruby Versions

Every project can have it’s own Gem dependencies and version requirements making switching between Ruby projects difficult especially for visual designers and beginners. Ruby management tools such as RVM and rbenv help you install and manage multiple Ruby environments. I’m a Mac guy and most recently I’ve been using rbenv so this post focuses on OSX and rbenv.

Continue reading The Basics of Managing Multiple Ruby Versions