repository·master·Indexed 25 days ago
https://github.com/picturepan2/devices.cssA collection of modern device mockups including phones, computers, tablets, watches, and accessories crafted in pure CSS. Designed for landing pages and screenshot showcases, it provides specific CSS classes for various form factors and supports customization via SASS.
To use Devices.css in your website or web application, download the compiled and minified files from the repository and include the devices.css file (located in the /dist directory) in your <head> section.
<link rel="stylesheet" href="dist/devices.css">.scss files located in the src folder of the repository.All devices in Devices.css share a common HTML structure. To render a device, use a container div with the class device followed by a specific device class (e.g., device-iphone-x). You can also apply optional device-[device-color] classes for different color variants.
To display content inside the device, place an <img> or <video> with the device-screen class inside the .device-frame div. The aspect ratios are designed to match real-world device resolutions.
<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>Devices.css provides CSS classes for various form factors. While the full list is available on the official demo site, the following categories are supported:
device-iphone-14-pro, device-iphone-x, device-google-pixeldevice-macbook-pro, device-imac, device-surface-bookdevice-ipad-pro, device-surface-pro-2017device-apple-watch-ultradevice-homepod, device-pro-display-xdrAdditionally, use device-[device-color] for color variants.