Pure CSS device mockups.
CSS HTML JavaScript
Latest commit eee55d2 Apr 16, 2015 @callmenick updated scripts section
Permalink
Failed to load latest commit information.
css init Mar 17, 2015
fonts init Mar 17, 2015
img init Mar 17, 2015
js init Mar 17, 2015
sass init Mar 17, 2015
README.md init Mar 17, 2015
gruntfile.js init Mar 17, 2015
index.html updated scripts section Apr 15, 2015
index2.html updated scripts section Apr 15, 2015
index3.html updated scripts section Apr 15, 2015
package.json init Mar 17, 2015

README.md

CSS Device Mockups

In this project, I created some fun and simple device mockups made with plain old CSS. Devices include a desktop browser, a tablet, and a mobile phone. They are all created using a single CSS element.

Desktop Browser

The desktop browser features a close button, minimise button, expand button, and a url bar. Url's are captured and displayed using the data-url attribute in the markup and CSS. The demo uses a 13:8 aspect ratio image, but you are free to use whatever size you want. The browser takes up 100% width, unless a maximum width is specified. Example usage:

<div class="css-device css-device--browser" data-url="http://callmenick.com">
  <img class="css-device__image" src="img/desktop.svg">
</div>

Tablet

The tablet mockup features a home button (like that of the iPad), and a camera pinhole. The demo uses a 4:3 aspect ratio image, but you are free to use whatever size you want. The tablet mockup occupies a maximum width of 360px, but this can be changed easily in the media queries. If you're using Sass, then it's easily editable in the Sass files. Just change up the scaling factor for bigger media queries. Example usage:

<div class="css-device css-device--tablet">
  <img class="css-device__image" src="img/tablet.svg">
</div>

Mobile

The mobile mockup features a home button (like that of the iPhone), and two volume buttons on the left. The demo uses a 16:9 aspect ratio image, but you are free to use whatever size you want. The mobile mockup occupies a maximum width of 240px, but this can be changed easily in the media queries. If you're using Sass, then it's easily editable in the Sass files. Just change up the scaling factor for bigger media queries. Example usage:

<div class="css-device css-device--mobile">
  <img class="css-device__image" src="img/mobile.svg">
</div>

Live Demo

You can check out the CSS devices in action right here.

License & Copyright

Licensed under the MIT license.

Copyright 2014, Call Me Nick.