Skeleton: My new fav CSS boilerplate?


I've been thinking about creating my own CSS grid framework, simply because sometimes I feel like the frameworks I use are overkill for the scope of some of my projects. I have found that I use Neat more than any other CSS framework, (mainly because I know it best) however sometimes even Neat is overkill.

Today I stumbled across a lightweight responsive CSS grid system called Skeleton. It appers to be everything that I have been looking for, and it is a perfect starting point for my ideas, and smaller projects.

Skeleton has a 12 column grid that shrinks with the browser or device screen size. It uses media queries to serve it's scalable grid. The queries are mobile-first, meaning they target min-width. Mobile first queries are the prefered method of orginizing CSS because it means all styles outside of a query apply to all devices, then larger devices are targeted as needed. What's cool about this is that is prevents smaller devices from having to parse a ton of unnecessary and unused CSS.

The size for the default media queries (which can be changed) are:

  • Desktop HD: 1200px
  • Desktop: 1000px
  • Tablet: 750px
  • Phablet: 550px
  • Mobile: 400px

There is more to the grid system than I've written about here. I'm still playing with it, but I like it alot so far. It's worth checking out for sure. Here's a example of a landing page that was built using Skeleton. It's less than 150 lines of code!

....and for all you purist out there (Ollie, I'm looking at you ;) the framework is written in pure vanilla CSS. If you check it out, I'd love to hear your thoughts. Shout at me on Twitter.

Until next time...

Jay Wilson Jr.

Did you know: Jay is a Emergency Medical Technician & Front-End Developer. He enjoys spending time with his daughter and learning new stuff. He likes to make people laugh and is a all around cool guy.

Bedford, Va.