A Google Chrome extension for displaying responsive breakpoints view
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
lib
logo.sketch
ui
.gitignore
.travis.yml
LICENSE.txt
README.md
favicon.ico
gulpfile.js
index.html
online.html
package.json
style.css

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