Fantastic Responsive Design Tools

Published on , in Front-end with no comments .

Recently I’ve been writing about responsive design so now it’s time to cover some really useful tools that can be used during the design process, implementation and testing.

Grids

1140 CSS Grid screenshot
The 1140 grid is fluid down to mobile from 1280px.
The Golden Grid screenshot
The Golden Grid features a browser grid overlay for testing your layout.
A screenshot of the Semantic Grid System
The Semantic Grid System runs on CSS pre-processors like LESS, SASS or Stylus.
Isotope screenshot
Isotope provides intelligent and dynamic layouts with filtering of grid elements.
Masonry screenshot
Masonry is similar to Isotope but without the built-in filtering.

Boilerplates

Bootstrap screenshot
Created by Twitter, Bootstrap is ideal for building web apps.
Gridless screenshot
Gridless is an HTML5 and CSS3 boilerplate.
Skeleton screenshot
The Skeleton boilerplate is based on the 960 grid and scales to mobile.

Text

FitText screenshot
FitText is a jQuery plugin for scaling, responsive headlines.
SlabText screenshot
SlabText is very similar to FitText.

Navigation

TinyNav screenshot
TinyNav will convert navigation lists to select boxes/dropdown lists.
Mobile Navigation plugin screenshot
jQuery Mobile Navigation plugin is similar to TinyNav.

Sliders & Galleries

CSS3 Responsive Slider screenshot
The CSS3 Responsive Slider as a JavaScript free (almost) slider.
ResponsiveSlides screenshot
ResponsiveSlides, from the creator of TinyNav, is a lightweight responsive slider plugin for jQuery.
Swipe screenshot
Swipe is a touch based mobile slider.
PhotoSwipe screenshot
PhotoSwipe is designed for mobile devices and aims to provide a gallery with the look and feel of a native app.
fancyBox screenshot
fancyBox 2 is updated to use CSS3 and is also responsive.

Polyfills

Respond.js screenshot
Respond.js enables min-width and max-width media queries in old version of IE.
CSS3-mediaqueries.js screenshot
CSS3-mediaqueries.js enables all kinds of media queries in old versions of IE and other browsers.

Testing

Adobe Shadow screenshot
Adobe Shadow allows remote testing between multiple devices.
Drive-In screenshot
Drive-In, from Scott Jehl (Respond.js), also allows remote testing across devices.
Firefox Responsive Mode screenshot
Firefox Responsive Mode allows you to more easily test responsive layouts by providing a re-sizable window within the browser.

Leave a Comment