Devices.css - A Prototype CSS library
While Surfing the internet I founded a CSS library called devices.css it's a prototype CSS library that has built-in CSS style rules for different types of devices. ( Like iPhones, Samsung devices etc. )
If you want to showcase anything on a mobile device on your web page you can use this useful CSS library. Devices.css, not only provides you with the CSS code but also provides you with the HTML markup so that you don't have to write anything.
Here is the demo of this tremendous work.
Just copy and paste the code and get the prototype of any mobile device on your web page even if you want to import a laptop or tablet, it's also included in this library.
So if you want to create an App Store or if you have your mobile application and you want to showcase it on your website, this is the thing you need.
You can use this CSS library to show the screenshots of your mobile app in the mobile prototype. Special thanks to the developer of this CSS library who developed this amazing thing for web designers.
So, for example, if we want to include or add iPhone X prototype in our web page you can follow the example below.
First you need to download the CSS library and upload it to your hosting. You can also use a CDN network to assess this library as it's available on GitHub. (Download link for devices.css | https://github.com/marvelapp/devices.css)
Now you need to add the HTML markup for iPhone X device to your web page.
<div class="marvel-device iphone-x">
<div class="notch">
<div class="camera"></div>
<div class="speaker"></div>
</div>
<div class="top-bar"></div>
<div class="sleep"></div>
<div class="bottom-bar"></div>
<div class="volume"></div>
<div class="overflow">
<div class="shadow shadow--tr"></div>
<div class="shadow shadow--tl"></div>
<div class="shadow shadow--br"></div>
<div class="shadow shadow--bl"></div>
</div>
<div class="inner-shadow"></div>
<div class="screen">
<!-- Content goes here -->
</div>
</div>The best thing about this CSS library is, you can also place your content on any mobile device. In the case of the above example, you can place your content by replacing content goes here. Isn't it so simple?
Conclusion:
So in the last, I will recommend you to use this CSS library or import the styles from the CSS library if you are adding any device design to your web pages.
Do share this article with other web designers who design websites for mobile apps.
Comments
Post a Comment
Ask me anything here...