Skeleton CSS Framework Review
Responsive grids to the rescue
I’m not a huge fan of CSS frameworks. Not to say they are bad or anything, I just don’t care for them. I’ve tried a couple, and I thought the 960 grid did a pretty good job. There has been a lot of hype lately though for responsive design, so I thought I would take a look at one that has been getting a lot of respect and talk – Skeleton.
Skeleton’s CSS syntax
The creator of Skeleton, Dave Gamache, deserves a lot of credit for what he has done with it. For one, I’d like to thank him for using easy to remember class names like ‘one-third’ and ‘two-thirds’. I had a hard time remembering 960′s class names with .grid-whatever. He also uses things like ‘offset’ which is easier to tell what it does by reading it, than ‘push’ or ‘pull’ ever did. Looking through Skeleton’s grid CSS made me really happy when I first opened it, so props to Dave.
It’s a starting point, not the end line
The creator says it best in his blog:
“Responsive design is not a silver bullet, but it is the strongest solution to the rapidly growing set of devices web designers and developers have to account for. It would be impossible to design for individual devices and screen sizes these days – instead let’s be smart and essentially “bucket” devices into categorical sizes and design appropriately. Skeleton does just this.”
Skeleton isn’t the end all be all, but it does a great job at what it does – create responsive layouts. It supports a lot of browsers, and if you are building a nice clean site, everything scales nicely. One thing to note, in IE it will not scale, you will just get the standard grid styles. Which I think is fine, people get than for the most part anyway, so IE users won’t notice anything different.
Some cool features
Skeleton has some nice additional things included such as Buttons and Tabs. The Buttons are just nicely styled, well…buttons. All you have to do is add the class “button” to an ‘a’ tag, and you have a CSS3 gradient styled link. You can obviously do that kind of thing yourself, but hell its included and free, so stop bitching.
The tabs are created by putting the ‘tabs’ class on a ‘ul’, and creates a nice tabbed navigation, which scales down beautifully when you get to smartphone screen size. While they don’t exactly look all that fancy, the Tabs are clean and work well out of the box. It does require jQuery in order to work (which is already linked to in the HTML file), but the script is so ridiculously small, if you have worked with the library before you should have no problem modifying it should you need to.
On top of that, there is also a simple HTML form, and an example on Skeleton’s website if you need to view it.
So how is it really?
Well, if you are creating a nice, clean and basic styled website, Skeleton is easy to use and kick ass at what is for. Everything is easy to use, compatible, and sizes perfectly. If on the other hand, if you are creating a site that I think most developers do, which uses a lot of CSS background images, you could be in for a lot of pain.
See, background images don’t resize. Images hard coded into the HTML do, but not one placed by CSS. So guess what that means? Ya, different versions for each screen size Skeleton hits. On top of that, just shrinking a graphic doesn’t mean it just works. I tried a basic test of just rebuilding portions of my home page, and just downsizing the image and writing the style it need for the appropriate screen size didn’t mean everything looked fantastic. It worked for desktop, but the design failed once it hit 760px. Everything was just to small.
The navigation was also hard, because it was absolutely positions within a div at the top. Well, when things move in when you resize, the top of my nav disappeared as it lined up block style from inline. So I had to rewrite the styles for that. Do you see where I am going with this?
If you go to Skeleton’s website and resize the window to whatever, everything plays nicely. But the site is plainly designed. No real graphics or anything. Start throwing in background images, and anything positioned to somewhere specific, and all of a sudden you are not only writing styles for one screen size, but for ALL of them. Your CSS file becomes huge, and you are basically creating a new site for each size. I mean new too, because your design for one size might not look that great just scaled down to fit a smaller one. You might need two or three different looks.
Will it be rewarding when you are all done? Hell yes, but just after some playing around with it, it is no simple thing to do for a more complicated design. Once I really started noticing what was going to be involved I quickly realized how important it was to just stop and rethink some things. If you are going to use Skeleton on anything other than a basic site, spend a lot of time planning and visualizing how everything is going to flow and scale, or you will screw yourself later if something doesn’t work out the way you thought it was.
Still, this is the first CSS framework I would actually seriously consider using. It’s easy to understand, clean and a very good starting point. Personally I would replace the HTML5 shim with Modernizr, but that is being nit picky, and total opinion. I really enjoyed playing around with Skeleton, and I recommend you looking at it if you are thinking about building a website using responsive design. If anything, do a small test yourself, and you will learn a lot within a half hour of building something out with it.