50个最佳的响应式Web设计工具箱

jopen 12年前

我们都知道，智能手机，Androids，iPhone手机和平板电脑日益普及。由于其受欢迎程度，响应式的网站设计不仅是受欢迎的，但也是非常重要的。为了支持响应式网站设计和开发的整个过程，出现了许多网页设计工具。下面为大家介绍50个最佳的响应式Web设计工具箱。

Grid & Frameworks

Let’s start with Grid & Framework tools.

Columnal

Columnal is a great tool for making your grids flexible. So, when your grids are flexible your window will be resized with ease. This is a project of Pulp+Pixels having a pinch of cssgrid.net and code inspiration from 960.gs.

Skeleton

This tool is popular among designers and developers because it is simple and efficient to use. This tool basically prevails CSS framework so you will get a neat and easy documentation and the best part is, no Javascript here.

LessFramework 4

With LessFramework 4, responsive web development gets a lot easier. This is basically based on CSS media queries.

Semantic Grid System

This tool is basically meant to design grid layouts for responsive web sites. In order to give you the maximum proficiency, the Semantic Grid System uses pre-processed CSS extensions like LESS, SCSS or Stylus. Also, it gives developers an option to select widths and deal with pixels.

Golden Grid System

This is best for beginners and with Golden Grid System you can make your web pages look good with pixels from 240 to 2560.

320 and Up

This is again a beginner’s guide or a template for responsive website. It is basically a CSS media queries boilerplate and is quite different in comparison to other boilerplates.

Inuit.Css

The best part of Inuit.CSS is that it is very convenient for users. It is quite to the point but supports plugins for more help.

Gridless

This is a boilerplate which helps users in developing responsive websites with extraordinary typography. Gridless is great for newbies.

1140 CSS Grid

This grid system is designed by Melbourne designer Andy Taylor and the basic purpose of this tool is to make your design adaptable to various resolutions.

1KB CSS Grid

Tyler Tate takes the credit for this tool. With this you can set the number of columns.

Bootstrap

Bootstrap has a huge number of free UI elements, layouts, Javascript tools for users’ to download and they can be utilized in various responsive designing projects.

Fluid Grid Calculator

This is indeed a simple tool with a simple functionality. You can easily seize the CSS of your fluid grid website design.

Fluid Grids

This will help you in creating responsive layouts with 6-16 columns.

Flurid

This is a great tool and indeed a useful one. It is a cross-browser CSS grid framework with up to 16 columns.

Grid Set

This will help you in making grids of all kinds. Mark Boulton has introduced the beta version but it is a good one.

Gridpak

This is an online grid generator which helps user with the number of columns, padding, and gutter. Apart from this, user can also add custom breakpoints. The best part is that with Gridpak, you can download PNG grid templates.

SimpleGrid

As the name suggests, it is pretty simple and is developed by Michael Kuhn.

Susy

Sassy is another form of the Semantic Grid System.

Tiny Fluid Grid

This is an excellent web app which can accommodate you in determining the grid system of your website in an interactive way.

Variable Grid System

This is based on 960 grid system and allows user to design customized grids.

Sketch Sheets & Wireframes

Responsive Web Design SketchSheets

This tool makes mapping out and placements of the elements a lot easier.

Responsive Wireframes

Built with HTML and CSS, this tool will help you in visualizing your responsive website.

StyleTiles

It also helps you in analyzing how your website will look like.

JavaScript & JQuery Plugins

Adapt.js

This is a great alternative to CSS media queries. This is basically a small javascript library.

Isotope

This is a jQuery plugin useful for designing responsive websites. It helps in the rearrangement of elements on resizing.

Masonry

With this you can create adaptive responsive layouts. It also helps in rearrangement of the elements.

Respond.js

The main purpose of this script is to make your responsive website compatible for browsers like IE wo do not support CSS3 media queries.

TinyNav.js

This helps developers in creating small drop downs for long lists.

Wookmark JQuery Plugin

This is a great tool and functions to detect the size of the browser and fits the elements accordingly.

Testing & preview

ProtoFluid

It allows you to test your website in different resolutions.

Responsive.Is

This is again a great tool to test your responsive website for different devices. All you need to do is type in a URL.

Responsivepx.Com

It is yet again a testing tool however, the best part about Responsivepx.com is that it’s capable of resizing the website pixel by pixel.

Responsive Web Design Testing Tool

What could be better than viewing your design’s appearance for different devices on a single screen? Debugging just got easy.

ReView.js

Developed in Javascript, this tool makes viewing of your responsive website a lot easier.

Screenfly

With this, you can view your website on multiple devices. Also, it allows user scrolling and rotations with the ability of enabling and disabling it.

Screenqueri.Es

This tool is perfect for pixel testing. Apart from automatic testing, users can manually enter the size and test pixel by pixel.

The Responsinator

This tool helps users in testing device on all sorts of devices. Also, you can check the functionality in landscape and portrait mode.

Sliders

Blueberry

This is a great thing for responsive and fluid layouts.

Elastislide

This plugin will help in the automatic adjustment of your browser window according to the screen.

Responsive CSS3 slider

This is adaptable to any screen size and screen resolution without any hassle.

ResponsiveSlides.Js

This is an extremely lightweight plugin useful for creating a responsive slider. It also supports all browsers.