Skip to content

picturepan2/devices.css

Repository files navigation

Devices.css

Devices.css - Modern devices crafted 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

Phones

Computers

Tablets

Watches

Accessories

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-screen" 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-screen 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. ♥

About

Devices.css - Modern devices crafted in pure CSS

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published