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>
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 | boolean | 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 | object | 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 | string | 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.