See the Pen Haml Clock by Katy DeCorah (@katydecorah) on CodePen

After creating the Haml calendar, I decided to go for a Haml clock.

How it works:

1. Haml provides the initial time.

2. Internal Sass rotates the hands of the clock to portray that time.
3. CSS animation keeps the hands ticking.

Initially I only used an inline style to set the rotation of each hand. I wanted to write the animation/keyframes in the external stylesheet, but that wasn’t going to work. The animation kept reseting to 0. For example, if it’s 1:15, the minute hand would initially start at 15 (rotate 90 degrees) and then rotate slowly to the next minute (96 degrees). Instead the animation would only start 0 degrees; I couldn’t get the inline rotation to speak with my external animation. To make the animation work, I wrote internal Sass so that the first keyframe was at the starting time and not reverting to 0.

Features

I spent some extra time figuring out how to support different timezones. I set the clock at UTC-4 (EST). You can easily change the timezone in the Haml, it’s the first variable.

The CSS is all em-based and happily responsive. When the width/height is too small, then the digital time displays.

For an added bonus: the background color darkens as the day progresses. (My better half suggested that one.)

Credits

I received design and color inspiration from Dribbble. Also, I used Hugo Giraudel’s items on a circle mixin. I really love that mixin!

---