Bricss: Simple responsive design test page

bricss:

There are some pretty complex testing tools for responsive designs out there. I even see people constantly resizing their browser window using on-screen rulers. The easiest approach to me is just a simple page with a bunch of iframes, like Matt Kersley’s test page. Because I always ended up…

Source: bricss

Initializr is an HTML5 templates generator created by Jonathan Verrecchia to help you getting started with a new web project based on HTML5 Boilerplate. Initializr will generate for you a clean customizable template with just what you need to start!
View Separately

Initializr: With Great Templates Comes Great Responsivity - Initializr

Initializr is an HTML5 templates generator created by Jonathan Verrecchia to help you getting started with a new web project based on HTML5 Boilerplate. Initializr will generate for you a clean customizable template with just what you need to start!

Source: initializr.com

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17” laptop screen or an iPhone.
View Separately

Skeleton's Base Grid is a Variation of 960 Grid System - Skeleton

Skeleton Employs Media Queries to Serve the Scalable Grid - Skeleton

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17” laptop screen or an iPhone.

Source: getskeleton.com

Golden Grid System splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.. While the column widths in Golden Grid System are proportional to the screen’s width, the widths of its gutters (the spaces between columns) are proportional to the page’s font-size, specified in ems. Responsive layouts often require you to change the font-size at certain screen widths, for example to make the text easier to read on huge monitors, or to make the text fit better onto narrow mobile screens. This can make the proportions of your layout feel off, especially if you’re using a baseline grid. Golden Grid System’s zoomable baseline grid gets around this problem.
View Separately

Four Features - Columns, Gutters, a Baseline and a Script - Golden Grid System

Golden Grid System splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design..

While the column widths in Golden Grid System are proportional to the screen’s width, the widths of its gutters (the spaces between columns) are proportional to the page’s font-size, specified in ems.

Golden Grid System - A Folding Grid for Responsive Design

Responsive layouts often require you to change the font-size at certain screen widths, for example to make the text easier to read on huge monitors, or to make the text fit better onto narrow mobile screens. This can make the proportions of your layout feel off, especially if you’re using a baseline grid. Golden Grid System’s zoomable baseline grid gets around this problem.

Source: goldengridsystem.com

ProtoFluid - Rapid Prototyping of Adaptive CSS and Responsive Design. Prototype CSS on a multitude of device screen sizes, orientations and browsers. Preview adaptive designs and target CSS3 compliant browsers using Media Queries. Particularly suited to the early development of fluid layout based web applications. Use all your favourite web browser development tools like Firebug. Supports iPad for webkit, touch-based environment testing.
View Separately

ProtoFluid, Rapid Prototyping of Adaptive CSS and Responsive Design

ProtoFluid - Rapid Prototyping of Adaptive CSS and Responsive Design.

Prototype CSS on a multitude of device screen sizes, orientations and browsers.

Preview adaptive designs and target CSS3 compliant browsers using Media Queries.

Screenshot - ProtoFluid, Rapid Prototyping of Adaptive CSS and Responsive Design

Particularly suited to the early development of fluid layout based web applications.

Use all your favourite web browser development tools like Firebug.

Supports iPad for webkit, touch-based environment testing.

Source: protofluid.com