Modern Device Mockups With Devices.css

Devices.css enables developers the ability to easily incorporate modern device mockups directly into their project. Developed purely in CSS, Devices.css is a great library to showcase apps, web pages, screenshots, and more. It currently supports some notable devices such as the iPhone X (basically the iPhone 11), MacBook Pro, iPad Pro, Surface Book, etc.

Include Devices.css in your Project

To include Devices.css into your project, simply clone the repository from GitHub and copy the devices.css or devices.min.css (if you prefer a minified version) to your applications assets. Then, make sure to include it the <head> section of your application like <link rel=”stylesheet” href=”mypath/devices.css”>. You are now ready to start using Devices.css!

Start using Devices.css

Now that it has been added to your project, all you need is a few lines of HTML to start using Devices.css. Below is the HTML code to display an iPhone X on your web page.

<div class="device device-iphone-x">
  <div class="device-frame">
    <img class="device-content" src="assets/screenshot.jpg">
  </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>

Open your file in the browser and you’ll see that you’ve created your first iPhone X mockup with only HTML & CSS!

Image for post

#ux #css #ui #html #programming

Include Devices.css in your Project

Start using Devices.css

medium.com

Modern Device Mockups With Devices.css