Building a responsive site in less than 20 minutes

6 minute read

An ever-so-sleek responsive portfolio site I designed for a friend in less than 20 minutes using Skeleton as a foundation.[/caption]

With all this talk lately of the new era of responsive design, I realized today that I've yet to create anything that's actually responsive. Given that I've only pondered using it in the implementation of complex, database-driven news sites, the task of tweaking every level of CSS to fit perfectly into a responsive grid system has so far seemed too daunting to tackle.

But I got curious this afternoon, and found my way upon a cool new library called Skeleton, which bills itself as a "a beautiful boilerplate for responsive, mobile-friendly development." Essentially, Skeleton is a collection of CSS and JS files that makes the mystery of responsive design seem a little less illusive. Upon uploading the package to my server, I was pleased to find a neatly-coded, easy-to-understand responsive site that I could play around with and tweak to my own liking. I ended up adjusting the grid size and performing some minor customizations to the underlying Skeleton structural CSS, but other than that, the development kit was, as it promised, "style agnostic."

Since I didn't have any specific projects I needed to be working on today, I decided to give Skeleton a whirl by designing a new online portfolio as a favor for my friend Daniel Medina. I'm not kidding – within 10 minutes I'd coded a fully satisfactory responsive portfolio site that looks beautiful on my iPhone and tablet.

So, if you're feeling experimental, try Skeleton out. It's exciting to see how quickly this technology is catching steam, and to see the actual workings of the responsive CSS in action firsthand. My next goal is to integrate a responsive layout into a more-powerful database-driven site, perhaps one designed in Drupal.

Leave a Comment