/break-shot

Desktop app for capturing screenshots of responsive websites

Primary LanguageCSSMIT LicenseMIT

Break Shot

break shot

About

Break Shot is an amazing screen capture app for responsive websites. It detects all available resolutions and take screenshots of each one.

Features

  • Detects resolutions available in your website and take screenshots for each breakpoint
  • Take screenshots of your website at custom sizes, defined through the user interface
  • Support to a #breakshot element to be used as a screenshot canvas

Simple usage

Detecting a breakpoint

  1. Select source, it can be either a live URL or a local file
  2. Next
  3. Choose between auto sizing (break shot will find media-queries to define breakpoints) or custom size (it can be any resolution you want, e.g. 800 x 600, 1024 x 768)
  4. Next
  5. Select a file extension and your desired output file name.
  6. Click in Save File, choose output directory.

Generate ad banner

Create your banners using media-queries in diferents resolutions and user #breakshot selector.

Download

Here you can find the binaries to run in your preferred system.

How to contribute

  • If you found a bug, please create an issue with the bug label.
  • If yout miss a feature, don't hesitate to create a pull-request.

Development setup

git clone https://github.com/victorferraz/break-shot.git
cd break-shot
npm i
/Applications/nwjs.app/Contents/MacOS/nwjs .

Creators

Credits

Kudos to Marlos Carmo @marloscarmo who had the original idea for Break Shot.

License

Released under the MIT License.