Andre Liem

Skeleton – a simple and powerful boilerplate css framework

I’ve been looking for a CSS framework like for the past few months and have noticed a growing amount showing up as of late. This post will not be reviewing all the frameworks/boilerplates, but to give you an idea of some of the originals:

These frameworks basically provide a basic set of tools for front end developers to focus on building and not recreating the same scaffolding code for each project. Also, they address common browser differences and are optimized for particular viewing experiences. One thing these frameworks have in common is that they create a “grid”. The entire site is defined by standardized column widths that make it easier to place content without creating messy divs and floats. They are great for code quality but you do need to make sure the design adheres to the grid. This is often a big issue for most developers/designers who don’t necessarily have control over this.

So to address the title of this post, what is Skeleton? It’s another CSS framework I just came across, but it hits the sweet spot between simplicity and power.  In addition, because it’s new, it addresses mobile displays and focuses on the forward usage of CSS3. Sometimes you don’t have to analyze frameworks with pro/cons matrices and just need to read over the CSS to know it’s right.  I found with Skeleton, that I could read the one page description, download the files and understand it within a few minutes. Other frameworks, often more mature in development, provide too much information, too many options and abstract too much. I like Skeleton because it’s not doing any heavy lifting with Javascript, it’s all good clean CSS with clean documentation.

The official site does a great job of providing a summary of how it works, but here’s my own coles notes version:

  • grid based design on 960px
  • mobile friendly
  • usage of css3/html5
  • clean form elements
  • jQuery ui tools (fairly basic now)

If you’re looking for a CSS framework, I highly recommend giving skeleton a try.

1 comment

  1. I’ve been trying to learn Skeleton. I just need a really simple and clean example and I’m sure I can take it from there. Unlike you, I’m not able to just view the examples and run…help?

Leave a Reply

Your email address will not be published. Required fields are marked *