CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

Projects

Progress value is 30%

Devices

A collection of CSS tech devices.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

How to

The Devices component is used to display (CSS powered) tech devices. Select a device (phone/tablet/browser/laptop), copy its code, and paste it in your web page!

To upload your artwork, replace the SVG element of the demo (e.g., with an <img> element), and remember to update the appropriate image-ratio CSS custom property:

:root {
  // phone
  --dev-phone-radius: 15%;
  --dev-phone-img-ratio: 0.56; // width:height (e.g., 750:1334)

  // tablet
  --dev-tablet-radius: 6%;
  --dev-tablet-img-ratio: 0.75; // width:height (e.g., 2048:2732)

  // browser
  --dev-browser-radius: 2%;
  --dev-browser-img-ratio: 1.6; // width:height (e.g., 1920:1200)

  // laptop
  --dev-laptop-radius: 3%;
  --dev-laptop-img-ratio: 1.6; // width:height (e.g., 1920:1200)
}

Some devices include additional options (modifiers):

Phone

  • choose between the .dev-phone--light-top and .dev-phone--light-front modifiers to change the light direction (and affect the shadow appearance).
  • add the class .dev-phone--landscape to change the orientation (if you do so, remember to update your artwork as well).

Tablet

  • choose between the .dev-tablet--light-top and .dev-tablet--light-front modifiers to change the light direction (and affect the shadow appearance).
  • add the class .dev-tablet--landscape to change the orientation (if you do so, remember to update your artwork as well).

Browser

  • choose between the .dev-browser--light-top and .dev-browser--light-front modifiers to change the light direction (and affect the shadow appearance).

Changelog

  • ✅ Component created
    🗓 July 11, 2019

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us