A Collection Of CSS Only Devices – devices.css

Author: picturepan2
Views Total: 276 views
Official Page: Go to website
Last Update: July 1, 2018
License: MIT


A Collection Of CSS Only Devices – devices.css


The devices.css provides a collection of most popular desktop and mobile devices (with variable colors & sizes) created using pure HTML and CSS.

Available devices:

  • iPhone X (Silver)
  • iPhone 8 (Silver, Gold and Space Gray)
  • Google Pixel 2 XL (Black)
  • 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)
  • Surface Pro
  • Surface Book
  • MacBook (Silver, Gold, Rose Gold and Space Gray)
  • MacBook Pro (Silver and Space Gray)
  • Surface Studio
  • iMac Pro
  • Apple Watch

How to use it:

Import the main stylesheet devices.css into the document.

<link rel="stylesheet" href="dist/devices.css">

Create the HTML (iPhone X for example).

<div class="device device-iphone-x">
  <div class="device-frame">
    your own content here
  <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 class="device-home"></div>

Config the CSS library by overriding the default variables in the SCSS file.

// Core variables
$primary-color: #5764c6 !default;
$primary-color-dark: darken($primary-color, 3%) !default;
$primary-color-light: lighten($primary-color, 3%) !default;
$secondary-color: lighten($primary-color, 40%) !default;
$secondary-color-dark: darken($secondary-color, 3%) !default;
$secondary-color-light: lighten($secondary-color, 3%) !default;
// Gray colors
$dark-color: #454d5d !default;
$light-color: #fff !default;
$gray-color: lighten($dark-color, 40%) !default;
$gray-color-dark: darken($gray-color, 20%) !default;
$gray-color-light: lighten($gray-color, 20%) !default;
$bg-color: lighten($dark-color, 66%) !default;
$bg-color-dark: darken($bg-color, 3%) !default;
$bg-color-light: $light-color !default;
// Sizes
$layout-spacing: .4rem !default;
$layout-spacing-sm: .2rem !default;
$layout-spacing-lg: .8rem !default;
// Responsive breakpoints
$size-xs: 480px !default;
$size-sm: 600px !default;
$size-md: 840px !default;
$size-lg: 960px !default;
$size-xl: 1280px !default;
$size-2x: 1440px !default;

See also  Pure CSS Material Design Floating Input Placeholder

Leave a Reply

Your email address will not be published. Required fields are marked *