50 Useful Libraries and Resources for Responsive Web Design

50 Useful Libraries and Resources for Responsive Web Design

Let’s talk about responsive web design. People are increasingly dependent on their smart mobile devices, and chances are that a large portion of the visitors of your website have used their phone or tablet to get to it. In this article you will find 50 articles, tools and resources, which will help you learn what responsiveness is, and how to apply these techniques to your current website. Happy learning!

Basics

Let’s start with these articles which explain the basic ideas of responsiveness.

1. Make it Responsive

Google’s “Make it Responsive” is a great introduction in the topic. It will get you into the responsive web-designs. During this course, you will be building a site that works across multiple screen sizes and device types. They also have other useful guides which we recommend.

Make it Responsive

Make it Responsive

2. MDN’s Responsive Web design Tutorial

This is a nice MDN article about some of the basic strategies people use to achieve responsiveness, such as liquid or fluid layouts, media queries and fluid images. They have also highlighted useful links to external resources on responsive web design.

MDNs Responsive Web design Tutorial

MDN’s Responsive Web design Tutorial

3. 5 Really Useful Responsive Web Design Patterns

DesignShack’s awesome article features lots of example patterns which can help you plan your own page layout. Some of the examples are really simple and others provide more imaginative ideas on how to arrange HTML elements.

5 Really Useful Responsive Web Design Patterns

5 Really Useful Responsive Web Design Patterns

4. Responsive Web Design Tutorial

Shayhowe presents an excellent series of lessons on web design. One of them teaches you how to make any page mobile-friendly. They start from the foundation of responsiveness and move up to different ways of making any page perfectly viewable in different screen sizes.

Responsive Web Design Tutorial

Responsive Web Design Tutorial

5. 9 Basic Principles of Responsive Web Design

Froont made this strange article that shows us the difference between divergent strategies used in making responsive web apps. They get bonus points for using cool animations to present the advantages of each technique. This is a very fun way to learn new things.

9 Basic Principles of Responsive Web Design

9 Basic Principles of Responsive Web Design

6. A List Apart’s Responsive Web Design Tutorial

An in-depth article on responsive design that covers topics such as fluid design and media queries. You’ll find something to learn in this great resource whether you are new to web developing mobile-friendly apps or you’ve already done a few responsive projects.

A List Apart's Responsive Web Design Tutorial

A List Apart’s Responsive Web Design Tutorial

7. Responsive design in 3 steps

This tutorial is intended to show you the basics of responsive design. It’s short and focuses only on the most important aspects. It features a helpful section on the viewport meta tag so that your sites can fit on screens perfectly.

Responsive design in 3 steps

Responsive design in 3 steps

8. Interface Sketch

This is not a guide, but is useful nonetheless. This is a collection of free sketch templates for web, mobile and tablet platforms. The templates are in PDF and contain multiple pages and layouts. Simply download a template, print out the pages you need and start sketching your next responsive design.

Interface Sketch

Interface Sketch

CSS frameworks

Writing responsive CSS by hand takes a lot of experience and most times you will be better off by using a framework. Here is a list of some of the best.

9. Ink

Quickly create responsive HTML emails that work on any device & client. Even Outlook. Email anywhere. On any device. How HTML email was meant to be read.

Ink

Ink

10. Skeleton

Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, from desktop to mobile. This framework consists of a base html page that includes the necessary initial markup, some stylesheets which can help you with styling your page and an included icon-set.

Skeleton

Skeleton

11. Columnal

The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. It makes responsive prototyping a little easier. It is 1140px wide, but since it is fluid, it will respond to the width of most browsers.

Columnal

Columnal

12. Bootstrap

Bootstrap is the most popular and maybe the most powerful from the frameworks presented here. It is made for folks of all skill levels, devices of all shapes, and projects of all sizes. There is also a large number of bootstrap plugins which you can use to extend it.

Bootstrap

Bootstrap

13. Less Framework

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts (Default, Tablet, Mobile and Wide Mobile) and 3 sets of typography presets, all based on a single grid. The only measures that change from layout to layout are the amount of columns and the width of the outer margins.

Less Framework

Less Framework

14. Entomic’s Responsive CSS

