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.
Oldest comments (4)
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.
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.