Devices.css: Modern devices crafted in pure CSS.
npm install devices.cssDevices.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.
- Add more devices and form factors
- Add landscape support
- Add responsive support
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.
```
device-[device-color]
Also, there are optional 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.
You can custom Devices.css by modifing SASS .scss files located in src` folder.
- 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. ♥