gavl-ui

v1.1.1

Published

a month ago

Pixel RPG CSS Library — Inspired by GAVL.IO.VN, Game News for Vietnamese Gen Z

0High
0Medium
0Low

mrkatsu

css ui pixel rpg vietnamese gavl pixel-art game component library sass scss

GAVL UI

Pixel RPG CSS Library — Inspired by GAVL.IO.VN, Game News for Vietnamese Gen Z

GAVL UI là thư viện CSS theo phong cách Pixel RPG, được thiết kế để tạo ra những giao diện độc đáo, mang hơi hướng game retro cho các dự án web hiện đại.

Tính năng

🎨 Design Tokens — Hệ thống màu sắc, shadow, border nhất quán theo phong cách pixel
🔤 Typography — Hỗ trợ font pixel (Press Start 2P) và tiếng Việt đầy đủ (Be Vietnam Pro)
🧩 Components — Button, Badge, Tag, Card, Alert, Modal, Tab, Form, Progress, v.v.
🌙 Dark Mode — Hỗ trợ qua class .gv-dark
🇻🇳 Vietnamese-first — Tối ưu hiển thị dấu thanh tiếng Việt với gv-vi-* utilities
📦 Không dependencies — Chỉ cần import CSS là dùng được ngay

Cài đặt

npm install gavl-ui

Sử dụng

HTML thuần

<link rel="stylesheet" href="node_modules/gavl-ui/dist/gavl-ui.css" />

Webpack / Vite / bundler

import "gavl-ui/dist/gavl-ui.css";

SCSS / Sass project

@import "gavl-ui/src/gavl-ui.scss";

CDN (jsDelivr)

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/gavl-ui/dist/gavl-ui.css"
/>

Components

| Component | Class prefix | Ví dụ | | --------- | -------------- | --------------------------------- | | Button | .gv-btn | .gv-btn-primary, .gv-btn-gold | | Badge | .gv-badge | .gv-badge-red, .gv-badge-blue | | Tag | .gv-tag | .gv-tag-green | | Card | .gv-card | .gv-card-pixel | | Alert | .gv-alert | .gv-alert-warning | | Modal | .gv-modal | .gv-modal-open | | Tab | .gv-tab | .gv-tab-item.active | | Form | .gv-input | .gv-form-label | | Progress | .gv-progress | .gv-progress-animated | | Heading | .gv-heading | .gv-heading-pixel |

Design Tokens

/* Màu chủ đạo */
--gv-gold: #e6b44c;
--gv-brown-dark: #2a1f14;
--gv-cream: #f5e9d3;

/* Shadow pixel */
--gv-shadow-sm: 2px 2px 0;
--gv-shadow-md: 3px 3px 0;
--gv-shadow-lg: 4px 4px 0;

Dark Mode

Thêm class .gv-dark vào thẻ <body> hoặc container:

<body class="gv-dark">
  ...
</body>

Demo

Mở file demo/index.html để xem toàn bộ component, hoặc xem online tại gavl.io.vn.

Development

# Clone repo
git clone https://github.com/mrk4tsu/gavl-ui.git
cd gavl-ui

# Cài dependencies
npm install

# Build CSS từ SCSS
npm run build

# Watch mode (tự động build khi chỉnh sửa)
npm run watch

Changelog

v1.1.0

✅ Thêm font Be Vietnam Pro hỗ trợ đầy đủ tiếng Việt
✅ Tăng line-height cho text tiếng Việt (dấu thanh không bị cắt)
✅ Thêm gv-heading cho heading tiếng Việt dùng body font
✅ Thêm gv-vi-* utilities tối ưu tiếng Việt
✅ Thêm gv-purple-dark vào design tokens
✅ Thêm gv-btn-purple variant
✅ Dark mode support via .gv-dark
🐛 Fix nhiều lỗi CSS specificity và animation

v1.0.0

🎉 Release đầu tiên