tldr; I started on a project using Skeleton, but realized skeleton’s smallest supported screen size is 550px (as per their media queries), and switched to PureCSS.

If you’re familiar with the front-end development scene, you’re most likely also familiar with the amount of churn, new frameworks, and libraries that come around. One of the places that also has a relatively high amount of seemingly new thought pouring into tooling/libraries is front-end frameworks.

While I’ll spare the history lesson about the rise and fall of things like jQuery UI and Bootstrap, there are a bunch of frameworks that have arisen that exist on a spectrum of heavy (how many batteries are included) to very light (almost no batteries included). I’ll list some to give you an example of how I bucket them:

Heavy

Along with basic things like a gridding system and button/element styling, these often provide custom elements, some JS functionality, etc

(Twitter) Bootstrap

(Zurb) Foundation

Semantic UI

Lighter

These frameworks basically provide basic things like a gridding system and very little (often minimal) button/element styling

(Yahoo) PureCSS

Skeleton

While I’m sure I’ve missed at least 5 other prominent frameworks, in my opinion, these are the current front-runners.

The point of this post is just to expose one thing I found while working with Skeleton in particular. While developing a FirefoxOS application (that will be released very soon), I found that (as of the time of this post) Skeleton only supports >= 550px width device displays. I was wondering why my classes and styling wasn’t being properly applied, and a quick glance at the source showed a media query that did not agree with me.

Normally I would just make a small code change and using a custom version of Skeleton, I’ve instead decided to switch to Pure, as there’s not much to actually do to make the switch, and I’ve had good experiences with Pure in the past (I’m not bashing Skeleton here, it just doesn’t fit my use case and I know Pure does). Pure handles this issue a little bit differently by allowing for a sort of default styling (using classes like pure-u-1-2 to specify half the screen width).

I did at least submit an issue to the Skeleton Github repo detailing the issue (as I see it).

I hope I’ve thrown at least one breadcrumb into the maze that is choosing a front-end styling framework.