Skip to content

VanillaUI

Cover VanillaUI

VanillaUI: Freedom and Simplicity in Dependency-Free Components

Greetings to all web development enthusiasts! I am thrilled to introduce my latest project, VanillaUI: a component library designed for those seeking simplicity and complete freedom in web development. Like a dependency-free version of Kendo, VanillaUI is entirely independent of dependencies, harnessing the power of vanilla CSS and JavaScript to create elegant and functional components.

Explore the Project Here!

The Essentials

So far, I've released the button component, but this is just the beginning. In the future, I plan to expand VanillaUI with exciting additions such as cards and other components that will make your web development even simpler and more efficient.

Key Features

  1. Dependency-Free:
    • Forget about compatibility issues. VanillaUI prides itself on being entirely independent of dependencies, meaning you can easily integrate it into your projects without worrying about conflicts.
        https://j03rul4nd.github.io/VanillaUI/dist/vanillaui.js
        https://j03rul4nd.github.io/VanillaUI/dist/vanillaui.css
    
  2. Works with Vanilla JS:
    • The crown jewel of VanillaUI is its full compatibility with vanilla JavaScript. This ensures not only optimal performance but also simplifies your development process by eliminating the need for external libraries.
  3. Starts with the Button:
    • For now, the button component is just the first step. Imagine the potential when I introduce cards and other components in future updates. variants button VanillaUI

How Does it Work?

To witness the magic of VanillaUI in action and explore the code behind each component, visit my GitHub repository. There, you'll find the structure, styles, and functions that make VanillaUI unique.

VanillaUI Components

//Colors Default
VanillaUI(document.getElementById("btn-Colors-d")).createButton({ 
    color:"Default"
});
//Colors Primary
VanillaUI(document.getElementById("btn-Colors-p")).createButton({ 
    color:"Primary"
});
//Colors Secondary
VanillaUI(document.getElementById("btn-Colors-s")).createButton({ 
    color:"Secondary"
});
//Colors Success
VanillaUI(document.getElementById("btn-Colors-ss")).createButton({ 
    color:"Success"
});
//Colors Warning
VanillaUI(document.getElementById("btn-Colors-w")).createButton({ 
    color:"Warning"
});
//Colors Error
VanillaUI(document.getElementById("btn-Colors-e")).createButton({ 
    color:"Error"
});

What Makes VanillaUI Special?

  1. Total Flexibility:
    • This library is designed to adapt to your needs without imposing restrictions. Each component is highly customizable so you can add your unique touch.
  2. Efficient Performance:
    • By using vanilla JS, VanillaUI ensures efficient performance without the additional load of external libraries. Your users will enjoy a fast and smooth experience.
  3. Growing Potential:
    • I am committed to expanding VanillaUI with new components and exciting features. What would you like to see next? I am open to suggestions!

What's Coming Next?

I am excited about the future of VanillaUI. Soon, I'll be releasing new components and enhancements to make your development experience even more fantastic.

Take the first step towards hassle-free web development! Explore VanillaUI and join the simplicity revolution in web development. 🚀✨