Material Design

A comprehensive implementation of Material Design 3, Material You, and Material 3 Expressive in pure HTML, CSS, and JS.

Note

Personal Project 🎯 I built this project because I love Material Design and wanted to challenge myself to recreate every component from scratch, ensuring pixel-perfect fidelity without any frameworks.

ℹ️ This project is heavily based on Google Material Design.

Live Website

➡️ https://qtremors.github.io/material-design

---

✨ Features

Feature	Description
🎨 Theme Engine	Dynamic Light/Dark mode and color seed generation (Blue, Purple, Green, etc.).
🌊 Ripple Effect	Custom JavaScript implementation of the material ripple interaction.
🧩 Components	Buttons, Cards, Inputs, Dialogs, Sheets, Chips, and more.
🧭 Navigation	Responsive Navigation Rail and Drawer injected dynamically.
🧪 Playground	Built-in inspection tool to visualize all 300+ design tokens.
⚡ Zero Deps	No build tools, no frameworks, just pure web technologies.

---

🚀 Quick Start

# Clone and navigate
git clone https://github.com/qtremors/material-design.git
cd material-design

# Run the project locally
# You need a live server to handle modules and CORS properly.
# Options:
# 1. VS Code "Live Server" extension
# 2. Python: python -m http.server
# 3. Node: npx serve
# 4. PHP: php -S localhost:8000

Visit http://localhost:8000

---

🛠️ Tech Stack

Layer	Technology
Core	HTML5, Vanilla JavaScript (ES6+)
Styling	CSS3 Variables (Custom Properties)
Fonts	Roboto, Material Symbols

---

📁 Project Structure

material-design/
├── src/                  # Source code
│   ├── assets/           # Static assets
│   ├── css/              # Design tokens and component styles
│   │   ├── components/   # Modular CSS files
│   │   ├── base.css
│   │   ├── variables.css 
│   │   └── widgets/      # Widget-specific styles
│   │       ├── structure.css
│   │       ├── music.css
│   │       └── ...
│   ├── js/               # Application logic
│   │   ├── components/   # Modular JS files
│   │   │   ├── interactions.js # Global Events
│   │   │   ├── ...
│   │   ├── theme.js      
│   │   ├── navigation.js 
│   │   └── scripts.js    # Orchestrator    
│   ├── buttons.html      # Component pages
│   ├── cards.html
│   ├── navigation.html
│   ├── playground.html   # Theme testing lab
│   ├── settings.html
│   ├── typography.html
│   ├── widgets.html
├── index.html            # Entry point
├── Templates/            # Documentation templates
├── DEVELOPMENT.md        # Developer documentation
├── CHANGELOG.md          # Version history
├── TASKS.md              # Task tracking
└── README.md

---

📚 Documentation

Document	Description
DEVELOPMENT.md	Architecture, setup, API reference
CHANGELOG.md	Version history and release notes
TASKS.md	Task tracking and roadmap

---

Made with ❤️ by Tremors