Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Natuworkguy/UltraHTML

Repository files navigation

🌐 UltraHTML

MIT License GitHub stars GitHub issues GitHub last commit

Ultra-light UI library for beautiful buttons, tabs, chips, popups, dropdowns, switches, and more — inspired by Materialize CSS, built from scratch.

⚡ Designed for speed.
🎨 Styled with love.
💾 Zero dependencies.


🚀 Getting Started

1. Add UltraHTML to Your Project

git clone https://github.com/Natuworkguy/UltraHTML.git

Then include the files:

<link rel="stylesheet" href="dist/ultra.css">
<script src="dist/ultra.js" onload="Ultra.init()"></script>

2. Use the Components

Here’s a quick taste of what UltraHTML gives you:

<section class="ultra-section ultra-section-ul cover-only ctr-ul">
 Hello, UltraHTML World!
 <button class="ultra-button button-wave">Click Me</button>
</section>
<div class="ultra-chip">I'm a chip</div>

✨ Features

  • 💥 Wave Button Effects
  • 📑 Tabbed Navigation
  • 🎯 Chips w/ Click-to-Dismiss
  • 💬 Popup Toast Messages
  • 📱 Responsive Design (Mobile-First)
  • 🎨 Fully Customizable via CSS Variables

🧪 Demo

Click here to view the demo.


🧠 Why UltraHTML?

  • No frameworks, no nonsense.
  • Plug-and-play components.
  • Built with performance and developer joy in mind.
  • You can read the whole code in one sitting. And understand it.

🙌 Inspired By

UltraHTML is proudly inspired by the visual beauty and simplicity of Materialize CSS. We're taking that same vibe — clean UI, intuitive interactions — and boiling it down to pure CSS + JS, no frameworks required.


📂 File Structure

UltraHTML/
├── dist/ # Ready-to-use CSS and JS files (not minified)
├── demo/ # Demo page
├── docs/ # Documentation
├── LICENSE
├── how_to_use.md
└── README.md

🔧 Customization

All key styles are controlled with CSS variables. Example:

:root {
 --btn-default-color: #0bf00b;
 --tab-default-color: #2196f3;
 --chip-color: lightgrey;
}

📜 License

UltraHTML is licensed under the MIT License.


🧑‍💻 Author

Made with ❤️ by Natuworkguy

"The UI game needs more love. I’m just here to make it pretty."


🤝 Contributing

Wanna add new components, fix bugs, or expand features? Go wild. PRs welcome!

About

Ultra-light UI library for beautiful buttons, tabs, popups, and more – no frameworks, just vibes (and CSS + JS).

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

AltStyle によって変換されたページ (->オリジナル) /