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.
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.
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.
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.
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.
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.
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