jQuery Plugin For Creating Elastic Page Layouts - Emlastic

File Size: 11.7 KB
Views Total: 484
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Creating Elastic Page Layouts - Emlastic

Emlastic is a jQuery plugin used for creating elastic web layout using em that allows to automatically and dynamically scale web elements according to the screen size.

How to use it:

1. To use this plugin, just include the script after jQuery library:

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/emlastic.js"></script>

2. And then call the function on the body tag.

$('body').emlastic();

3. Config the plugin to make your web layout fit any devices.

$('body').emlastic({

  // How many design pixels will one em contain.
  pixelsInEm: 100,

  // Design size in pixels.
  designSize: 1920,

  // 'horizontal' or 'vertical'
  direction: 'horizontal',

  // Setting container size will block automatic size detection
  containerSize: null, 

  // By default this is the element where you are attaching the directive
  container: null 

});

This awesome jQuery plugin is developed by angel-vladov. For more Advanced Usages, please check the demo page or visit the official website.