Skip to content
A small CSS library for adding responsive frames (mobile device, desktop computer, or browser toolbar) to images
Branch: master
Clone or download
Latest commit 7b6669d Sep 21, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo update readme and demo Sep 21, 2016
images update screenshots and aspect ratio documentation Jul 27, 2016
src build from latest source Sep 21, 2016
.gitignore
README.md update readme and demo Sep 21, 2016
bower.json fix bower Aug 3, 2016
gulpfile.js
package.json bump 1.5.3 Aug 3, 2016
screenshot-frames-basics.css build from latest source Sep 21, 2016
screenshot-frames-basics.min.css build from latest source Sep 21, 2016
screenshot-frames.css build from latest source Sep 21, 2016
screenshot-frames.min.css build from latest source Sep 21, 2016

README.md

ScreenshotFrames

v1.5.4

ScreenshotFrames is a small CSS library that lets you add browser and device frames around images (screenshots, for example) on an html page. All frames are fully responsive down to the narrowest standard smartphone width. And because every graphic element that resizes is either an svg (e.g. devices) or straight CSS (e.g. browser titlebar backgrounds and borders), the frames will always be crisp no matter how big or small you present them.

Check out the demo pen!
 

Use

Add the screenshot-frames.min.css stylesheet (or screenshot-frames-basics.min.css — see below), and then in the markup wrap the image with a screenshot frame class like

<div class="screenshot-framename">
	<img ... />
</div>

where "framename" is descriptive of the frame (e.g. .screenshot-ipad).

(Of course you can also use the unminified stylesheets, but really they're just included for Bower support.)

Restrictions

The .screenshot-framename must be 100% wide, can't have padding, and can't have any margins other than margin-bottom. Use a wrapping container to control width and margins as necessary.

 

Available Frames

screenshot-frames.min.css supports Chrome™, iPad Air®, iPhone®, Mac® monitor (Thunderbolt display), MacBook®, PC monitor (Dell™ Ultrasharp display), and Safari®.

If you don't need all that, consider using the lighter-weight screenshot-frames-basics.min.css, which only includes support for Safari, iPad, and iPhone.

You can also build your own custom set of frames (requires node): clone or download the repo, edit src/screenshot-frames-custom.less as necessary, and then in the ScreenshotFrames directory run

$ npm install
$ gulp build:custom

(Depending on your setup, you may need to do sudo npm install.) Your custom frame set will be saved as screenshot-frames-custom.min.css.

Browsers

  • Safari
    use .screenshot-safari
    image aspect ratio doesn't matter; container should be ≥ 310px wide

  • Chrome
    use .screenshot-chrome
    image aspect ratio doesn't matter; container should be ≥ 220px wide
    Supports the optional data-screenshoturl attribute. Use data-screenshoturl="this://text.appearsinthe.addressbar" (see the demo pen for an example)

Desktop

  • MacBook
    use .screenshot-macbook
    takes image with aspect ratio 393:245 (see #1)

  • Mac monitor (Thunderbolt display)
    use .screenshot-mac
    takes image with aspect ratio 16:9

  • PC monitor (Dell Ultrasharp display)
    use .screenshot-pc
    takes image with aspect ratio 16:9

Mobile

  • iPad Air (silver)
    use .screenshot-ipad
    takes image with aspect ratio 3:4

  • iPhone 6S (silver)
    use .screenshot-iphone
    takes image with aspect ratio 375:667

 


Roadmap

  • Chrome
  • Safari
  • iPad
    • w/ Mobile Safari
  • iPhone
    • w/ Mobile Safari
  • MacBook
  • Mac desktop
  • PC desktop
  • some Android™
    • w/ Chrome For Mobile
  • Firefox®
  • OS X® window

 

Contributing

Adding new frames is extremely easy, and PRs are welcome. For each new frame

  • add the stylesheet src/framename/screenshot-frame-framename.less

    • for base64 encoded background images (cf. Safari frame), use
      background-image: url(filepathrelativetostylesheet) (supports png and jpg)
    • for svg background images (cf. iPhone frame), use
      background-image: url('data:image/svg+xml;utf8,/* svg \*//* endinject */')
    • for mobile and desktop frames, use svg; for browser frames, use whichever is lighter
  • add relevant images and/or svgs to src/framename

  • in src/screenshot-frames-additional.less and src/screenshot-frames-custom.less

    • add the frame class where appropriate
    • import the stylesheet
  • add a demo to demo/demo.html

  • if appropriate, credit the illustrator in the README.md's "Acknowledgments"

Compile with

$ gulp config
$ gulp build

 

Acknowledgments

Android and Chrome are trademarks of Google Inc.
Dell is a trademark of Dell Inc.
iPad, iPad Air, iPhone, Mac, MacBook, OS X, and Safari are registered trademarks of Apple, Inc.
Firefox is a registered trademark of the Mozilla Foundation.

You can’t perform that action at this time.