Devices.css - Modern devices in pure CSS

  • By Yan Zhu
  • Last update: Jan 9, 2023
  • 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

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 5

    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?

  • 6

    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%);

  • 7

    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