HTML5 device mockups v3 📱 💻
Demo page is under construction
TODO
| Name | Status |
| --- | --- | --- | --- |
| create react components |
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
- 86 different device images
Devices
| Name | Filename | Orientations | Colors |
|---|---|---|---|
| Chromebook | Chromebook | portrait | black |
| Galaxy S3 | galaxyS3 | portrait, landscape | black, white |
| Galaxy S5 | galaxyS5 | portrait, landscape | black, white, gold |
| Galaxy Tab 4 | galaxyTab4 | portrait | black, white |
| HTC One M8 | HtcOneM8 | portrait, landscape | black |
| Huawei P8 | HuaweiP8 | portrait, landscape | gold |
| iMac | iMac | portrait | black |
| iPad | iPad | portrait, landscape | black, white |
| iPad Air 2 | iPadAir2 | portrait, landscape | black, white, gold |
| iPad Pro | iPadPro | portrait, landscape | black, white, gold |
| iPhone 6 | iPhone6 | portrait, landscape | black, white, gold |
| iPhone 6 Plus | iPhone6Plus | portrait, landscape | black, white, gold |
| iPhone SE | iPhoneSE | portrait, landscape | black, white, gold, pink |
| iPhone 5 | iPhone5 | portrait, landscape | black, white |
| iPhone 6 Hand | iPhone6Hand | portrait | black, white |
| iPhone 7 Hand | iPhone7Hand | portrait | black |
| iPhone 7 Hand 2 | iPhone7Hand_2 | portrait | black |
| iPhone 7 | iPhone7 | portrait, landscape | black, white, gold, pink, red |
| iPhone X | iPhoneX | portrait, landscape | black |
| Lumia 930 | Lumia930 | portrait, landscape | black, white |
| Macbook | Macbook | portrait | black, white, gold |
| Macbook 2015 | Macbook2015 | portrait | black, white, gold |
| MacbookPro | Macbook2015 | portrait | black |
| Pixel | Pixel | portrait | black, white |
| Samsung TV | SamsungTV | portrait | black |
| Surface Pro 3 | SurfacePro3 | landscape | black |
| Surface Studio | SurfaceStudio | portrait | black |
Integrating to your website:
Bower
bower install html5-device-mockups
npm
npm i html5-device-mockups
Old traditional way
<link rel="stylesheet" type="text/css" href="dist/device-mockups.min.css">
Usage
Use this example or grap 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>
FAQ
"I can not control the height of the device"
https://github.com/pixelsign/html5-device-mockups/issues/47
Created by:
This is a forked repository of pixelsign. due to it seems abandoned, and I took it up, willing to continue.
Currently
Richard Zilahi
Original
Tomi Hiltunen
Angelos Arnis
Benjamin Bortels
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.