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
.sass
files - 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
a0eea46
0.2.2980e0bf
Prevent overwriting previously decoded tokens3c8a373
0.2.176abc93
Switch to GitHub workflows746ca5d
Fix issue where decode throws - fixes #6486d7e2
Update license (#1)a650457
Tidelift tasks66e1c28
Meta 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 rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will 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 version
will 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 dependency
will 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 labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will 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-panel
variable on line 33:border: 2px solid lighten($device-silver-panel, 2%);
Add run on repl.it badge to README
This pull request adds a
.replit
file 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!
