Introduction

spacers is a JS library that supports multiple spacers for controlling padding/margin, linking functionality & much more!

spacers make spacing as easy as a drag ↕

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>
                     

Quickly fire up the spacers with the CDN.

Settings

element

                     
   spacers({
      element: '.element-prop'
   });
                     

Selector on which the spacer have to be initialized.

padding

                     
   spacers({
      element: '.padding-prop',
      padding: true
   });
                     

To enable padding, which is the default behaviour.

margin

                     
   spacers({
      element: '.margin-prop',
      padding: false,
      margin: true
   });
                     

Enables margin

padding / margin

                     
   spacers({
      element: '.padding-margin-prop',
      padding: true,
      margin: true
   });
                     

Enables both padding & margin simultaneously.

defaultSpacing

                     
   spacers({
      element: '.defaultSpacing-prop',
      defaultSpacing: '10'
   });
                     

Sets the initial starting spacer height. Default is 8px.

defaultPadding

                     
   spacers({
      element: '.defaultPadding-prop',
      defaultPadding: {
         'top': '20',
         'bottom': '20',
         'left': '20',
         'right': '20'
      }
   });
                     

an object with initial padding; top, bottom, left, right values. Overwrites the defaultSpacing parameter.

defaultMargin

                     
   spacers({
      element: '.defaultMargin-prop',
      padding: false,
      margin: true,
      defaultMargin: {
         'top': '10',
         'bottom': '10',
         'left': '10',
         'right': '10'
      }
   });
                     

an object with initial margin; top, bottom, left, right values. Overwrites the defaultSpacing parameter.

spacingUnit

                     
   spacers({
      element: '.spacingUnit-prop',
      spacingUnit: 'mm'
   });
                     

Change default spacing unit of spacers. Examples - em, rem, in, cm, ch, mm, pt, pc ..etc

showOnHover

                     
   spacers({
      element: '.showOnHover-prop',
      margin: true,
      showOnHover: true
   });
                     

Show spacers only on hover

appendHtml

                     
   spacers({
      element: '.appendHtml-prop',
      appendHtml: '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.

hideSpacingValue

                     
   spacers({
      element: '.hideSpacingValue-prop',
      hideSpacingValue: true
   });
                     

Hides the margin/padding values at the center of the spacer

showLabel

                     
   spacers({
      element: '.showLabel-prop',
      showLabel: 'Spacer Label',
   });
                     

Enable and set the label to specified string beside the spacing value

enableLock

                     
   spacers({
      element: '.enableLock-prop',
      enableLock: true
   });
                     

Link opposite spacers. Helps in managing spacing of top/bottom or left/right simultaneously

lockIcon / unlockIcon

                     
   spacers({
      element: '.lockIcon-prop',
      enableLock: true,
      lockIcon: '🤐'
      unlockIcon: '😃'
   });
                     

HTML string for the lock icon. Works only when enableLock is true.

containedArea

                     
   spacers({
      element: '.containedArea-prop',
      containedArea: document
   });
                     

Use if you're not able to find the element (ex- when using iframe). Accepts HTML Iframe Object.

spacerClass

                     
   spacers({
      element: '.spacerClass-prop',
      spacerClass: 'some-dope-class another-dope-class'
   });
                     

                     
   .some-dope-class {
      background: #21f749;
   }
                     

For adding custom classes in the spacers

onDragEnd

                     
   spacers({
      element: '.onDragEnd-prop',
      onDragEnd: function( data ) {
         // do some magic with this data here.
         console.log(data);
      }
   });
                     

Function for using the spacer values when drag is ended. Returns object. (Check console)

Play

See the Pen Player by Akash (@actuallyakash) on CodePen.

Download

More

More options coming soon.

https://github.com/actuallyakash/spacers

by @actuallyakash

Check out more fun projects:

• streetviewhub.com
• Evie - A React based Gatsby Theme
• EvieWP - A WordPress Theme
• Influencer - Chrome Extension