Giter VIP home page Giter VIP logo

break-shot's Introduction

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.

break-shot's People

Contributors

javiercejudo avatar ruyadorno avatar victorferraz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

break-shot's Issues

Can't delete custom breakpoint

  • Can't delete custom breakpoint
  • Can't delete empty breakpoint fields
  • Can't proceed next step with empty breakpoint fields

breakshot-v2 2017-05-17 20-50-09

osx64.zip v1.1

Support for Linux

Please add support for Linux. Need this app in my Ubuntu 16.04. Please tell me if you're busy so I'll make one using Electron. 😄

Binary does not work on Windows

The distributed binary for Windows doesn't do much. When opened, it displays the attached screen. One can open a website by entering in the address space up top, but that's it. When going to www.google.be, and then clicking the hamburger menu (being the only button next to navigation buttons, I tried this) results in Developer Tools popping up, saying:

Uncaught ReferenceError: require is not defined (program):1

start

System tested is Windows 10 64bit. Binary tested is from both releases mentioned in GitHub (win32 & win64). I have installed Chromium/Firefox/Node/Gulp.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.