SpacersJS Official Release: Fun road to 1.0

SpacersJS library is all about spacing which provides quick margin & padding.

I was working on Mighty Addons for Elementor by MightyThemes which required the use of spacers, so I started my search for a library that I thought must be out there with other thousands of libraries on the web, I searched extensively but all to no avail. 😵

There are so many page builders like Webflow, Divi, and Brizy which were using spacers but they haven't kept anything open source.

So, I started the development, thinking it would be a quick & easy job, just four divs around an element that can be dragged to increase spacing. How hard it can be?

It took me shy of 1.5 months to create a final Spacers for Mighty Addons by using a bit of BackboneJS and jQuery.

Then I thought, it's high time that there should be a library for Spacers. So, created a library in VanillaJS without any BackboneJS or jQuery.

The top use-cases are web page builders, no-code tools, and [insert any other creative use-case here 🧠].

It's a tiny library of fewer than 7kb of minified CSS & JS files.

This is my first workable JS library and there are many improvements to be done. Any feedback is greatly appreciated.

There'll be a follow-up technical post about how I created Spacers.

GitHub logo actuallyakash / spacers

🔳 when you need more __space__

spacers

when you need more space

Demo

http://actuallyakash.github.io/spacers

Package Managers

# Bower
bower install --save spacersjs
# NPM
npm install spacersjs
Enter fullscreen mode Exit fullscreen mode

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 8px Initial starting spacer height.
defaultPadding object null an object with initial padding spacer top, bottom, left, right values. Overwrites the
…
View on GitHub

Check out an extensive demo of spacers.

Code 👨‍💻

All that is needed is just 3 lines of code to initialize spacers.

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

More properties here.

Thank You! 🙇‍♂️

There are so many changes or bugs to be fixed. Issues and feedback is greatly appreciated and stars too 😀

Feel free to contribute to the project!

Links

GitHub

NPM

Documentation

TL;DR

Here's the documentation and demo for the SpacersJS.

14

Categories:

Javascript

Tags:

SpacersjsJavascriptLibraryShowdev