Some, have learned through detailed tutorials, others by looking at live sites, while I preferred to get hands on experience with some free tools and frameworks.

Of course, there are many frameworks and plugins available that will help to make it easy for you to create responsive layouts, and it is those tools that I have shared with you today. I hope they help!

1. Less Framework

Less-framework-responsive-web-design-showcase

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

2. Gridless

Gridless-responsive-web-design-showcase

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

3. Mobile Boilerplate

Mobile-boilerplate-responsive-web-design-showcase

Mobile Boilerplate is your trusted template made custom for creating rich mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.

4. Skeleton

Skeleton-responsive-web-design-showcase

5. 320 and up

320-up-responsive-web-design-showcase

320 and Up prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.

6. Fittext

Fittext-responsive-web-design-showcase

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

7. Media Query Bookmarklet

Media-query-responsive-web-design-showcase

The mediaQuery bookmarklet gives a visual representation of the current viewport dimensions and most recently fired media query.

8. Responsive testing

Testing-responsive-web-design-showcase

A quick and easy way to test a website design in multiple screen widths.

9. Media Queries

Media-queries-responsive-web-design-showcase

A collection of inspirational websites using media queries and responsive web design.

10. PhotoSwipe

Photoswipe-responsive-web-design-showcase

PhotoSwipe is a free HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.

11. Adapt.js

Adapt-responsive-web-design-showcase

Adapt.js is a lightweight JavaScript file that determines which CSS file to load before the browser renders a page.

12. Adaptive Images

Adaptive-images-responsive-web-design-showcase

Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embedded HTML images. No mark-up changes needed.

Editorial Team

Written by Editorial Team