npm install devices.css

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

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.

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.


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