A collection of responsive web tools/utilities

responsiveresearch.md

Responsive Research

Testing Tools

• http://www.responsinator.com/ (& bookmarklet)
• http://www.jordanm.co.uk/lab/responsiveroulette
• http://responsive.is/trentwalton.com
• http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html
• http://html.adobe.com/edge/inspect/
• http://mqtest.io/ test your device's media query capability

Content Strategy Tools

• South Street https://github.com/filamentgroup/Southstreet
• Flexbox http://benfrain.com/understanding-the-css3-flexbox-flexible-box-layout-module/
• AppendAround https://github.com/filamentgroup/AppendAround

Content Loading Tools

• RequireJS http://requirejs.org/
• QuickConcat https://github.com/filamentgroup/quickconcat
• Ajax Include https://github.com/filamentgroup/Ajax-Include-Pattern/
• Conditional Loading http://24ways.org/2011/conditional-loading-for-responsive-designs

Image Display Techniques

• Background Images http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
• Background Image http://elliotjaystocks.com/blog/better-background-images-for-responsive-web-design/

Image Optimisation

• http://dev.opera.com/articles/view/responsive-images-problem/
• PictureFill https://github.com/scottjehl/picturefill/
• Adaptive Images http://adaptive-images.com/
• Responsive Image Techniques http://css-tricks.com/which-responsive-images-solution-should-you-use/
• Checks bandwidth to determine to load images https://github.com/teleject/hisrc

Retina Images

• ForesightJS, network and resolution https://github.com/adamdbradley/foresight.js
• RetinaJS (doesn't check network bandwidth) http://retinajs.com/

Breakpoint Tools

• Breakpoints.JS http://xoxco.com/projects/code/breakpoints/
• onMediaQuery https://github.com/JoshBarr/js-media-queries
• Enquire.JS http://wickynilliams.github.com/enquire.js/

User Agent Detection

• Categorizr https://github.com/bjankord/Categorizr

Random Utilities

• Hide Address Bar https://github.com/scottjehl/Hide-Address-Bar
• iOS 5 & older orientation bugfix https://github.com/scottjehl/iOS-Orientationchange-Fix
• MediaQueries Polyfill https://github.com/paulirish/matchMedia.js/

Carousel

• Dynamic Carousel https://github.com/Wilto/Dynamic-Carousel/
• Responsive Slider http://responsive-slides.viljamis.com/

Grids

• Compass Responsive Grid http://susy.oddbird.net/
• Semantic.gs Semantic Grid http://semantic.gs/
• Inuit.CSS http://csswizardry.com/fluid-grids/
• Singularity http://singularity.gs/

Sass Mediaqueries

• http://css-tricks.com/media-queries-sass-3-2-and-codekit/
• http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
• Sass 3.2 mediaqueries gist https://gist.github.com/2028061
• IE Support http://alwaystwisted.com/post.php?s=2012-08-06-a-sass-mixin-for-media-queries-and-ie
• RespondTo Compass extension https://github.com/Snugug/respond-to

Prototyping

• Zurb Foundation http://foundation.zurb.com/