10 Tools for Designing Responsive websites

With a wide variety of devices available for viewing web content, responsive design has become a necessity rather than a feature of a website. Below are some frameworks and tools that will help you in designing advanced responsive websites for any viewing device.

ZURB Foundation

Definitely one of my favorite responsive frameworks. Now in version 4, Foundation has now adopted a mobile first strategy. This means that now you can build for small devices first, and then as devices get larger and larger, layer in more complexity. The framework included predefined UI elements and over a dozen single page templates to kick-start your responsive design.

Twitter Bootstrap

Another widely used frontend framework for creating websites and web applications. Contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other interface components, as well as optional JavaScript extensions. Since version 2.0 it also supports responsive design. Both Foundation and Bootstrap allow you to customize the framework download depending on the components you require.

GroundworkCSS

Built from the ground up with the incredibly powerful CSS preprocessor Sass, GroundworkCSS offers some advanced responsive layout techniques. The framework features an incredibly flexible, nestable, fluid grid system and supports any columns in any fractional amount from halves to twelfths. The result is a framework that works for virtually any imaginable modern layout. GroundworkCSS comes with a large number of UI elements which makes the creation of web pages a breeze.

xyCSS

xy.css is a lightweight CSS template for creating semantic HTML5 designs on a responsive liquid matrix. At its heart, xy.css neutralizes rogue browser styles, combines horizontal and vertical grids, and provides a flexible template for responsive design. xy.css brings together the best CSS techniques from around the Web and integrates them into a single, powerful stylesheet template. The site itself ( xyCSS.com ) is built with WordPress, HTML5, CSS3 and of course xy.css. To help visualize the responsive, grid-based design, the site includes numerous on-page browser hints: current browser width, buttons for showing/hiding the grid, current @media rules.

Centurion

Built using SASS and CSS3 media queries, Centurion is a responsive web framework that scales with your device. No longer do you need to worry about the screen size of an iPhone or an Android tablet since Centurion does the work for you. The framework comes integrated with several JavaScript libraries, such as, jQuery, Coffeescript, Craydent and more. It includes a 960px grid (that scales down to 320px), can handle image scaling and has a navigation with desktop and mobile versions. There are also styles for CSS-only buttons and tables. The framework is easy to learn and customizable (thanks to SASS).

Jetstrap for Bootstrap

A web-based interface building tool for Twitter Bootstrap. Built for developers and designers, Jetstrap helps you get awesome websites up and running fast, with less work and digging through docs. Features a drag-and-drop GUI tools and components to create your responsive Bootstrap design. This is a subscription based service with a free account available if you need to try out the features before you buy.

Layoutit

Like Jetstrap Layoutit helps you create your frontend code quickly with Bootstrap using a Drag & Drop Web Interface Builder. It takes every element and component of Bootstrap to make your frontend coding easier without you needing to be an expert in javascript, html5 or css3. All the designs are Responsive and Fluid. Note that Layoutit is not a site-builder but a kind of a scaffolding to kick-start your front-end design.

Pears

Not directly related to responsive design, Pear enables you to collect, test, and experiment with interface pattern pairings of CSS & HTML. Pears is an open source WordPress theme, enabling people like you to get your own pattern library up and running quickly. The WordPress theme allows you as a team to share common HTML/CSS design patterns.

enquire.js

A lightweight, pure JavaScript library for responding to CSS media queries. In responsive design, CSS media queries can only take you so far. enquire.js allows you to harness media queries in JavaScript, giving you the tools to create more advanced responsive sites. More important, it does not have any dependencies, not even jQuery.

Reverie

A extremely versatile HTML5 WordPress framework based on ZURB’s Foundation. Reverie Framework inherits all the cool features from Foundation, and packs with several other interesting features to optimize the experience for WordPress and HTML5. Including customized output for WordPress menus and caption. Reverie utilizes Foundation’s grid to implement layouts. With the power of Foundation, Reverie uses media query to adjust for all kinds of devices, including phones, tablets and computers. Reverie is also optimized for iPhone and iPad

via code-diesel http://www.codediesel.com/design/10-tools-for-designing-responsive-websites/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+Code-diesel+%28code-diesel%29