35个实用的响应式网页设计工具箱

Powerful Frameworks

35. Bootstrap

It is a fast and easy framework for web development. With a sleek, powerful and an intuitive front-end frame work it offers tons of exciting feature to make your development life easier.

34. Gumby 960 Grid Responsive CSS Framework

If you want to lay out pages quickly and easily in a natural way, this is the framework for you and it can be customized and molded to fit your need and adapt any screen size.

33. Golden Grid System

Developers can use this system to split screen into 18 even columns. Off these 18, 16 can be used for development and designing purposes.

32. Semantic Grid System

This uses parametric LESS mixin or a SCSS mixin. It all depends on what framework you prefer to control the layout.

31. Ingrid

It is designed to reduce the use of classes on individual units. It is an easy way to customize a system.

30. Toast

This is a very simple CSS framework. With 12 columns the responsive grids makes the layouts a breeze. It is very easy to use and you won’t break anything.

29. HTML5 Boilerplate

If you are looking to build fast, adaptable and robust websites and application easily, this is the framework you can use to do so.

28. Wirefy

This particular framework was built on the concept of content first so it lets you create more functional and responsive wireframes.

27. Gridiculous

This is an HTML5 framework using which you can take your website from the highest resolution to 320px. You can make your website look good on other browsers.

26. Columnal

This is another CSS responsive grid system that will help desktop and mobile browsers to play nicely.

25. Gridless

This is an HTML5 and CSS3 boilderplate. You can use this to make your mobile responsive.

24. Skeleton

This particular boilerplate is for responsive and mobile friendly development and it is fairly easy to use.

23. Responsive Grid System

This particular framework is available in 12, 16 and 24 columns and it also has media queries for all standard devices, clearfix and optional reset.

22. Foundation

This is responsive front-end framework and is perhaps the most advanced one in the world; see for yourself.

The Fluid Grid Tools

21. Gridset

If you are looking to design grids, this particular framework will make it a breeze for you. Everything you need from PNGs to a CSS, Gridset can handle.

20. Responsive Calculator

You can turn your PSD into the start of your responsive website using this simple responsive calculator.

19. Gridpak

This tool was designed to help us create grids. It was designed by Erskine Design.

18. Simple Grid

If you are annoyed of horizontal scrollbars, this grid system will help you get rid of those. It is easy to understand and use with four different options for you to choose from.

17. Foldy960

Foldy960 is not a CSS framework. This is just a little kit to get you going if you are looking to make your 960.gs design responsive.

16. SUSY

This particular tool will let you create grids that are very powerful and still customizable and responsive.

Wireframes Resources

15. Responsive Web Design Sketch Sheets

This particular tool will help you see in real-time how your website looks in different resolutions. Using the tool is very easy all you need to do is download the zip file and you are good to go.

14. Responsive Wireframes

This experimental tool can be used in order to visualize how your responsive website design would look on different mobile and desktop browsers.

13. Style Tiles

You can communicate the evolution of a visual brand on the web. It contains all the nit-bits you would need to do so including fonts, colors and interface elements.

12. Multi-Device Design Prototype

This tool will provide you with several popular patterns for responsive websites so that you can know how people before you have handled the process of designing a responsive website.

JavaScript & JQuery Plugins

11. Adapt.Js

This is a JavaScript plugin which is a fantastic alternative to the CSS media queries. It is a very lightweight plugin.

10. Isotope

This is another jQuery plugin which can easily rearrange elements on a webpage when the browser window is resized.

9. Masonry

This particular jQuery plugin can be used to create adaptive layouts. The elements can also be rearranged in order to better fit on the website.

8. Respond.Js

Another lightweight and fast jQuery plugin that will let you enable responsive web design in browsers like IE.

7. TinyNav.Js

This is another jQuery plugin which should allow you to convert big navigation lists into small dropdown menus for ease and convenience.

6. Wookmark JQuery Plugin

Developers using this plugin can easily detect the browser and window size and the plugin will automatically rearrange elements for you.

Responsive Image and Text Tools

5. Adaptive Images

If you are looking to detect the screen size of your visitor and deliver an appropriately scale website, this is the tool for you.

4. Seamless Responsive Photo Grid

This tool will let you show images edge-to-edge. There will not be any gap left between the images themselves.

3. Picturefill

This is responsive image approach that you can use today with easy and fun.

2. Retina Images

This particular tool will provide you with retina images. Which means they will be shown 2x larger when viewed on high resolution screens on certain displays.

1. FitText

If you are looking to make your texts and headlines responsive to whatever device they may be used with, try this plugin out and let us know what you think.