By chance, I came across One% CSS by Matt Imling and it was exactly what I was looking for – almost. It didn't quite suit all of my needs for Pixel Works so I made some minor modifications and added a few new things. I'm sure I will add more in the future, like padded boxes as an example.
By modify I mean change the size and location of elements on a website to accommodate the device in use. Take for example a three column layout. Now with media queries, we can stack that information on smartphones or make them thinner to fit on a smaller screen without the browser resizing the site for us. Media queries are what make responsive web design possible.
320 and Up
My first responsive design was scaled down to fit mobile devices. This really is a backward approach and after some reading, I realized how much bandwidth I was wasting going that direction. It's a “take away” approach to responsive design where you turn off certain features for smaller devices.
320 and up is an “additive” approach to design that helps sites on mobile devices load faster because you are adding features as the screen resolution gets larger. One would surmise that the larger the screen the more likelihood it is using a wireless or wired internet connection not dependent on cellular signals and that is what I used for this skeleton.
I decided to use Phil Archer's philosophy when loading CSS sheets to assist in limiting the bandwidth required to load a page. By using the @import CSS rule style sheets are only loaded when a screen criteria is met. For my purposes, there are no styles loaded under 320 pixels because those are most likely flip phones anyway.
For those that are just looking into getting into responsive web design, I have put together a small example skeleton that you can incorporate into a simple static site or make the necessary modifications to use on just about any dynamic site. If you have questions or difficulties you can contact me or leave a comment below.