Ever since Daniel posted his binary mod of my digital clock, I’ve been thinking about other ways to push the limits of the clock using only CSS. At JQCon, I also talked to a few folks between sessions who had wondered the same thing. So, I’ve decided to give it a go.
One of the first ideas I had was to try to use fonts instead of the LED divs to show the clock digits. So, here you go.
It turned out to be fairly easy, and required zero changes to the Javascript view controller. The view controller simply passes the same messages to the view as it did before. In other words, the view controller relies on a message-passing-based view API to which the OOCSS responds. That API is unchanged in this version. To verify, you can hop on over to Daniel’s binary mod, which references my JS directly, and see that it still works.
It also required only superficial changes to the HTML:
- I added the button for the new theme in the row of theme buttons.
- I added “hour” and “minute” classes to the digits representing hours and minutes. This change was not necessary to support the new font-based theme, but makes the hours and minutes consistent with the seconds, which already had the class “second”.
The key changes were, of course, in the CSS, and here are some of the most relevant bits.
The comments pretty much say it all, but basically it hides the LEDs and then uses :before content to inject the font-based digits.
One thing I hadn’t thought about before I actually ran it the first time, was that the “1” digit is much thinner than all the others, so I had to forcibly set a specific width for it (in both hours/minutes and the smaller seconds). Without that specialization, the clock looks too sparse when there is a “1” (or several “1”s) being displayed. Yet another win for the OOCSS base and specialization pattern.
I think this theme looks pretty good (although I’m still partial to the LEDs), but if you have suggestions for how to tweak it, I’d love to hear them. Also, if you have an idea for how to push the envelope, feel free to leave a comment, or tweet it up!
Stay tuned for more envelope pushing …