awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
marvelapp avatar

marvelapp/devices.css

0
View on GitHub↗
3,963 stars·598 forks·CSS·MIT·38 views

Devices.css

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.

Features

  • CSS Hardware Frames - Implements realistic hardware borders and bezels using standard CSS declarations to wrap web content.
  • CSS Hardware Simulations - Builds lightweight visual models of mobile devices using only CSS to avoid heavy image assets.
  • Hardware Shell Mockups - Provides realistic device bezels and frames to showcase how applications appear on different screen sizes.
  • Device Mockup Frames - Creates visual representations of smartphones, tablets, and laptops using customizable CSS frames.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI
CSS Variable Theming - Uses CSS custom properties to allow dynamic theming of device colors and physical dimensions.
  • Responsive Design - Allows visualization of how responsive designs adapt to various phone and tablet models within one layout.
  • Hardware Detail Rendering - Employs before and after pseudo-elements to create detailed hardware features like camera lenses and speaker grills.
  • CSS-Only UI Components - Ships visual interface elements and device wrappers that require no images or JavaScript to render.
  • Relative Layout Dimensions - Uses relative units like percentages and ems to maintain proportional device aspect ratios across screen sizes.
  • Star history

    Star history chart for marvelapp/devices.cssStar history chart for marvelapp/devices.css

    How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.

    Frequently asked questions

    What does marvelapp/devices.css do?

    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.

    What are the main features of marvelapp/devices.css?

    The main features of marvelapp/devices.css are: CSS Hardware Frames, CSS Hardware Simulations, Hardware Shell Mockups, Device Mockup Frames, CSS Variable Theming, Responsive Design, Hardware Detail Rendering, CSS-Only UI Components.

    Which projects share features with marvelapp/devices.css?

    Projects with overlapping indexed features include: pixelsign/html5-device-mockups — This project is an HTML5 device mockup library consisting of responsive hardware frames built with HTML and CSS. It… picturepan2/spectre — Spectre is a comprehensive CSS framework and UI utility toolkit designed for building responsive web interfaces. It… brain-bones/skeleton — Skeleton is a Svelte Tailwind UI toolkit and adaptive component library. It provides a utility-first design system for… arthelokyo/astrowind — Astrowind is a high-performance site framework and bootstrapping tool designed for building marketing sites,… bedimcode/responsive-portfolio-website-alexa — This project is a responsive portfolio website template designed to showcase professional background information and… 0wczar/airframe-react — Airframe-react is a Bootstrap UI component library and starter kit for building React-based admin dashboards and…

    Projects sharing features with Devices.css

    These projects share indexed features with Devices.css. Shared tags can include platform or build tooling; verify the primary use case before treating a result as a replacement.
    • pixelsign/html5-device-mockupspixelsign avatar

      pixelsign/html5-device-mockups

      3,694View on GitHub↗

      This project is an HTML5 device mockup library consisting of responsive hardware frames built with HTML and CSS. It provides stylized web elements that wrap digital content in realistic device borders to simulate how software appears on physical hardware. The library utilizes CSS-based hardware simulation to recreate device chassis and screen bezels. It employs a responsive-scale component hierarchy and viewport-constrained content areas to ensure that digital previews fit correctly within device frames across different screen sizes. The system manages visual presentation through CSS variabl

      CSS
      View on GitHub↗3,694
    • picturepan2/spectrepicturepan2 avatar

      picturepan2/spectre

      11,317View on GitHub↗

      Spectre is a comprehensive CSS framework and UI utility toolkit designed for building responsive web interfaces. It functions as a CSS component library that provides pre-styled interface elements and helper classes to facilitate frontend UI development. The framework is distinguished by a pure-CSS component architecture that avoids dependence on external JavaScript runtimes. It utilizes a SASS-based build pipeline that supports class prefixing, stylesheet pruning, and a variable-based theme system for creating custom design systems. The project covers a wide range of layout and interface ca

      CSS
      View on GitHub↗11,317
    • arthelokyo/astrowindarthelokyo avatar

      arthelokyo/astrowind

      5,756View on GitHub↗

      Astrowind is a high-performance site framework and bootstrapping tool designed for building marketing sites, professional portfolios, and high-conversion landing pages. It utilizes a utility-first CSS architecture and a component-based UI library to assemble responsive websites. The project specializes in conversion rate optimization through targeted templates for lead generation, product sales, subscription captures, and pre-launch teasers. It includes specific infrastructure for static blogging, utilizing markdown-based content modeling and rendering for long-form articles. The framework c

      Astroastroastro-blogastro-starter
      View on GitHub↗5,756
    • brain-bones/skeletonBrain-Bones avatar

      Brain-Bones/skeleton

      5,991View on GitHub↗

      Skeleton is a Svelte Tailwind UI toolkit and adaptive component library. It provides a utility-first design system for building reactive web interfaces, focusing on consistent themes and typography across various screen sizes. The toolkit combines pre-styled components with layout tools to support responsive UI design and rapid frontend prototyping. It enables the creation of adaptive user interfaces through a standardized set of utility classes for styling and layout. The system covers high-level capabilities in Svelte web development and Tailwind CSS styling, utilizing a flexible grid syst

      TypeScript
      View on GitHub↗5,991
    Compare all 30 related projects→