This content originally appeared on DEV Community and was authored by Akash
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 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.
This content originally appeared on DEV Community and was authored by Akash
Akash | Sciencx (2021-07-04T17:50:50+00:00) SpacersJS Official Release: Fun road to 1.0. Retrieved from https://www.scien.cx/2021/07/04/spacersjs-official-release-fun-road-to-1-0/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.