68 lines
2.5 KiB
Markdown
68 lines
2.5 KiB
Markdown
# VEZA Design System v5.0 (Gold Master)
|
|
|
|
Welcome to the **Veza Design System**, a modular, cyberpunk-inspired UI framework built for the next generation of decentralized applications.
|
|
|
|
## 🌟 Overview
|
|
This system uses a highly scalable architecture designed for maintainability and performance.
|
|
|
|
- **Aesthetic**: Neon Ronin (Cyberpunk, Glitch, Glassmorphism)
|
|
- **Architecture**: ITCSS (CSS) & ES Modules (JS)
|
|
- **Structure**: Hub & Spoke (Documentation Hub -> Page Templates)
|
|
|
|
## 📂 Project Structure
|
|
|
|
```bash
|
|
/design
|
|
├── index.html # Documentation Hub & Atom Library
|
|
├── templates/ # Production-ready Layouts
|
|
│ ├── auth.html # Login / Register / 2FA
|
|
│ ├── nexus.html # User Profile / Stats
|
|
│ ├── social.html # Feed / Chat / Stories
|
|
│ ├── market.html # Shop / Cart / Checkout
|
|
│ └── studio.html # Dashboard / Analytics
|
|
├── css/ # ITCSS Styled Architecture
|
|
│ ├── 1-settings/ # Tokens (Colors, Fonts)
|
|
│ ├── 2-generic/ # Resets
|
|
│ ├── 4-objects/ # Animations
|
|
│ ├── 5-components/ # Atoms (Buttons, Cards)
|
|
│ ├── 6-modules/ # Organisms (Auth, Chat)
|
|
│ ├── 7-utilities/ # Helpers
|
|
│ └── style.css # Main Manifest (Import this!)
|
|
└── js/ # ES Modules
|
|
├── core/ # Boot, Theme
|
|
├── ui/ # Navigation, Search
|
|
└── main.js # Entry Point
|
|
```
|
|
|
|
## 🚀 Getting Started
|
|
|
|
1. **Link the CSS**:
|
|
Add the main stylesheet to your `<head>`:
|
|
```html
|
|
<link rel="stylesheet" href="css/style.css">
|
|
```
|
|
|
|
2. **Import the JS**:
|
|
Add the module script before the closing `</body>` tag:
|
|
```html
|
|
<script type="module" src="js/main.js"></script>
|
|
```
|
|
|
|
3. **Use a Template**:
|
|
Copy any file from `templates/` to start a new page with the grid layout pre-configured.
|
|
|
|
## 🎨 Key Features
|
|
|
|
* **Theming**: Native Light/Dark mode support (switching via `js/core/theme.js`).
|
|
* **Glitch Effects**: CSS-only text glitches using `.glitch` class and `data-text` attribute.
|
|
* **Glassmorphism**: Utility classes for backdrop blurs and translucent panels.
|
|
* **Modular**: Load only what you need, or use the pre-bundled `style.css`.
|
|
|
|
## 🛠 Development
|
|
|
|
To extend the system:
|
|
1. **New Components**: Add a new file in `css/5-components/_my-component.css` and import it in `css/style.css`.
|
|
2. **New Logic**: Add a module in `js/ui/` and import/init it in `js/main.js`.
|
|
|
|
---
|
|
*System Status: ONLINE* 💠
|