Nested Parenthetical Madness

    @zilahir/html5-device-mockups

    3.2.5 • Public • Published

    Gitter GitHub release Bower npm License: MIT

    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.

    Keywords

    none

    Install

    npm i @zilahir/html5-device-mockups

    DownloadsWeekly Downloads

    37

    Version

    3.2.5

    License

    MIT

    Unpacked Size

    17 MB

    Total Files

    118

    Last publish

    Collaborators

    • zilahir