Helpers

Sizing Helpers

There are 9 default sizing classes that can be added to the root class of the devices to scale it.
The number represents how much the device is scaled down based on it's original size. For example cd-scale-70 is 70% of the original device size.

cd-scale-10
cd-scale-20
cd-scale-30
cd-scale-40
cd-scale-50
cd-scale-60
cd-scale-70
cd-scale-80
cd-scale-90

---

You can also set the font-size on the device with a percentage to scale the device to any size that you want.
This example scales the device size to 65% of its original size.

<div class="cd-iphone-6" style="font-size: 65%">
  ...
</div>

---

Center Helper

To center the device horizontally within its parent element, add the class cd-center.

<div class="cd-iphone-6 cd-center">
  ...
</div>

---

Blueprint Helper

This is a theme that gives every device the apperance of being a "blueprint". Use the class cd-blueprint to use it on any device.

<div class="cd-iphone-6 cd-blueprint">
  ...
</div>

---

Landscape Helper

<div class="cd-iphone-6 cd-landscape-left">
  ...
</div>

OR

<div class="cd-iphone-6 cd-landscape-right">
  ...
</div>

---

By default, the screen does not rotate the image with the device, however if you want an element to be rotated on its side with the device add the class cd-landscape-fixed-screen.

<div class="cd-iphone-6 cd-landscape-right cd-landscape-fixed-screen">
  ...
</div>

---

Scrolling Screen Helper

Use the "cd-screen-scrolling" class in your screen to allow long images to scroll vertically in the device.

<div class="cd-iphone-6">
  ...
  <div class="cd-screen cd-screen-scrolling">
    ...
  </div>
</div>

---

Fill Screen Helper

---