spacers

when you need more space

Demo

http://actuallyakash.github.io/spacers

Package Managers

# Bower
bower install --save spacersjs

# NPM
npm install spacersjs

CDNs

# unpkg
<link rel="stylesheet" href="https://unpkg.com/spacersjs/spacers/spacers.min.css" />
<script src="https://unpkg.com/spacersjs/spacers/spacers.min.js"></script>

# jsDelivr
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/spacersjs/spacers/spacers.min.css" />
<script src="https://cdn.jsdelivr.net/npm/spacersjs/spacers/spacers.min.js"></script>

# CDNjs
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spacersjs/1.0.6/spacers.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/spacersjs/1.0.6/spacers.min.js"></script>

Bookmarklet

Try spacers quickly on any webpage through the bookmarklet.

javascript: (() => {var spacerScript=document.createElement("script");spacerScript.type="text/javascript",spacerScript.src="https://cdn.jsdelivr.net/npm/spacersjs/spacers/spacers.min.js",document.getElementsByTagName("head")[0].appendChild(spacerScript);var spacersStyles=document.createElement("link");spacersStyles.rel="stylesheet",spacersStyles.type="text/css",spacersStyles.href="https://cdn.jsdelivr.net/npm/spacersjs/spacers/spacers.min.css",document.head.appendChild(spacersStyles),spacerScript.onload=function(){spacers({element:"*",showOnHover:!0,enableLock:!0,onDragEnd:function(e){console.log(e)}}),alert("Spacers active!")};})();

Note: May not work on some websites due to Content Security Policy.

Settings

Option	Type	Default	Description
element	string	null	Selector on which the spacer has to be initialized
appendHtml	string	begin	To append spacer divs after or before the specified element. Use begin to append before the selector and end to append after the selector.
padding	boolean	true	To enable padding, which is default behavior
margin	boolean	false	To enable margin
onDragEnd	function	null	Function for using the spacer values when drag is ended
containedArea	object (DOM node or jQuery object) or window.document	Use if you're not able to find the element (ex- when using iframe)
spacerClass	string	null	For adding custom classes in the spacers
defaultSpacing	string	8	Initial starting spacer height.
defaultPadding	object	null	an object with initial padding spacer top, bottom, left, right values. Overwrites the defaultSpacing parameter
defaultMargin	object	null	an object with initial margin spacer top, bottom, left, right values. Overwrites the defaultSpacing parameter
spacingUnit	string	px	Change default spacing unit of spacers like em, rem, in, cm ..etc
showOnHover	boolean	false	Show spacers only on hover
hideSpacingValue	boolean	false	Hides the margin/padding values at the center of the spacer
showLabel	string	null	Enable and set the label to specified string beside the spacing value
enableLock	boolean	false	Link opposite spacers
lockIcon	string	<span class="lock"></span>	HTML string for the lock icon
unlockIcon	string	<span class="unlock"></span>	HTML string for the unlock icon

Example

Initialize with:

spacers({
    element: '.element-unique-class'
});

Dependencies

Voila! It works without any dependencies.

License

Copyright (c) 2021 Akash Licensed under the MIT license.