Mobile First With Bootstrap 3.0

Bootstrap 3.0 was released a couple of weeks ago and there is plenty of information on their blog about what this new version brings to the table, improvements, how to migrate, etc … My experience migrating to Bootstrap 3.0 has been super positive, which probably isn’t much perspective when I am only using the grid system and some utilities, but: give credit where credit’s due.

It was a three step program.

1. Remove Normalize. It is now being pulled directly into Bootstrap.
2. Replace span6 with col-sm-6.
3. Refactor my css media queries to be from a mobile first perspective. I only have differently layouts for phone and not phone. My base style represented the not phone layout and I used media queries to override that style in a few places for the phone layout. All I did in this step was refactor my media queries so that the base style represented the phone layout and the media queries override that style in order to support the not phone layout. Note that this likely sounds more complicated than it is.

Done. Checkout my commit.