andyMatthews.net

Responsive web design is all the rage right now. It's a buzz word that means a website that adjust itself to the users environment: whether mobile, or desktop; large screen or small. But it's also more than just the mechanics of building a site, it's also the conceptial phases, and the approach to developing the assets. It's become fairly easy to build media query based sites, as evidenced by the excellent mediaqueri.es gallery. One way of building these responsive sites is the excellent Skeleton framework written by Dave Gamache, a designer at Twitter.

The Skeleton framework, at it's core, is a collection of CSS and HTML files which combine to make a website that can be adjusted to 4 distinct sizes. There's full size (960px and above), tablet portrait (768px to 959px), mobile landscape (480px to 767px), and finally mobile portrait ( 300px to 479px). Additionally Skeleton bases it's layout on the 960 grid system. This provides styles that easily allow content columns to sized from full width down to a single column, and any combination in between. Want a 2 column site? Done. 3 column? Done. 4 column? Done! Skeleton has all of that built in, and more.

Skeleton's magic is comprised of three files:

• base.css - this file acts as a sort of reset, zeroing out all browser inconsistencies and providing a level surface to code upon. It also provides beautiful defaults for buttons, links, form elements, and headings. You probably won't need to change this file very often.
• skeleton.css - the core structural file. It contains declarations for all column definitions. It's mostly widths, margins, and padding. You probably won't have to change this file much either.
• layout.css - This file is an empty canvas, waiting for the paintbrush if the master, you! This is where you'll put your site-specific styles. The file is well laid out with clearly defined sections to make organizing your CSS simple and efficient. If you do decide to change something from one of the other two files, it's a best practice to simply override the style in this file.

Open up layout.css and efficiency stares you in the face. There's a copyright notice and a table of contents. Skipping past those you see sections for Site Styles, Page Styles, and Media Queries. The first two are empty, waiting for you to fill them. The Media Queries section contains 5 empty declarations which allow the site to be responsive. I took the liberty of narrowing those down to 4 after a little examination. Let's examine those closer:

@media tells the browser a media query is coming. Screen tells the browser that this is only for visual display (not print). Then comes the actual query...it's simply a CSS definition. You recognize that don't you? Here they check for max-width, but they could just as easily check for orientation, resolution, and other good stuff. In addition to having all of your code inside one master CSS file, you could just as easily split them out so the browser only needs to download the files it can understand. You do that like so:

I hope this short overview is the catalyst for trying out Skeleton and building a media query site of your own. I converted an existing Flash site into a media query based HTML 5 site in just under 10 hours using Skeleton. I guarantee you that it would have taken far longer without it. Good luck.

If this article was interesting, or helpful, or even wrong, please consider leaving a comment, or buying something from my wishlist. It's appreciated!

This is useless, as tablets come in all sorts of resolutions. It's no where near as easy as this.

Dawesi - September 19, 2011 08:07 pm

Useless? Hardly. Yes, tablets come in all shapes and sizes, but they still obey math. The window width of any tablet HAS to be between one of these dimensions. If it matches up, then the tablet gets that slice of CSS. Might not be perfect, but it's better than hard-coding a width and forcing EVERY device to scroll to see the content.

andy matthews - September 19, 2011 10:19 pm

It sometimes gets really interesting with some of the resolutions of the tablets now, I know when I was playing around with the Samsung Galaxy Tab it has a width in landscape mode of 1280px. So I ended up finally using javascript to add a helper css class to the html to say that it is touchable, since I just wanted to make some menus have a bigger hit area, but obviously it they didn't need to be bigger on netbooks or just older monitors with a resolution with 1024 width. I'm still using a few media queries as well, but I have come to the conclusion that in a complex app that media queries along will not work.

Josh Knutson - September 20, 2011 09:38 pm

Great intro to Skeleton. I knew about 320up (http://stuffandnonsense.co.uk/projects/320andup/) but will check this out. Have you looked at 320up? I would love to hear what you think. It sounds very similar.

Brent - September 29, 2011 05:51 pm

iOS 5 IS out. your website is INCORRECT.

Joe - October 12, 2011 11:33 am

iOS 5 is OUT? Ya right. Will have a very large chunk for years to come. We are implementing Skeleton css soon to our sites.

Jeff Kee - March 02, 2012 01:00 pm

Awesome Jeff...I think you'll like it a lot. Feel free to post a link to your site when you're done. I'd love to check it out.

andy matthews - March 02, 2012 01:05 pm

Andy - Check out www.brixwork.com. Finished this a while ago but forgot to tell you! All mobile grid technology.

Note - if people are using images within the grid, it's important to include "scale-with-grid" as a CSS class for images. That's the only thing I was puzzled with (cause I didn't read the docs enough) and I was setting custom width for images of all sorts throughout the media queried CSS sections.. until I came to a realization.

Thanks again for the introduction!

Jeff Kee - May 19, 2012 04:21 pm

P.S. dont' be phased by my new email - my first comment on March 2 was made under my other email. I'm now more active under the brixwork.com email.

Jeff Kee - May 19, 2012 04:21 pm

Thanks for this!
Good overview of the skeleton framework.

Daron L - June 07, 2012 08:31 pm

Thank you

Giacomo - July 12, 2012 03:53 am

Your Comments

Your Name

Your Email

Your Website

Subscribe Yes please No thank you