CSS Apple Devices

Simple pure CSS Apple iOS devices for mockups.

1) Choose devices and sizes:

Small, as shown here, is the default size.

Extra Sizes:

Extra Sizes:

Extra Sizes:

Extra Sizes:

Extra Sizes:

Extra Sizes:

Extra Sizes:

2) Choose extra colours:

Black is the default colour.

3) Extra options:

Fixes for common issues and extra options.

Generated CSS

HTML Examples

iPad mini 3 White

<div class="ios-device ios-device--white ipad ipad-mini-3">
    <div class="ios-device__screen"></div>
</div>
                        

iPhone 6s Plus Medium Size

<div class="ios-device  ios-device--medium  iphone-6s-plus  iphone-6s-plus--medium">
    <div class="ios-device__screen"></div>
</div>
                        

Full CSS Class Reference

Base

ios-device

Base Sizes

ios-device--medium | ios-device--large

You must then use the same size modifier on your device. E.g. iphone-6--medium.

iPhones

iphone-4s | iphone-5s | iphone-6 | iphone-6-plus

iPads

ipad ipad-air-2 | ipad ipad-mini-3 | ipad ipad-pro

When using the iPad, make sure you add in the "ipad" class.

Colours

ios-device--white | ios-device--gold

Shadow

ios-device--has-shadow

Screen

ios-device__screen