### Install Devices.css via npm Source: https://context7.com/picturepan2/devices.css/llms.txt Install the library using npm for use with SCSS projects. Import the source files into your main SCSS entry point. ```bash npm install devices.css ``` ```scss // In your main SCSS entry point @import "node_modules/devices.css/src/devices"; ``` -------------------------------- ### Complete Landing Page Example with Devices.css Source: https://context7.com/picturepan2/devices.css/llms.txt This HTML snippet demonstrates a complete landing page layout featuring a MacBook Pro and an iPhone 14 Pro side-by-side, showcasing responsive design elements. Ensure the devices.min.css stylesheet is linked. ```html My SaaS Product
Dashboard on MacBook Pro
Dashboard on iPhone 14 Pro
``` -------------------------------- ### iPhone X Mockup with Video Source: https://context7.com/picturepan2/devices.css/llms.txt Renders a classic iPhone X with a wide TrueDepth notch. This example uses a video for the screen content and has a single silver color variant. ```html
``` -------------------------------- ### iPhone 14 Mockup (Product Red with Video) Source: https://context7.com/picturepan2/devices.css/llms.txt Renders an iPhone 14 with a notch cutout. This example uses a looping video for the screen content and specifies the 'Product Red' color variant. ```html
``` -------------------------------- ### Build with Gulp Commands Source: https://context7.com/picturepan2/devices.css/llms.txt The project includes a `gulpfile.js` for compiling SCSS, autoprefixing, formatting, and minifying CSS. Common build tasks are provided. ```bash # Compile src/devices.scss → dist/devices.css + dist/devices.min.css npx gulp # Compile library CSS only npx gulp css # Build the documentation site (pug → HTML + CSS) npx gulp web # Watch mode: recompile on every SCSS / Pug change npx gulp watch ``` -------------------------------- ### Apple HomePod Mockup Source: https://context7.com/picturepan2/devices.css/llms.txt Sculpted HomePod speaker with mesh-fabric texture rendered entirely in CSS gradients. ```html
``` -------------------------------- ### Include Devices.css Stylesheet Source: https://github.com/picturepan2/devices.css/blob/master/README.md Link the compiled Devices.css file in the section of your HTML to use the library. ```html ``` -------------------------------- ### Include Devices.css via CDN Source: https://context7.com/picturepan2/devices.css/llms.txt Link the compiled stylesheet directly into your HTML via a CDN or local file path. ```html ``` -------------------------------- ### Basic Device HTML Structure Source: https://github.com/picturepan2/devices.css/blob/master/README.md Use this HTML structure for any device, applying specific classes like 'device-iphone-x' for the model. The 'device-screen' class is where you place your screenshot or video. ```html
``` -------------------------------- ### iPhone 14 Pro Mockup (Default and Gold) Source: https://context7.com/picturepan2/devices.css/llms.txt Renders an iPhone 14 Pro with Dynamic Island. Use color variant classes like `device-gold` to change the frame finish. The screen content can be an image. ```html
My App
My App
``` -------------------------------- ### Using Video as Device Screen Source: https://context7.com/picturepan2/devices.css/llms.txt Replace `` with `