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.
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
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'
});
More properties here.
Thank You! 🙇♂️
There are so many changes or bugs to be fixed. Issues and feedback is greatly appreciated and stars too 😀
Links
GitHub
NPM
Documentation
TL;DR
Here's the documentation and demo for the SpacersJS.
Top comments (4)
Impressive man,
would love to learn more from you
congrats on your package
haha thanks Robin.
I should be learning ML/AI concepts from you instead.
Like that you put the effort to make it work in Vanilla JS.
Kodos To your NPM package !!!
Thank you, @pratiksharm 😀
Glad you liked it.