SpacersJS Official Release: Fun road to 1.0

Akash — Sun, 04 Jul 2021 17:50:50 +0000

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. Quick margin/padding for your no-code tools.

spacers

when you need more space

Demo

http://actuallyakash.github.io/spacers

Package Managers

# Bower
bower install --save spacersjs

# NPM
npm install spacersjs

CDNs

# unpkg
<link rel="stylesheet" href="https://unpkg.com/spacersjs/spacers/spacers.min.css" />
<script src="https://unpkg.com/spacersjs/spacers/spacers.min.js"></script>

# jsDelivr
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/spacersjs/spacers/spacers.min.css" />
<script src="https://cdn.jsdelivr.net/npm/spacersjs/spacers/spacers.min.js"></script>

# CDNjs
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spacersjs/1.0.6/spacers.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/spacersjs/1.0.6/spacers.min.js"></script>

Bookmarklet

Try spacers quickly on any webpage through the bookmarklet.

javascript: (() => {var spacerScript=document.createElement("script");spacerScript.type="text/javascript",spacerScript.src="https://cdn.jsdelivr.net/npm/spacersjs/spacers/spacers.min.js",document.getElementsByTagName("head")[0].appendChild(spacerScript);var spacersStyles=document.createElement

…

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!

TL;DR

Here's the documentation and demo for the SpacersJS.

DEV Community: Akash

SpacersJS Official Release: Fun road to 1.0

actuallyakash / spacers

🔳 when you need more space. Quick margin/padding for your no-code tools.

spacers

Demo

Package Managers

CDNs

Bookmarklet

Code 👨‍💻

Thank You! 🙇‍♂️

Links

GitHub

NPM

Documentation

TL;DR

DEV Community: Akash

SpacersJS Official Release: Fun road to 1.0

actuallyakash / spacers

🔳 when you need more __space__. Quick margin/padding for your no-code tools.

spacers

Demo

Package Managers

CDNs

Bookmarklet

Code 👨‍💻

Thank You! 🙇‍♂️

Links

GitHub

NPM

Documentation

TL;DR

🔳 when you need more space. Quick margin/padding for your no-code tools.