# marvelapp/devices.css

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/marvelapp-devices-css).**

3,963 stars · 598 forks · CSS · MIT

## Links

- GitHub: https://github.com/marvelapp/devices.css
- awesome-repositories: https://awesome-repositories.com/repository/marvelapp-devices-css.md

## Description

devices.css is a library of pure CSS components used to render responsive device frames and hardware mockups. It provides a collection of styles that create visual representations of smartphones, tablets, and laptops without the use of external images or JavaScript.

The project enables the simulation of hardware borders and bezels through a system of CSS-based frames and mockups. These components allow for the visualization of responsive designs and UI components across various screen sizes and device models.

The library utilizes CSS custom properties for theming colors and dimensions, employing relative units and pseudo-elements to render hardware details such as camera lenses and speaker grills. These styles support different hardware orientations and model switching via CSS classes.

## Tags

### User Interface & Experience

- [CSS Hardware Frames](https://awesome-repositories.com/f/user-interface-experience/css-hardware-frames.md) — Implements realistic hardware borders and bezels using standard CSS declarations to wrap web content.
- [Device Mockup Frames](https://awesome-repositories.com/f/user-interface-experience/device-mockup-frames.md) — Creates visual representations of smartphones, tablets, and laptops using customizable CSS frames. ([source](https://github.com/marvelapp/devices.css#readme))
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Uses CSS custom properties to allow dynamic theming of device colors and physical dimensions.
- [Responsive Design](https://awesome-repositories.com/f/user-interface-experience/responsive-design.md) — Allows visualization of how responsive designs adapt to various phone and tablet models within one layout.
- [Hardware Detail Rendering](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/structural-pseudo-class-variants/pseudo-element-injections/hardware-detail-rendering.md) — Employs before and after pseudo-elements to create detailed hardware features like camera lenses and speaker grills.

### Part of an Awesome List

- [CSS Hardware Simulations](https://awesome-repositories.com/f/awesome-lists/devtools/css-only-icons/css-hardware-simulations.md) — Builds lightweight visual models of mobile devices using only CSS to avoid heavy image assets.
- [Hardware Shell Mockups](https://awesome-repositories.com/f/awesome-lists/devtools/hardware-simulation/hardware-shell-mockups.md) — Provides realistic device bezels and frames to showcase how applications appear on different screen sizes.

### Web Development

- [CSS-Only UI Components](https://awesome-repositories.com/f/web-development/css-development-utilities/css-only-ui-components.md) — Ships visual interface elements and device wrappers that require no images or JavaScript to render.
- [Relative Layout Dimensions](https://awesome-repositories.com/f/web-development/sizing-unit-systems/relative-layout-dimensions.md) — Uses relative units like percentages and ems to maintain proportional device aspect ratios across screen sizes.