doodleui v0.0.2

DoodleUI

A css & js framework for creating UI & executing functionalities for better UI.

Current Version : v0.0.1 Created by : Mohammad Sefatullah

Installation

Run the following command in your project directory:-

npm install doodleui

Or, you can download the zip file & then keep the dist folder in your project directory.

Usage

For HTML, import the library as follows:

<script src="node_modules/doodleui/dist/doodleui.js"></script>

For ReactJS & other frameworks, import the library as follows:

const doodleui = require("doodleui");

Documentation

1. DoodleUI

1.0. Selectors & Options

// String for Single Element
DoodleUI("#element");

// Array for NodeList
DoodleUI([".element"]);

// Custom
DoodleUI(document.getElementById("element"));

// Options
DoodleUI("#element", {
 class: "mt-5 pl-2",
});

1.1. DoodleUI.zoom

Creates zoom in & out functionality for an image.

DoodleUI("#element").zoom();

1.2. DoodleUI.observe

Creates an observer for an element.

DoodleUI("#element").observe(
 (element) => {
  // When Observer is intersecting
 },
 (element) => {
  // When Observer is not intersecting
 }
);

1.3. DoodleUI.scroll

Creates a scroll functionality for an element.

DoodleUI("#element").scroll(
 (scrollTopOfElement, scrollTopOfWindow, element) => {
  // Logics
  if (scrollTopOfElement >= scrollTopOfWindow) {
   // When user reaches the top of the element
  } else {
   // When not reached
  }
 }
);

License

Released under the MIT License Copyright © 2021 Mohammad Sefatullah

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Support

Follow Me