Layout your pages in minutes for beautifully responsive web sites on desktops, tablets and smartphones. A service that provides the option to create the layout of the page based on popular screen sizes. Simply create boxes and set their width, export the layout and just start using it.

Entomic's Responsive CSS

Entomic’s Responsive CSS

15. Susy

In a world of agile development and super-tablet-multi-magic-laptop-phones, the best layouts can’t be contained in a single framework or technique. CSS Libraries are a bloated mess of opinions about how to do your job. Why let the table-saw tell you where to put the kitchen?

Susy

Susy

16. Simple Grid

Simple Grid is another CSS grid framework. It strives for simplicity, so if you don’t need all the extra features of something like bootstrap, this framework is a good choice.

Simple Grid

Simple Grid

17. Furatto

Lightweight & friendly front-end framework to get the job done. Whether you are using Scss or CSS, it is really easy to start a project and get things done in no time.

Furatto

Furatto

JavaScript and jQuery Libraries

There is also a number of useful jQuery libraries and plugins that can give your website the extra responsive magic that it needs.

18. Intention

Intention.js offers a light-weight and clear way to dynamically restructure HTML in a responsive manner. What should an element’s classes be on mobile vs tablet? Where should advertising markup be placed when viewed on a desktop browser? Does the page require an alternate slideshow widget on touch-enabled devices? These are all scenarios that Intention.js can handle, altering the page based on users’ devices.

intention

Intention

19. JResponsive

JResponsive will organize your content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will arrange its children in a layout that makes optimal use of screen space, by “packing” them in tightly.

jresponsive

JResponsive

20. ReStable

jQuery ReStable is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.

restable

ReStable

21. Responsive Elements

Responsive elements makes it possible for any element to adapt and respond to the area they occupy. It’s a tiny javascript library that you can drop into your projects today.

responsive-elements

Responsive Elements

22. Restive

Restive.JS is a jQuery Plugin that helps you quickly and easily add features to your Web Site to enable it respond and adapt to virtually every Web-enabled Device. Using a combination of Device Detection, Advanced Breakpoints Management, and Orientation Management, Restive.JS will give your Web site an uncanny ability to stay robust in the face of a constantly changing device landscape.

restive

Restive

23. Fit Text

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. Oh, and don’t you dare let us catch you using FitText on paragraph text. This is for gigantic display text only!

fit-text

Fit Text

24. Collage Plus

This plugin for jQuery will arrange your images to fit exactly within a container. This creates an effect similar to Flickr’s profile pages or Google+ Albums. This plugin for jQuery will arrange your images to fit exactly within a container. This creates an effect similar to Flickr’s profile pages or Google+ Albums.

collage-plus

Collage Plus

25. Chartist

You may think that this is just yet an other charting library. But Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds of other great charting libraries but after using them there were always tweaks you would have wished for that were not included.

Chartist

Chartist

26. OWL Carousel

Touch enabled jQuery plugin that lets you create beautiful responsive carousel sliders. You can add an unlimited amount of images which can be slided with a butter-smooth animation.

owl-carousel

OWL Carousel

27. Swipebox

Swipebox is a jQuery “lightbox” plugin for desktop, mobile and tablet.

swipe-box

Swipebox

28. Slides

SlidesJS is a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3 transitions.

slides

Slides

29. Glide

Glide.js is responsive and touch-friendly jQuery slider. Based on CSS3 transitions with JS fallback for older browsers. It’s simple, lightweight and fast. Designed to slide, no less, no more.

glide

Glide

30. FlickerPlate

A cool jQuery plugin that lets you flick through content. It is also fully responsive and touch enabled.

flicker-plate

FlickerPlate

31. One Page Scroll

Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin.

one-page-scroll

One Page Scroll

32. FlexSlider

FlexSlider is an awesome, fully responsive jQuery slider toolkit.

flex-slider

FlexSlider

33. Royal Slider

RoyalSlider is an image gallery and content slider plugin.

royal-slider

Royal Slider

34. Camera

Camera slideshow is an open source project, based on Diapo slideshow, but improved a lot.

camera

Camera

35. PhotoSwipe

PhotoSwipe is a self contained JavaScript library that can be easily integrated into your mobile websites.

photo-swipe

