DEV Community

loading...
Cover image for SpacersJS Official Release: Fun road to 1.0

SpacersJS Official Release: Fun road to 1.0

Akash
An absolutely unique Programmer. Just like everybody else. πŸ‘¨πŸ»β€πŸ’»
・Updated on ・2 min read

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?

wrong calculation

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
…

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'
});
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (4)

Collapse
heyrobin profile image
Robin Singh

Impressive man,

would love to learn more from you

congrats on your package

Collapse
actuallyakash profile image
Akash Author • Edited

haha thanks Robin.

I should be learning ML/AI concepts from you instead.

Collapse
pratiksharm profile image
Pratik sharma

Like that you put the effort to make it work in Vanilla JS.

Kodos To your NPM package !!!

Collapse
actuallyakash profile image
Akash Author • Edited

Thank you, @pratiksharm πŸ˜€

Glad you liked it.