Posts tagged tools

  1. Rock Hammer, a curated, responsive project library

    Andy Clarke’s latest project:

    A curated project library for Hammer For Mac. Rock Hammer contains baseline typography, plus styling for common HTML elements including images, forms and tables, as well as navigation, responsive modules and widgets.

    Although, it’s made for Hammer for Mac, you can still use it without.

  2. ish.

    ish. is yet another viewport resizer. What’s with the name, you ask? Small-ish. Medium-ish. Large-ish. That’s the idea. Many have long been preaching to let content, not device widths determine breakpoints in responsive designs, so rather than determining several fixed breakpoints, ish. roughs out general ranges in order to better serve the entire resolution spectrum.

  3. Jetstrap

    Jetstrap is an interface builder for Twitter Bootstrap. This looks like a tremendously helpful responsive prototyping tool as it enables less code savvy folks to drop in and modify elements to their liking.

  4. Adobe Edge Reflow

    Adobe gives a sneak-peek of its new tool for designing responsive websites, Adobe Edge Reflow. A preview release is expected by the end of 2012!

  5. ReView

    Review is a tool created by Edward Cant that allows the viewport on a responsive site to be dynamically resized to achieve Opt Out Responsive Design

  6. Responsive Measure by Josh Brewer

    Josh Brewer created a nice tool to maintain typographic measure for responsive design.

  7. The Personal Page

    Naz Hamid created a “free, simple, one-page mobile-friendly website that aggregates your activity”.

  8. Codepen Update

    Chris Coyier and company made an update to Codepen that now allows you to include things in the head of your pens. That means you can incorporate the viewport meta tag. Hooray!

  9. Bourbon Neat

    Neat is an open source fluid grid framework built on top of Sass and Bourbon using em units and golden ratios.

  10. Responsive Roulette

    Jordan Moore created a nifty tool that displays your design at a random viewport width. This is a great tool to facilitate moving away from using device dimensions to determine breakpoints and instead letting content determine breakpoints.

  11. Give the Web a Responsive-Design Facelift With ‘Responsive Retrofitting’

    Ben Callahan created a great tool that allows you to ‘responsify’ an existing website. It’s a great educational tool and certainly help explaining what responsive design is to people who aren’t in the know.

  12. Unicon: A Grunt.js plugin for managing and delivering sharp icons to all devices

    Creating sharp-looking icons and background images in our client work has always been more complicated than we want it to be, and with the growing popularity of higher-definition screens, it’s only getting harder. CSS sprites have traditionally worked alright, but they can be a pain to manage, are often difficult to use in CSS layouts, and require generating and serving multiple fixed-pixel sizes. Icon fonts are a nice too, but they cause problems in some of the popular mobile environments we need to support, they aren’t easy to manage for custom-designed icons, and they’re limited to a single color.

  13. Layout view and responsive mode in Firefox 15

    The newest version of Firefox will include a tool that allows you to resize the viewport to test responsive designs. Still not a substitute for testing on real devices, but helpful nonetheless.

  14. Responsive Retrofitting

    Now here’s an interesting tool from Ben Callahan (@bencallahan) that allows people to take an existing fixed-width website (like and tack on a stylesheet that makes it responsive. While this isn’t exactly the best way to actually build a responsive site, it can be a great educational tool.

  15. Southstreet by Filament Group

    Scott Jehl of the Filament Group just released a treasure chest of tools to help create highly-performant adaptive web experiences. The concepts and patterns presented here are the future of responsive web design.

Back to Top