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

• Victor Ferraz @victorferraz | Development
• Bruno Magalhães @brunomagalhaes | Design

Credits

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

License

Released under the MIT License.