It's really, really slow on the retina display. A bit better on my second, Full HD monitor, but still not really responsive.
.demo, .demo i, .demo .about, .change-color i { transition: all 0s !important; }
Still a nice showcase, congrats!
How so? It's possible in most cases to stick an extra class on the icon, say `.2x` and add a rule to your css such as —
[class*="2x"] {
transform: scale(2)
}I regularly create one-off semantic icons as long as they don't rely on `transform`. That limits it to ones based on a character glyph - (i), (?), (x), etc - strictly orthogonal blocks - (+), (-), etc. - or CSS triangles - mostly arrows (which don't always render great anywho).
I'm always too concerned about the fallback in browsers without `transform`. But really, that's illogical - it's just IE <= 8, and generally don't need to worry about that support anyways. I guess my hangup is that the meaning of the icon gets garbled when it isn't displayed correctly in older browsers, and that seems like it crosses a line. (Thought about the "semantics" of an icon quickly feels like Philosophy 101 and probably means its time to get back to work!)
As others have pointed out, I wouldn't use the pixel-based positioning/widths as this does, but `em`s, `rem`s or `percent`s. Relying on `tranform: scale(x)` would complicate layout flows - for one thing you'd always need to compensate for the scale with `margin`, `padding`, or other pixel-budging.
While I appreciate the effort and the fact that is is more of an experiment than a production-ready package, it does seem like an odd choice to go with fixed-size pixels instead of something relative, like ems or percentages.
Regardless, well done. Don't let my typical-to-HN negative tone take away from the accomplishment of this.
Was Apple a sponsor?