A Google Chrome extension for displaying responsive breakpoints view
JavaScript HTML CSS
Latest commit e9f4227 Mar 19, 2015 @sergeche sergeche Updated builder
Permalink
Failed to load latest commit information.
example Remove links from preview example Jul 4, 2014
lib Minor fixes in styles Jul 14, 2014
logo.sketch Ready to ship Jul 4, 2014
ui Minor fixes in styles Jul 14, 2014
.gitignore Finished web-site page Jun 26, 2014
.travis.yml
LICENSE.txt
README.md Added README Jul 4, 2014
favicon.ico Optimized example web-site Jul 1, 2014
gulpfile.js Minor tweaks in layout Jul 1, 2014
index.html
online.html Ready to ship Jul 4, 2014
package.json Rewritten gulp builder with new dependencies Jun 30, 2014
style.css Remove previews on small resolutions Jul 4, 2014

README.md

Emmet Re:View

Emmet Re:View is a small Google Chrome extension that finds responsive design breakpoints on your page and creates view for each breakpoint.

Features

  • Preview all responsive design breakpoints on a single page.
  • Sync scrolling.
  • Automatic viewport scaling for large views.
  • Manual viewport scaling for fine-tuning previews.
  • Online sharing of previews: show your colleagues and clients how your web-site * looks on different viewport widths.

See Emmet Re:View web-site for more info.

Troubleshooting

I see blank boxes instead of previews on my web-site

This may happen if you explicitly forbid your web-site to be displayed in iframes with X-Frame-Options meta tag or HTTP header. The only workaround right now is to remove this option. Future versions of Re:View extension may may automatically remove this option.

Sync scrolling is not working in online preview

This happens due to browser security restrictions (same-origin policy). Currently, there’s no workaround for this issue.

Building

Re:View uses Gulp for building. Simply clone this repo and run

npm install
./node_modules/.bin/gulp
--- or ---
gulp