Article summary
It has been at least 3 years since I’ve started a Web project where mobile wasn’t a primary constraint. Although there are plenty of great DOM frameworks that support responsive design, I’ve been looking forward to using a framework that has a distinctively mobile first point of view.
Mobile First Frameworks
Here are 3 mobile first frameworks worth your consideration:
Bootstrap 3
If you’ve been using Bootstrap 2, you know how powerful it is, especially for its responsive toolkit. Bootstrap 3 goes all in with mobile first. You’ll find that it has several elegant utilities to control the various media query experiences, all building on a mobile first approach.
If you’ve been using Bootstrap 2, you’re going to find that class names have been overhauled considerably — for the better, in my opinion.
Pure
Yahoo has been an unsung hero when it comes to UI frameworks, as they pioneered the space in many ways. Pure is a mobile first installment that reestablishes their credibility as innovative leaders in modern Web frameworks.
Pure takes an innovate approach to the gird by scoping class names to the framework (a practice that comes with a lot of debate, but one I recommend for large, integrated applications) and by also treating grid columns as fractions. Fraction-based columns solves my first headache when dealing with many grids: the gutter.
Pure also stands out by utilizing SMACSS — the first framework to do so, that I’m aware of.
It’s also worth noting that Pure is small (4.2KB* minified and gzipped) and plays well with Boostrap. If you need a leaner framework and the occasional Boostrap UI, consider Pure as a starting point.
Cardinal
Cardinal is a bit more foundational than Pure and Bootstrap, but its unique approach to scaling is worth noting. While Pure and Bootstrap offer decent image scaling, Cardinal takes scaling considerably further.
Cardinal leverages modular scale, unit-less line heights, and the power of the REM unit to make it simpler to resize the typography and layout of your entire application for different devices.
You’ll also find that Cardinal has decent print support out of the box.
Wrapping Up
Each of these mobile first frameworks has yet to hit a production ready release. However, if you’re starting a mobile first project, I would consider these as options worth exploring. I’m currently using Bootstrap 3 and can’t imagine going back!