HTML5 device mockups v4 📱💻

You can view the demo page here: https://pixelsign.github.io/html5-device-mockups/

Use on...

• Your website / splash screen

For...

• Displaying photos
• Displaying screenshots of your app(s)
• Displaying reference works / illustrations
• Displaying a content rotator / slideshow
• Embedding a JavaScript app inside the device
• Embedding a YouTube video

Why?

• Looks cool
• Attracts customers
• Makes your site look professional
• Give people the idea that your app/site works on mobile
• Give the impression that your illustrations are meant for web/mobile
• Lots of screenshots in just one "device"

Features:

• Maintains the device's aspect ratio when scaled
• Perfectly aligned screen content containers
• Some devices have "home button" layer defined for possible click event bindings
• Multiple color schemes
• Multiple orientations
• 99 device frames across 27 devices
• Notched iPhones (X, XS, XS Max) clip screen content to the real screen shape, notch and corners included

Devices marked Obsolete are long out of support and rarely seen any more. They still work and stay in the package for existing users.

bower install html5-device-mockups

Version 4 is not on the npm registry yet: npm i html5-device-mockups still installs 3.2.1 from 2018. Until 4.0.0 is published there, install it straight from GitHub:

npm i github:pixelsign/html5-device-mockups#4.0.0

The files end up in node_modules/html5-device-mockups/ as usual, so nothing else changes.

<link rel="stylesheet" type="text/css" href="dist/device-mockups.min.css">

Use this example or grab the code from the HTML generator on our demo site:

<div class="device-wrapper">
  <div class="device" data-device="iPhone5" data-orientation="portrait" data-color="black">
    <div class="screen">
      <!-- PUT CONTENTS HERE -->
    </div>
    <div class="button">
      <!-- You can hook the "home button" to some JavaScript events or just remove it -->
    </div>
  </div>
</div>

The CSS in dist/ is compiled from src/scss/ with Dart Sass:

npm install
npm run build   # writes dist/device-mockups.css and dist/device-mockups.min.css
npm run watch   # rebuilds dist/device-mockups.css on change

To add a device, add its rows to $devicesList in src/scss/devices.scss (image size, screen insets and home-button insets are in pixels of the source PNG) and run the build.

To preview the demo page locally, serve the folder with any static server, e.g. python3 -m http.server.

Tomi Hiltunen

• tomi@innovaniac.com
• http://innovaniac.com

Angelos Arnis

• angelos.arnis@gmail.com
• https://arn.is/

Benjamin Bortels

• moin@benjaminbortels.de
• https://benjaminbortels.de

Credits for the original graphical renderings of the devices used in this package are found in a separate file which is provided with this package.