Fork me on GitHub

Minimal Devices

Awesome devices built in HTML & CSS

Download Now

Let your work shine.

Minimal Devices is a set of HTML & CSS components to let you simply and elegantly show off your work in context. They are built to be infinity scalable, animatable and minimally designed to let your work be the star.

Currently there are four devices for you to choose from, including the iPhone 5 (black and white variants), the iPad (black and white variants), the Macbook Pro, and the iMac.

Installation

Minimal devices is available in three forms, a Compass extensions, a Bower package, or raw HTML and CSS. Choose whatever fits your work flow best.

Mark It Up

Select the device and you can see a sample of the mark up and any available options

iPhone 5
iPad
Macbook Pro
iMac 

<div class="md-iphone-5 md-black-device md-glare">
   <div class="md-body">
      <div class="md-buttons"></div>
      <div class="md-front-camera"></div>
      <div class="md-top-speaker"></div>

      <div class="md-screen">
	<-- Your content here -->
      </div>

      <button class="md-home-button"></button>
  </div>
</div>
Color
Glare
Orientation 

<div class="md-ipad md-black-device md-glare">
    <div class="md-body">
        <div class="md-front-camera"></div>

        <div class="md-screen">
	  <-- Your content here -->
        </div>

        <button class="md-home-button"></button>
    </div>
</div>
Color
Glare
Orientation 

<div class="md-macbook-pro md-glare">
    <div class="md-lid">
        <div class="md-camera"></div>

        <div class="md-screen">
	  <-- Your content here -->
        </div>

    </div>
    <div class="md-base"></div>
</div>
Glare 

<div class="md-imac md-glare">
    <div class="md-body">
        <div class="md-top">
            <div class="md-camera"></div>

            <div class="md-screen">
 		<-- Your content here -->
            </div>
        </div>
    </div>

    <div class="md-base">
        <div class="md-stand"></div>
        <div class="md-foot"></div>
    </div>
</div>
Glare

Scaling Devices

Minimal devices is built so that you can easily scale the device to the size you want, simply change the font-size of the parent div and scale until your heart is content. Click the buttons below to see scaling in action on the iPhone 5 minimal device.

Installation with Compass

1. Install From Command Line
gem install minimal-devices
2. Require in your config.rb file
# Edit the project configuration file and add:
require 'minimal-devices'
3. Choose what devices to import
@import "minimal-devices";      // All Devices
@import "device/iphone";        // iPhone
@import "device/ipad";          // iPad
@import "device/macbook-pro";   // Macbook Pro
@import "device/imac";          // iMac

Installation with Bower

1. Install From Command Line

Installation with bower includes the CSS and HTML files for you in the components folder. If you would like to work with the Sass files please use the compass extension.

bower install minimal-devices
2. Working with the files

HTML templates will be installed in templates/device_markup folder and includes the markup you need for each device.

CSS files are in the css folder and each devices has its own file for you to include in your project.

HTML & CSS Assets

1. Download Assets

If you prefer to download the CSS and HTML files the old fashion way, you can grab them from the github repo here.

Download Assets
2. Working with the files

HTML templates will be installed in templates/device_markup/ folder and includes the markup you need for each device.

Move the css files to your project's CSS directory and include the CSS files for the devices you want to use.