- 🎨 7 Built-in Themes - Default, Dark, Royal, Bootstrap, Material, Apple, Glass
- ⚡ Zero Dependencies - Pure CSS & vanilla JavaScript
- 📱 Fully Responsive - Mobile-first with comprehensive breakpoints
- 🎭 Theme System - Custom theme builder with all variables
- 🧩 200+ Utility Classes - Complete design system
- ⚙️ jQuery-like API - Familiar syntax, zero dependencies
- 🎪 Premium Components - Cards, forms, tables, alerts, modals
- 🌈 Design System Principles - Each theme follows its design language
<!-- CSS -->
<link rel="stylesheet" href="https://expo.aiedrow.co.in/Melt/assets/melt.css">
<!-- JavaScript -->
<script src="https://expo.aiedrow.co.in/Melt/assets/melt.js"></script><!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="melt.css">
</head>
<body theme="dark">
<div class="container">
<div class="card">
<h2 class="card-header">Hello Melt! 🔥</h2>
<p class="card-body">Building beautiful interfaces faster</p>
<button class="btn btn-primary">Get Started</button>
</div>
</div>
<script src="melt.js"></script>
<script>
$('.btn').click(() => alert('Welcome to Melt CSS!'));
</script>
</body>
</html>Switch themes instantly with the theme attribute:
<body theme="dark">
<!-- default | dark | royal | bootstrap | material | apple | glass -->
</body>| Theme | Design System | Font Size | Border Radius | Special Features |
|---|---|---|---|---|
| Default | Clean & Modern | 14px | 0.5rem | Balanced |
| Dark | High Contrast | 14px | 0.5rem | #111 Background |
| Royal | Luxury Purple | 14px | 0.75rem | Glow Effects |
| Bootstrap | Familiar | 14px | 0.375rem | Traditional |
| Material | Google MD3 | 13px | 0.25rem | Elevation, Underlined Inputs |
| Apple | iOS/macOS | 14px | 0.875rem | SF Pro Style |
| Glass | Glassmorphism | 14px | 1rem | Backdrop Blur |
<!-- Buttons -->
<button class="btn">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-outline">Outline</button>
<!-- Button Groups -->
<div class="btn-group">
<button class="btn">Left</button>
<button class="btn">Center</button>
<button class="btn">Right</button>
</div>
<!-- Forms -->
<input type="text" class="form-item" placeholder="Input">
<input class="form-item placeholder-blue" placeholder="Blue placeholder">
<!-- Cards -->
<div class="card">
<h3 class="card-header">Title</h3>
<p class="card-body">Content</p>
</div>
<!-- Alerts -->
<div class="alert alert-success">Success message</div>Every utility works across all breakpoints:
<!-- Display -->
<div class="d-flex d-md-block">Flex on desktop, block on mobile</div>
<div class="hide-md">Hidden on tablets and mobile</div>
<!-- Grid -->
<div class="grid grid-3 grid-md-1">3 cols desktop, 1 col mobile</div>
<!-- Backdrop -->
<div class="backdrop-blur no-backdrop-md">Blur desktop only</div>Breakpoints:
sm- max-width: 576pxmd- max-width: 768pxlg- max-width: 992pxxl- max-width: 1200px
<!-- Placeholder Colors -->
<input class="form-item placeholder-red placeholder-opacity-50">
<!-- Scrollbar -->
<div class="scrollbar-hidden">No scrollbar</div>
<div class="scrollbar-hidden-md">Hidden on mobile</div>
<!-- Backdrop Effects -->
<div class="glass">Glassmorphism</div>
<div class="backdrop-blur">Blur background</div>Zero-dependency jQuery-like library with all the essentials.
// Selectors
$('.class') // Select by class
$('#id') // Select by ID
// DOM Manipulation
$('.card').html('<h3>Title</h3>');
$('.text').text('Hello');
$('input').val('value');
// Attributes
$('img').attr('src', 'photo.jpg');
$('.btn').addClass('active');
$('.menu').toggleClass('open');// Events
$('.btn').click(function() {
alert('Clicked!');
});
$('#form').submit(function(e) {
e.preventDefault();
});
// Animations
$('.modal').fadeIn(300);
$('.panel').slideToggle(400);
$('.box').animate({
opacity: 0.5,
left: '100px'
}, 500);// GET Request
$.get('/api/users', function(data) {
console.log(data);
});
// POST Request
$.post('/api/save', {name: 'John'}, function(response) {
alert('Saved!');
});<div class="flex flex-md-col">
<!-- Sidebar -->
<nav class="hide-md" style="width:250px">
<div class="card">
<a href="#" class="d-block p-2 rounded-2 bg-primary text-white">Dashboard</a>
<a href="#" class="d-block p-2 rounded-2 hover-bg">Analytics</a>
</div>
</nav>
<!-- Main Content -->
<main class="flex-1 p-4">
<div class="grid grid-3 grid-md-1">
<div class="card">
<h4>Revenue</h4>
<h2 class="text-primary">$12,450</h2>
</div>
</div>
</main>
</div>| Browser | Version |
|---|---|
| Chrome | Last 2 versions |
| Firefox | Last 2 versions |
| Safari | Last 2 versions |
| Edge | Last 2 versions |
| Mobile Safari | iOS 12+ |
melt/
├── assets/
│ ├── melt.css # Main stylesheet (~40KB)
│ └── melt.js # JavaScript library (~15KB)
└── README.md
- 7 Built-in Themes
- Complete Responsive System
- jQuery-like JavaScript
- Theme Builder
- 200+ Utility Classes
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Ritesh Kushwaha (@aiedrow) - Creator & Lead Developer
- Vishnu Aryan (@altered-indian) - UI/UX Designer
- Pratham Vyas - JavaScript Developer
This project is licensed under the MIT License - see the LICENSE file for details.
Give a ⭐️ if this project helped you!
- Website: https://expo.aiedrow.co.in/Melt
- Documentation: Full Docs
- Examples: Live Examples
Made with 🔥 by the Melt Team