PhotoSwipe

36. Responsive Slides

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using elements inside a container.

responsive-slides

Responsive Slides

37. MasterSlider

Everything you ever wanted in an animated content and image slider, all packaged up into one awesome plugin!

master-slider

MasterSlider

38. Magnific Popup

Magnific Popup is a responsive lightbox & dialog script with a focus on performance and providing best experience for a user on any device.

magnific-popup

Magnific Popup

39. Justified

This is a jQuery plugin which arranges photos in a perfectly spaced grid, compensating for the different sizes of the photos. See a live demo here.

justified

Justified

40. Double Tap To Go

This is a concept for a multi-level navigation menu which works on mobile devices. To compensate the lack of a real hover event, the menu options get activated on double tap.

double-tap-to-go

Double Tap To Go

41. Menu-Aim

Menu-Aim is a jQuery plugin for dropdown menus that can differentiate between a user hovering over a dropdown item and trying to navigate into a submenu’s contents.

menu-aim

Menu-Aim

42. Menutron

Menutron transforms your navigation menus from a list to a select menu when resizing your browser. This is especially useful for navigation menu with lots of options.

menutron

Menutron

43. SlickNav

SlickNav transforms your navigation menus into a hamburger menu when resizing your browser.

slick-nav

SlickNav

44. Sidr

jQuery plugin for creating responsive side menus. They can be shown from the left or right side.

sidr

Sidr

45. Big Slide

BigSlide is a teeny tiny (~1kb compressed) jQuery plugin for creating off-screen slide panel navigation.

big-slide

Big Slide

46. FitVids

A lightweight, easy-to-use jQuery plugin for fluid width video embeds. FitVids automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design and it’s really ease to use.

FitVids

FitVids

47. Adobe Edge

Testing mobile layouts is a pain. To help you, Adobe has created Edge Inspect. It is an essential application for web developers and designers who need to preview their content across multiple mobile devices.

adobe-edge

Adobe Edge

48. Can I use …?

Not all CSS features are available on mobile devices. To make sure that no pieces of functionality are missing on mobile devices, you can use caniuse, which is the go-to web site for up-to-date browser support tables.

Can I use...?

Can I use…?

49. Am I Responsive?

“Am I Responsive?” helps you to see if your website is a responsive one or not. It is also a great way to take a quick screenshot with your page in a number of devices at once.

am-i-responsive

Am I Responsive?

50. Device Mode & Mobile Emulation

Google has also developed a way for testing mobile layouts. If you use Google Chrome, you can try Device mode & Mobile emulation right from your developer tools, or even try remote debugging on an android smartphone connected to your computer.

chrome-dev-tools

Device Mode & Mobile Emulation

Conclusion

We hope that you find all these responsive plugins and resources useful! They will give you a great start into responsive design, and a lot of tools for creating your next awesome design. Did we miss anything? Tell us in the comment section :)

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.

Learn more
Web Browser Frame DevKit Box Mouse Cursor
by Nick Anastasov

Nick is a JavaScript programmer who loves Node and all things HTML5. He is interested in photography and is the resident food expert at Tutorialzine's office.

1Share this post
2Read one more article
3Get your free book
Book Cover
jQuery Trickshots

Tutorialzine's advanced jQuery techniques book.

Download

8 Comments

  1. Allan says:

    Sorry but I can't believe bxslider is not on the list.

    1. Martin Angelov says:

      Thank you! bxslider looks like a great resource.

  2. Martin says:

    Zurb Foundation is a massive omission from this list - it is almost as popular as Bootstrap and the two of them combined are far more popular than all the others put together.

    You got Zurb's Ink platform though, which is cool.

    1. Martin Angelov says:

      Thank you for the addition! We should have included it.

  3. Andrew says:

    Lots of goodies on this list. Thanks for putting it together. A couple of other nice, simple frameworks for future reference: Layers CSS and Base

    1. Nick Anastasov says:

      Wow, these are great additions to the list. Thanks!

  4. Jay says:

    Semantic UI is missing in Framework section. i think is awesome for front-end developer. otherwise it's great collection...

  5. Raj Tyagi says:

    Masterslider rocks. Used many times over and I absolutely love it.

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links