In a previous post, 6 tools to get you started with Responsive Web Design, we selected and discussed 6 tools and libraries to help you get started with – really – responsive web design. We received loads of positive feedback and additional tips and tricks from our followers and decided to collect them in another post about one of our favorite subjects. Here we go:
Responsive Design View for Firefox
Did you ever try and press
M on your Mac or
M on your (Windows) PC in Firefox? If not: do so. It will tell you your current page size and it allows you to test other sizes. – @bastilian
Responsive Inspector for Chrome
And what about the Chrome Dev Tools Responsive Inspector extension, allowing you to inspect page media queries? A very useful tool when developing responsive web layouts as it can visually show what resolutions are defined in CSS stylesheets. In addition it has pixel perfect browser resizing and CSS media query code viewing. – @bastilian
More CSS libraries for RWD
Moreati came up with the following services:
bourbon.io a simple and lightweight mixin library for Sass;
inuit a powerful, scalable, Sass-based, BEM (Block-Element-Modifier), OOCSS (object oriented CSS) framework;
compass Compass is an open-source CSS Authoring Framework
… talking about Responsive web design tips! Those are quite a few. What are we talking about here?
Compass offers great grids that are almost always responsive by default. Inuits is Sass based, Object Oriented and provides little-to-no design which means no deleting CSS code and no adhering to other peoples’ (bad) design decisions. Read: more design patterns, no design decisions (if you need a framework that supplies design I’d still use Bootstrap, as mentioned in the previous post). Inuit.css is intended for IE8 and above only and documented extensively on GitHub. Bourbon is very much a Rails darling, and has Neat – ‘a lightweight semantic grid framework’ – to create responsive designs. Neat was created with the aim of promoting clean and semantic markup; it relies entirely on Sass mixins and does not cram HTML documents with presentation classes or extra wrapping
And ‘zalew’ responded on our Hacker News item that we should definitely include Zurb Foundation in this follow-up post. After a little research, we can’t agree more! Zurb Foundation is a responsive front-end framework that allows you to quickly prototype and build sites or apps that work on any kind of device with Foundation (which is MIT-licensed and absolutely free to use). Make sure to check out Zurb’s HTML Templates, Icon Fonts, Off-Canvas Layouts, Responsive Tables, SVG Social Icons and Stencils for yourself!
This article was brought to you by Usersnap – a visual bug tracking and screenshot tool for every web project.