Material Design Lite

Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. By the folks at Google Material Design Lite → Related: Paper Elements, a …

The anatomy of a credit card form

At Wave, our Invoice product enables business owners to create and send invoices to their customers, and to have those invoices paid via credit card. My job was to design the credit card form, given a set of business requirements and constraints. This post is about the design considerations our team explored to arrive at …

CSS-Grid-Polyfill

CSS Grid Layout Polyfill: The polyfill’s css parser was built by following the CSS Syntax 3 specification, the polyfill should be able to process any css stylesheet. It can react to dynamic pseudo-classes like ‘:hover’, to media queries changes or window resize events. It also detects changes to the DOM that may affect the layout …

Zenfonts – A tiny and flexible JavaScript tool to help loading web fonts

// JavaScript Zenfonts(“Dolly”, {fallbackClass: “fallback-dolly”}) /* CSS */ body { font-family: “Dolly”, Georgia, serif; } .fallback-dolly body { font-family: Georgia, serif; } A tiny JavaScript helper to load and pre-load web fonts that are specified via @font-face. It uses best practices from other solutions, but it’s still a unique combination: It’s tiny (793 bytes minimized …

Scale Yosemite’s El Capitan with Google Maps

Welcome to The Nose of El Capitan, in Yosemite National Park — the most iconic rock climb on earth. Tighten your harness and double-check your knot, to join Lynn Hill, Alex Honnold, and Tommy Caldwell on a 3,000 foot interactive journey up El Capitan. Here’s a behind the scenes video: Scale Yosemite’s El Capitan with …

Tiny two way data binding

Awaiting Object.observe() to land, Remy Sharp has written his own simple implementation: Data binding to the DOM is just one of those things that’s damn handy when you’ve got it and super laborious when you don’t. The problem is that it usually comes at a price of a hefty framework. So, as any good re-inventer …

Responsive day out 3: the final breakpoint

Extensive write-up by Hidde on the third edition Responsive Day Out: As may have become clear from my notes above, Responsive Day Out 3 was a day full of variety. I had the feeling it could have easily been called Web Day Out, and I guess that makes sense, as responsive web design has naturally …