defram

CSS device frames.
Demo

Get started

Download and add the distributed CSS to the head of your document.

<link rel="stylesheet" href="/css/defram.min.css">

Or use CDN like jsDelivr.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/defram/dist/defram.min.css">

Usage

More examples on demo page.

Default is medium sized white phone with portrait orientation.

<div class="device">
  <img src="..." alt="">
</div>

Enable image scrolling with .device-scroll and extra nested div.

<div class="device device-scroll">
  <div>
    <img src="..." alt="">
  </div>
</div>

Embed iframe with live resource.

<div class="device device-scroll">
  <iframe src="..."></iframe>
</div>

Modificator classes

• device-tablet
• device-laptop
• device-desktop
• device-landscape
• device-scroll (extra nested div required)
• device-scroll-thin
• device-black
• device-silver
• device-button-round
• device-button-square
• device-button-long
• device-xxs
• device-xs
• device-s
• device-l
• device-xl
• device-xxl

Browser Support

• IE 10+ (CSS object-fit is not supported, so image can be distorted)
• Edge
• Up-to-date versions of Chrome, Firefox, Opera, Safari
• iOS 6+
• Android 4+

License

MIT