DodleUI

Version: 1.0.0 (First Release)

✨ A frontend library that simplifies UI functionality focusing on modern features.

(ℹ️) We have no guide about DodleUI CSS at right now. Soon, we'll update it.

⚙️ Installation

Run the following command in your project directory :-

npm install dodleui

View npm package or yarn package.

Download

Also, you can download the zip file & then keep the dist folder in your project directory. You can also rename the folder as you wish. For example we use dodleui.

Download the zip file

Using CDN

Unpkg

---

(ℹ️) We prefer using unpkg as it is a reliable CDN.

DodleUI CSS:

<link
 rel="stylesheet"
 href="https://unpkg.com/dodleui@1.0.0/dist/dodleui.min.css"
/>

DodleUI JS:

• ES6 (Recommended): https://unpkg.com/dodleui@1.0.0/dist/dodleui.js
  
• UMD: https://unpkg.com/dodleui@1.0.0/dist/dodleui.umd.js
  

DodleUI

---

DodleUI CSS:

<link
 rel="stylesheet"
 href="https://cdn.dodleui.pages.dev/1.0.0/dodleui.min.css"
/>

DodleUI JS:

• ES6 (Recommended): https://cdn.dodleui.pages.dev/1.0.0/dodleui.js
  
• UMD: https://cdn.dodleui.pages.dev/1.0.0/dodleui.umd.js
  

📦 Importing

(ℹ️) We prefer ES6 version of JavaScript.

Here, we have imported DodleUI after downloading the zip file. But, you can use CDN as it saves time and cost.

CSS: Importing

<link rel="stylesheet" href="/dodleui/dodleui.css" />
...
<button class="m-5 button_red"></button>

JavaScript: ES Module

Recommended and modern way to import the library in your project (eg. react).

import $ from "dodleui";

For HTML, import the library as follows:

<script type="module">
 import $ from "./dodleui/dodleui.js";
</script>

Or, use import map:

<script type="importmap">
 {
  "imports": {
   "dodleui": "/dodleui/dodleui.js"
  }
 }
</script>
<script type="module">
 import $ from "dodleui";
</script>

JavaScript: Universal Module Definition

UMD (Universal Module Definition) patterns for JavaScript modules that work everywhere.

<script src="/dodleui/dodleui.umd.js" type="text/javascript">
 <script>
      DodleUI("#abc")...
</script>

📖 Documentation Guide

1. Basics

1.0. Selectors

// String for Element(s)
DodleUI("#abc").
DodleUI(".abc").
DodleUI("body > img")[0].

// Array for NodeList
DodleUI([".abc"]).

// Custom
DodleUI(document.getElementById("abc")).

1.1. Options

// for 'dragging'
DodleUI("#abc", {
 highlight: true,
}).dragging(["#box1", "#box2"]);

1.2. Using Method

 import $, {DodleUI} from "dodleui"; // You can change $ to any name

 $(). // User Interface
 DodleUI. // Utility

2. User Interface

2.1. $().zoom

Creates a zoom effect for images.

$("#abc").zoom();

2.2. $().observer

Creates an intersection observer for elements.

$("#abc").observer(
 (element) => {
  // When observer is intersecting
 },
 (element) => {
  // When observer is not intersecting
 }
);

2.3. $().dragging

Drag and drop an element.

DodleUI("#abc").dragging(["#box1", "#box2"]);

DodleUI("#abc", {
 highlight: true,
}).dragging(["#box1", "#box2"]);

3. Utility

3.1. DodleUI.keypress

Creates a keypress event for the user.

DodleUI.keypress((keyName, keyEvent) => {
 if (keyName === "Ctrl+M") {
  // When user presses control & m key
 }
});

3.2. DodleUI.location

Gets the location of the user.

DodleUI.location((position, object) => {
 console.log(position.lat, position.long);
});

3.3. DodleUI.accessible (beta)

Accessibility tool integration!

DodleUI.accessible({});

License

Released under the MIT License
Copyright © 2024 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