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...