Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
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
- iPhone X (Silver)
- iPhone 8 (Silver, Gold and Space Gray)
- Google Pixel (Very Silver, Quite Black and Really Blue)
- Samsung Galaxy S8 ( Midnight Black and Coral Blue)
- iPad Pro (Silver, Gold, Rose Gold and Space Gray)
- MacBook (Silver, Gold, Rose Gold and Space Gray)
- MacBook Pro (Silver and Space Gray)
- Surface Studio
- iMac Pro
- Apple Watch
What's next
- Add more devices and form factors
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-xxx classes.
<div class="device device-iphone-x">
<div class="device-frame">
<div class="device-content"></div>
</div>
<div class="device-stripe"></div>
<div class="device-header">
<div class="device-sensors"></div>
</div>
<div class="device-btns"></div>
<div class="device-power"></div>
</div>
You can add any content or screenshots to the device-content div. 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
Devices.css is completely free to use. If you enjoy it, please consider donating via Paypal for the further development.