No description, website, or topics provided.
JavaScript CSS HTML
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
icon
js
scss
svg
.gitignore
README.md
app.html
app.js
gulpfile.js
manifest.json
package.json

README.md

Pointbreak

http://pointbreak.construction/

A Chrome app to create custom breakpoints to test against when building websites.

Usage

  • Add custom sizes and reorder them in the left panel. And though you shouldn't design to a device I've added a few popular ones for previews. See Material Device Metrics for full list of device sizes.
  • When scrolling the stage, as opposed to an individual webview, hold the "option" or "alt" key. This prevents the webview from capturing the cursor focus.
  • Pointbreak uses Chrome Sync to remember your state so that when you reopen the app it will load where you left off.
  • Try it with Browsersync for synced scrolling and auto-injection of CSS.

Under the hood

Pointbreak uses Chrome webviews to render websites. They are similar to iframes but provide number of methods to add or retrieve data. They also do not suffer the same security restrictions that iframes do, so sites normally blocked to iframes will render inside Pointbreak.