Devices.css
Devices.css - Modern devices in pure CSS
All devices are elegantly developed in pure CSS. The first are newly announced iPhone X and iPhone 8. More devices are coming. You can use these minimal devices in landing and screenshot showcase pages.
Devices
- iPhone X (Silver)
- iPhone 8 (Silver, Gold and Space Gray)
- Google Pixel 2 XL (Black)
- Google Pixel (Very Silver, Quite Black and Really Blue)
- Samsung Galaxy S8 (Midnight Black and Coral Blue)
- iPad Pro (Silver, Gold, Rose Gold and Space Gray)
- Surface Pro
- Surface Book
- MacBook (Silver, Gold, Rose Gold and Space Gray)
- MacBook Pro (Silver and Space Gray)
- Surface Studio
- iMac Pro
- Apple Watch
What's next
- Add more devices and form factors
- Add landscape support
- Add responsive support
Getting started
Download the compiled and minified Devices.css files. Include devices.css located in /dist in your website or Web app <head> part.
<link rel="stylesheet" href="dist/devices.css">
Go to Demo page to copy the device HTML source code and paste it to anywhere you want. All devices use the same HTML structure with different device-[device-name] classes.
<div class="device device-iphone-x">
<div class="device-frame">
<img class="device-content" src="...">
</div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
</div>
Also, there are optional device-[device-color] classes for different color variants.
You can add any screenshot or video with the device-content class. The resolution aspect ratios are based on real ones.
Custom
You can custom Devices.css by modifing SASS .scss files located in src folder.
Browser support
Devices.css uses Autoprefixer to make most styles compatible with earlier browsers. For best compatibility, these browsers are recommended:
- Chrome (LAST 4)
- Microsoft Edge (LAST 4)
- Firefox (EXTENDED SUPPORT RELEASE)
- Safari (LAST 4)
- Opera (LAST 4)
Built with
Devices.css is completely free to use. If you enjoy it, please consider donating via Paypal for the further development.
Modularize the css
Are you planning on supporting importing the individual devices as they are needed?
Kinda like (Bulma)[http://bulma.io/documentation/overview/modular/] with its
.sassfiles - Would require everything to be rewritten as sass but I guess that would be easier to do early on?Trying to put an mp4 file inside device-content
Has anyone tried to show a video mp4 file inside the device-content. I tried adding it in index.html and also tried to replace background-image src file in css, but its an mp4, so of course this way didn't work either.
Any suggestions or has anyone already successfully done this?
Add video in device content
This commit tries to resolve #4 in a nice way. I have added the Iphone X promo video (mp4) in the Iphone X device content container without breaking the responsiveness. Similarly videos for other devices can be added too.
Bump decode-uri-component from 0.2.0 to 0.2.2
Bumps decode-uri-component from 0.2.0 to 0.2.2.
Release notes
Sourced from decode-uri-component's releases.
Commits
a0eea460.2.2980e0bfPrevent overwriting previously decoded tokens3c8a3730.2.176abc93Switch to GitHub workflows746ca5dFix issue where decode throws - fixes #6486d7e2Update license (#1)a650457Tidelift tasks66e1c28Meta tweaksDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebasewill rebase this PR@dependabot recreatewill recreate this PR, overwriting any edits that have been made to it@dependabot mergewill merge this PR after your CI passes on it@dependabot squash and mergewill squash and merge this PR after your CI passes on it@dependabot cancel mergewill cancel a previously requested merge and block automerging@dependabot reopenwill reopen this PR if it is closed@dependabot closewill close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major versionwill close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor versionwill close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependencywill close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labelswill set the current labels as the default for future PRs for this repo and language@dependabot use these reviewerswill set the current reviewers as the default for future PRs for this repo and language@dependabot use these assigneeswill set the current assignees as the default for future PRs for this repo and language@dependabot use this milestonewill set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Continuous corners
First of all thank you very much for producing such beautiful crafts of the device.
I have observed a small problem that many of the device crafts are not continuously rounded, such as this iPhone 14 Pro.
There is an explanation about continuous corners at this link.
I'm curious if this is due to a limitation in CSS itself?
apple-watch.scss missing $device-silver-panel variable.
When using the apple watch device by itself on a page, it's missing the
$device-silver-panelvariable on line 33:border: 2px solid lighten($device-silver-panel, 2%);Add run on repl.it badge to README
This pull request adds a
.replitfile and a badge to theREADME. If you aren't familiar with Repl.it, it's a free cloud IDE that's a really valuable tool for a lot of programmers. This will let anyone quickly start editing Devices.css code without setting up a local dev environment or installing anything.Feel free to test it out here!
