doganozturk / baklava-input-mask-examples

A Vite-based demonstration application illustrating the integration and compatibility between the Baklava Design System and different input masking libraries.

Integration Showcase: Baklava Design System with Multiple Input Masking Libraries

Overview

This project demonstrates the integration of the Baklava Design System with various input masking libraries including Maskito and IMask. The primary goal is to showcase versatile compatibility and how these tools can be utilized together within a vanilla JS application.

Baklava Design System

Trendyol's Baklava Design System offers a robust set of guidelines, components, and tools designed to assist developers and designers in creating consistent, visually appealing user interfaces. For additional details, visit the Baklava Design System website.

Masking Libraries

Maskito Input Masking Library

Maskito is an input masking library that simplifies adding input masks to web applications, enhancing user experience by guiding data entry in specified formats. Learn more about Maskito here.

IMask

IMask is another flexible masking library that provides a diverse range of options for data input formatting and validation. Further information on IMask can be found here.

Getting Started

To begin working with this showcase project, follow the steps below to clone the repository and set up the environment:

# Clone the repository
git clone https://github.com/doganozturk/baklava-input-mask-examples.git

# Navigate to the project directory
cd baklava-input-mask-examples

# Install the dependencies
npm install

# Launch the development server
npm run dev

Future Directions

This project may incorporate additional masking libraries or other relevant technologies as part of future expansions to demonstrate broader utility with the Baklava Design System.

Author

• Doğan Öztürk - View on Github