A Collection Of CSS Only Devices – devices.css

Preview:

Description:

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

Available devices:

• iPhone 14 Pro
• iPhone 14
• iPhone X (Silver)
• iPhone 8 (Silver, Gold and Space Gray)
• iPhone 1st gen
• Google Pixel 6 Pro (White, Gold, and Black)
• 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
• Surface Studio
• MacBook (Silver, Gold, Rose Gold, and Space Gray)
• MacBook Pro (Silver and Space Gray)
• iMac Pro
• Apple Watch Ultra
• Apple Watch 8
• HomePod
• Pro Display XDR

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>
  <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>
</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;

Changelog:

09/14/2022

• Added iPhone 1st gen

09/11/2022

• Added iPhone 14

09/09/2022

• Added iPhone 14 Pro

v0.2.0 (09/07/2022)

• Update CSS styles