The most complete response Design resource library

CSS Responsive Framework

This section mainly introduces some of the latest CSS response framework, lighter, and not bad compatibility. (Foundation,skeleton is a more old-fashioned CSS response framework)

Girder

Girder uses the SASS silent classes (placeholders, which are not reflected in the output) to organize content in HTML, which can be used to handle some of the representation (presentational classes), such as "Unit_1of4″," Small-2″ , "Grid4″.

Cardinal

Cardinal is a small, "move first" concept of the CSS framework, the default style is very practical. Flexible font and responsive grid line systems.

Typeplate

Typeplate is a "typesetting starter tool". A simple sass/css library, can use the appropriate means to deal with the work.

Furatto

Furatto based on Sass, contains the JS plug-in, developed in the Coffeescript, so it is easy to read. The interaction is very strong, support a variety of devices.

Kraken

Lightweight, mobile priority for the idea of the template, suitable for front-end developers.

Gridism

Gridism is a simple response to the grid line system, very easy to use.

Sassaparilla

Sassaparilla uses sass and compass technology to make responsive web design easier. Focus on a better layout, to create a good reading rhythm. Make compiling easier.

Cool Kitten

Cool Kitten is a rolling Parallax response Framework (personal favorites)

Responsive boilerplate

Responsive boilerplate is extremely simple, very lightweight (2KB) CSS grid framework. Easy to understand and easy to use.

Javascript Response Plug-in

These scripts are either a small piece of code, or several files, to achieve the web design works of the response. Most automatic annotations, so it's easy to use.

Responsive elements

Responsive Elements Small JS library, can easily implement the response of elements.

Jpanelmenu

Jpanelmenu is a jquery plug-in, created by a panel menu. To ensure that the CSS animation better implementation.

Selectnav.js

Selectnav is a JS plug-in that can convert the site's navigation bar to a selectable pull-down menu. Combined with media Queries, it can save space for mobile devices.

Adapt.js

Adapt.js Lightweight JS file, in front of the browser load page, can be based on the width, intelligent decision and load the CSS file.

Masonry

Masonry is an excellent jquery plugin that can create dynamic, adaptable layouts. can help rearrange elements.

Royalslider ($)

Royalslider is a very useful jquery gallery or content scrolling plug-in, dynamic, responsive layout, support touch, very suitable for mobile end. Whether it is scroll bar, slide window or content scroll bar, gallery, video library can be used to achieve.

Ubermenu–wordpress ($16)

Ubermenu is a very friendly, highly customizable, responsive Mega Menu wordpress plugin.

Responsive Pricing tables–wordpress ($)

CSS3 responsive Web Pricing tables Grids for WordPress CSS3 price list, two Price table styles, 20 optional colors, options rich.

Responsive design--navigation chapter

The hardest part of response design is probably navigation. Even though your navigation menu is small, the design of the mobile side is still difficult. Traditional web design always places the navigation menu at the top of the page for users to browse. In response design, the situation is complex. In this link, several good solutions will be recommended.

Responsive menu Patterns

A Responsive Design approach for navigation (article)

Flexnav

Flexnav is a use of media queries and JS implementation of the multi-level menu, support touch, hover. Consistent with the "move first" concept.

Naver

Naver a jquery plugin for response-oriented navigation

Navigataur

Navigataur is a minimalist tool to help implement the responsive navigation menu.

Responsive design-image

How to choose picture size according to browser size and loading speed?

CSS Fluid Image Techniques for Responsive Site design (Article)

Dudley Storey created an excellent article on how to create a "scalable" image

Clown car technique for responsive Images

Estelle Weyl, who wrote an article on Scalable Vector Graphics (SVG), is lively and interesting.

Responsive IMG

Responsive IMG is a jquery plug-in that transforms the SRC attribute of the image, mainly based on the width of the container.

Responsive design Tools

Your site Responsive

Viewport Resizer

Viewport Resizer is an online tool that can test whether web design meets the standard of responsive design.

screenqueri.es

Screenqueri.es is a delicate response-testing tool. Be able to display your web design on more than 30 different kinds of devices.

Responsive Web CSS

Responsive web CSS makes responsive web layouts easier. Just add div, set the size on different devices.