Devices.css - Modern devices in pure CSS

  • By Yan Zhu
  • Last update: Nov 26, 2022
  • Comments: 7

Devices.css

Devices.css - Modern devices in pure CSS

All devices are elegantly developed in pure CSS. The first are newly announced iPhone X and iPhone 8. More devices are coming. You can use these minimal devices in landing and screenshot showcase pages.

Devices

What's next

  • Add more devices and form factors
  • Add landscape support
  • Add responsive support

Getting started

Download the compiled and minified Devices.css files. Include devices.css located in /dist in your website or Web app <head> part.

<link rel="stylesheet" href="dist/devices.css">

Go to Demo page to copy the device HTML source code and paste it to anywhere you want. All devices use the same HTML structure with different device-[device-name] classes.

<div class="device device-iphone-x">
  <div class="device-frame">
    <img class="device-content" src="...">
  </div>
  <div class="device-stripe"></div>
  <div class="device-header"></div>
  <div class="device-sensors"></div>
  <div class="device-btns"></div>
  <div class="device-power"></div>
</div>

Also, there are optional device-[device-color] classes for different color variants.

You can add any screenshot or video with the device-content class. The resolution aspect ratios are based on real ones.

Custom

You can custom Devices.css by modifing SASS .scss files located in src folder.

Browser support

Devices.css uses Autoprefixer to make most styles compatible with earlier browsers. For best compatibility, these browsers are recommended:

  • Chrome (LAST 4)
  • Microsoft Edge (LAST 4)
  • Firefox (EXTENDED SUPPORT RELEASE)
  • Safari (LAST 4)
  • Opera (LAST 4)

Built with by Yan Zhu. Feel free to submit a pull request. Help is always appreciated.

Devices.css is completely free to use. If you enjoy it, please consider donating via Paypal for the further development.

Github

https://github.com/picturepan2/devices.css

Comments(7)

  • 1

    Modularize the css

    Are you planning on supporting importing the individual devices as they are needed?

    Kinda like (Bulma)[http://bulma.io/documentation/overview/modular/] with its .sass files - Would require everything to be rewritten as sass but I guess that would be easier to do early on?

  • 2

    Trying to put an mp4 file inside device-content

    Has anyone tried to show a video mp4 file inside the device-content. I tried adding it in index.html and also tried to replace background-image src file in css, but its an mp4, so of course this way didn't work either.

    Any suggestions or has anyone already successfully done this?

  • 3

    Add video in device content

    This commit tries to resolve #4 in a nice way. I have added the Iphone X promo video (mp4) in the Iphone X device content container without breaking the responsiveness. Similarly videos for other devices can be added too.

  • 4

    Continuous corners

    First of all thank you very much for producing such beautiful crafts of the device.

    I have observed a small problem that many of the device crafts are not continuously rounded, such as this iPhone 14 Pro.

    example

    There is an explanation about continuous corners at this link.

    I'm curious if this is due to a limitation in CSS itself?

  • 5

    apple-watch.scss missing $device-silver-panel variable.

    When using the apple watch device by itself on a page, it's missing the $device-silver-panel variable on line 33: border: 2px solid lighten($device-silver-panel, 2%);

  • 6

    Add run on repl.it badge to README

    This pull request adds a .replit file and a badge to the README. If you aren't familiar with Repl.it, it's a free cloud IDE that's a really valuable tool for a lot of programmers. This will let anyone quickly start editing Devices.css code without setting up a local dev environment or installing anything.

    Feel free to test it out here!
    Run on Repl.it

  • 7

    Devices won't scale for responsive

    I've spent a bunch of time trying to get these devices to scale when displayed on a mobile screen and can't seem to get them to work correctly. Using something like transform shrinks the device but also screws up any alignment and puts it off the page.