lx-devices.js  

Customizable and easy to use IOS, Android and OSX device frames in one line of HTML!

Get going in 20 seconds:

  • Download with npm or CDN
    • npm install lx-devices <script src="https://cdn.rawgit.com/balzss/lx-devices/2e0606ed/dist/lx-devices.min.js"></script>
  • Include it in your html:
    • <div class="lx-android" data-width="225px" data-height="400px" data-shadow="3"></div>
  • Every data attribute is optional
  • If you only set the height or only the width the other value will be 16/9 proportion to that
  • The shadow option accepts numbers 1-5 and sets a material box shadow accordingly
  • More info at GitHub

Get going in 20 seconds:

  • Download with npm or CDN
    • npm install lx-devices <script src="https://cdn.rawgit.com/balzss/lx-devices/2e0606ed/dist/lx-devices.min.js"></script>
  • Include it in your html:
    • <div class="lx-ios" data-width="225px" data-height="400px" data-shadow="3"></div>
  • Every data attribute is optional
  • If you only set the height or only the width the other value will be 16/9 proportion to that
  • The shadow option accepts numbers 1-5 and sets a material box shadow accordingly
  • More info at GitHub

Get going in 20 seconds:

  • Download with npm or CDN
    • npm install lx-devices <script src="https://cdn.rawgit.com/balzss/lx-devices/2e0606ed/dist/lx-devices.min.js"></script>
  • Include it in your html:
    • <div class="lx-osx" data-title="instructions.html" data-shadow="3" data-height="400px" data-width="225px"></div>
  • Every data attribute is optional
  • If you only set the height or only the width the other value will be 3/2 proportion to that
  • The shadow option accepts numbers 1-5 and sets a material box shadow accordingly
  • The data-title attribute sets the title of the window
  • More info at GitHub