css-device-frames/README.md

A collection of single-element, CSS-only application and device frames with support for multiple themes, customization via CSS custom properties, grid-based layouts, iframe elements, and scrolling content.

# css-device-frames

[![NPM](https://img.shields.io/npm/v/css-device-frames.svg?style=flat-square)](https://www.npmjs.com/package/css-device-frames)
[![GitHub Workflow Status (master)](https://img.shields.io/github/actions/workflow/status/jhildenbiddle/css-device-frames/test.yml?branch=master&label=checks&style=flat-square)](https://github.com/jhildenbiddle/css-device-frames/actions?query=branch%3Amaster+)
[![Codacy grade](https://img.shields.io/codacy/grade/250567c7cf2047999f0ff2bba69a45a6?style=flat-square)](https://app.codacy.com/gh/jhildenbiddle/css-device-frames/dashboard)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://github.com/jhildenbiddle/css-device-frames/blob/master/LICENSE)
[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/css-device-frames/badge)](https://www.jsdelivr.com/package/npm/css-device-frames)
[![Sponsor this project](https://img.shields.io/static/v1?style=flat-square&label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/jhildenbiddle)

A collection of single-element, CSS-only application and device frames with support for multiple themes, customization via CSS custom properties, grid-based layouts, `<iframe>` elements, and scrolling content.

- [Documentation](https://jhildenbiddle.github.io/css-device-frames)
- [Codepen Demo](https://codepen.io/jhildenbiddle/pen/zYzmzqX)

#### Examples

<p>
  <a href="https://jhildenbiddle.github.io/css-device-frames">
    <picture>
      <source srcset="https://raw.githubusercontent.com/jhildenbiddle/css-device-frames/master/docs/assets/img/screenshot.webp" type="image/webp">
      <img src="https://raw.githubusercontent.com/jhildenbiddle/css-device-frames/master/docs/assets/img/screenshot.png" alt="Screenshot of CSS device frames" width="790">
    </picture>
  </a>
</p>

## Features

- Single-element application and device frames
- Multiple themes and style options
- Customization via [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)
- Fluid and responsive frames
- [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) support for frame content
- Scrollable frame content
- `<iframe>` support for external frame content

#### Browser Support

<img src="https://raw.githubusercontent.com/jhildenbiddle/css-device-frames/master/docs/assets/img/chrome.svg" style="margin-right: 0.4em; vertical-align: text-bottom;"> Chrome 71+
<br>
<img src="https://raw.githubusercontent.com/jhildenbiddle/css-device-frames/master/docs/assets/img/edge.svg" style="margin-right: 0.4em; vertical-align: text-bottom;"> Edge 80+
<br>
<img src="https://raw.githubusercontent.com/jhildenbiddle/css-device-frames/master/docs/assets/img/firefox.svg" style="margin-right: 0.4em; vertical-align: text-bottom;"> Firefox 64+
<br>
<img src="https://raw.githubusercontent.com/jhildenbiddle/css-device-frames/master/docs/assets/img/safari.svg" style="margin-right: 0.4em; vertical-align: text-bottom;"> Safari 12.1+
<br>
<img src="https://raw.githubusercontent.com/jhildenbiddle/css-device-frames/master/docs/assets/img/ie.svg" style="margin-right: 0.4em; vertical-align: text-bottom;"> Not supported

## Usage & Options

See the [documentation site](https://jhildenbiddle.github.io/css-device-frames) for details.

## Sponsorship

A [sponsorship](https://github.com/sponsors/jhildenbiddle) is more than just a way to show appreciation for the open-source authors and projects we rely on; it can be the spark that ignites the next big idea, the inspiration to create something new, and the motivation to share so that others may benefit.

If you benefit from this project, please consider lending your support and encouraging future efforts by [becoming a sponsor](https://github.com/sponsors/jhildenbiddle).

Thank you! 🙏🏻

## Contact & Support

- Follow 👨🏻‍💻 **@jhildenbiddle** on [Twitter](https://twitter.com/jhildenbiddle) and [GitHub](https://github.com/jhildenbiddle) for announcements
- Create a 💬 [GitHub issue](https://github.com/jhildenbiddle/css-device-frames/issues) for bug reports, feature requests, or questions
- Add a ⭐️ [star on GitHub](https://github.com/jhildenbiddle/css-device-frames) and 🐦 [tweet](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fjhildenbiddle%2Fcss-device-frames&hashtags=css,developers,frontend) to promote the project
- Become a 💖 [sponsor](https://github.com/sponsors/jhildenbiddle) to support the project and future efforts

## License

This project is licensed under the MIT License. See the [LICENSE](https://github.com/jhildenbiddle/css-device-frames/blob/master/LICENSE) for details.

Copyright (c) John Hildenbiddle ([@jhildenbiddle](https://twitter.com/jhildenbiddle))