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 is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.
2. Gridless
Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.
3. Mobile Boilerplate
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
5. 320 and up
320 and Up prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.
6. Fittext
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
The mediaQuery bookmarklet gives a visual representation of the current viewport dimensions and most recently fired media query.
8. Responsive testing
A quick and easy way to test a website design in multiple screen widths.
9. Media Queries
A collection of inspirational websites using media queries and responsive web design.
10. PhotoSwipe
PhotoSwipe is a free HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.
11. Adapt.js
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 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.
This post may contain affiliate links. See our disclosure about affiliate links here.
