Bootstrap 3: Migration and Accessibility

Bootstrap 3 was released a few weeks ago. Ever since the version's release candidate, I've been happy with where it's been heading. As opposed to me copying and pasting all the great things in the new release, you can check out the details on their Blog. I'd simply like to highlight a few things I experienced while upgrading http://itstiredinhere.com/.

Painless Migration

Overall, migrating from 2.x to 3 for me was painless. The worst thing about the moves from 2.x to 3RC1 to 3RC2 to 3.0 were updated class names and and subtle changes to the gutter sizes/padding of some major containers. So, depending on how your site utilized the grid before, you could be faced with some required design/implementation changes. There shouldn't be too much complaining regarding the grid changes, though, because it's more flexible by giving you way more control over the responsive nature of your site. You're now able to use x-small, small, medium, and large grid .col-* classes either on their own or combining them for a custom experience.

Also, I found myself less frequently needing to add more and/or overriding media queries. I think that's resulting from a combination between understanding more about how Bootstrap works and the enhancements in the new version.

Lastly, I no longer need to include a separate Bootstrap responsive CSS. Responsiveness is now core to Bootstrap; extra work is only needed if you don't want your site to be responsive.

Accessibility

There are still accessibility issues when it comes to color as I blogged about earlier in Web Accessibility and Color Doesn't Have to Be Grey. Again, Bootstrap uses LESS, and is all about customization to make it your own. It would just be nice to be accessible out of the box.

A new utility class .sr-only has been added for visually hiding content, but not from screen readers. The new method uses clip to hide the content as opposed to positioning it offscreen, which has been proven to not be foolproof. The new class definition looks like this:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

To further understand this method check out the new hidden content section of my accessibility page.

Give it a Try

Read about it, download it, and have fun with it. Bootstrap 3 is awesome!