#Responsify

This repository is a site template for designers to simulate responsive layouts with static comps or wireframes. When a set of layout comps are added to a designated folder in the site, a Grunt automation task will generate a corresponding HTML prototype that gathers the comps into a single responsive page.

###Required software and setup You'll need to install this software before using Responsify. This has been tested on Mac OS only.

1. Node.js runtime
2. Configure the Node Package Manager to run without the sudo command.
3. Grunt command line interface (CLI) via terminal:
   npm install -g grunt-cli
4. Homebrew package manager via terminal:
   ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
5. ImageMagick image processor via terminal:
   brew install imagemagick
6. GraphicsMagick image processor via terminal:
   brew install graphicsmagick

###Using Responsify

1. Gather your layout comps or wireframes and name the files using their corresponding breakpoint. The breakpoint should be the minimum density-independent pixel width (CSS pixel width) of the viewport. Example: Home@320.png, Home@640.png, ProductDetail@320.jpg, ProductDetail@640.jpg, etc. See note below regarding high resolution comps.
2. Create your new site by cloning this repository:
   git clone http://github.com/epassi/responsify "my-web-project-name"
3. Run npm install.
4. Run grunt. Build preview will open in browser.
5. Drag your files into the /layouts folder. Build preview will update in browser. Build update could take a few seconds, depending on file sizes and the number of files you drag at a time.
6. Resize the browser to see your layouts respond to the changing viewport.

###Using Responsify with high resolution comps Responsify uses the pixel width of your comp and the filename breakpoint to determine if the comp is intended for a high density display. If the comp width and breakpoint don't match, Responify assumes you're targeting a high density display. When naming a high resolution comp file, make sure the breakpoint is set to the CSS pixel width of the target viewport, not the pixel width of your comp.

Example: Apple Retina displays. Retina diplays have a 2:1 pixel ratio. If you create a high resolution comp that's 2000px wide, the breakpoint should be 1000. Your filename would be My_Web_Page@1000.png.

Example: super high density Android displays. Some Android devices can have pixel ratios as high as 3:1. If you create a high resolution comp that's 3000px wide, the breakpoint should be 1000. Your filename would be My_Web_Page@1000.png.

Responsify supports only one comp per layout. You can't supply multiple layout comps to address different display densities. However, Responsify will automatically generate a lower resolution version of your comp to ensure backward compatibility with older browsers.

###Sharing your prototype site The dist folder (generated by Grunt) contains the minimum set of files for displaying your prototype site. Host these files on a web server or zip up the folder and send via email.

###Version history

Version	Description	Last Update
1.3.3	Fix: support for filenames with single quotes.	2015 06 23
1.3.2	Improvements to index page and sample comps.	2015 03 02
1.3.1	Fix: support for filenames with spaces.	2015 02 26
1.3	Support for high density displays.	2015 02 21
1.2.2	Process changed comps only, not entire site.	2015 02 19
1.2.1	Improved console feedback.	2015 02 15
1.2	Support for multiple pages.	2015 02 13
1.1.1	Fix: removed nested loop that over-processed comps.	2015 02 13
1.1	Comps sliced for compatibility with Mobile Safari.	2015 02 09
1.0	Support for single page.	2015 02 05