Una colección de sólo dispositivos CSS-Devices. CSS

Vista prévia

Descripción

El Devices. CSS proporciona una colección de dispositivos móviles y de escritorio más populares (con colores variables & tamaños) creados con HTML y CSS puros.

Available devices:

• iPhone X (plateado)
• iPhone 8 (plata, oro y gris espacial)
• Google pixel 2 XL (negro)
• Google pixel (muy plateado, bastante negro y realmente azul)
• Samsung Galaxy S8 (negro de medianoche y azul coral)
• iPad Pro (plata, oro, oro rosa y gris espacial)
• Surface Pro
• Surface Book
• MacBook (plata, oro, oro rosa y gris espacial)
• MacBook Pro (plateado y gris espacial)
• Surface Studio
• iMac Pro
• Apple Watch

Funcionamiento

Importar la hoja de estilo principal Devices. CSS en el documento.

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

Crea el HTML (por ejemplo, iPhone X).

<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 la biblioteca CSS reemplazando las variables predeterminadas en el archivo SCSS.

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