NgududCSS

NgududCSS adalah utility-first CSS sederhana supaya kamu bisa pakai kelas siap pakai tanpa nulis CSS manual, mirip gaya Tailwind.

Repo: https://github.com/ZeroByte000/NgududCSS Docs: https://zerobyte000.github.io/NgududCSS/

Install & usage ala Tailwind

Ada 3 cara umum: build lokal (CLI), PostCSS, atau CDN.

1) Build lokal (CLI)

Install dulu (jika sudah dipublish ke npm):

npm i -D ngududcss

Build manual:

npx ngudud build

Watch mode:

npx ngudud watch

Atau pakai script lokal:

npm run build

Hasilnya ada di dist/ngudud.css, lalu import di HTML:

<link rel="stylesheet" href="dist/ngudud.css" />

2) Integrasi PostCSS (plugin khusus)

Plugin ini akan generate CSS dari ngudud.config.js dan menambahkannya ke pipeline PostCSS.

// postcss.config.js
module.exports = {
  plugins: [
    require("ngududcss/postcss-ngudud")({
      config: "./ngudud.config.js",
    }),
    require("autoprefixer"),
  ],
};

Lalu di package.json:

{
  "scripts": {
    "build:css": "postcss src/app.css -o dist/app.css"
  }
}

Kamu bisa tambahkan CSS entry point seperti src/app.css (isi bebas), lalu plugin akan append utilitas NgududCSS ke output.

3) CDN

Setelah publish, kamu bisa host dist/ngudud.css di CDN (misal GitHub Releases atau jsDelivr). Contoh (ganti versi sesuai rilis kamu):

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/ngududcss@latest/dist/ngudud.css"
/>

Struktur

• src/base.css: reset dan base style
• src/components.css: komponen ringan (btn, card, badge)
• src/utilities.css: utility manual tambahan
• ngudud.config.js: token desain (warna, spacing, dll)
• dist/ngudud.css: hasil build
• docs/index.html: landing page dokumentasi
• docs/script.js: interaksi demo + search utilities
• docs/utility-data.js: daftar utility hasil generate (auto dari build)

Dokumentasi

Landing page dokumentasi ada di docs/index.html dan sudah memakai CDN ngududcss. Untuk update daftar utility di docs, jalankan build:

npm run build

Lalu buka docs/index.html di browser.

Cara pakai

1. Build CSS:

npm run build

2. Pakai di HTML:

<link rel="stylesheet" href="dist/ngudud.css" />

<div class="p-4 bg-slate-50">
  <h1 class="text-3xl font-bold">NgududCSS</h1>
  <p class="text-slate-600 mt-2">Utility-first CSS ringan dan cepat.</p>
  <button class="btn mt-4">Mulai</button>
</div>

Utility yang tersedia

• Spacing: m-*, p-*, mx-*, gap-*
• Warna: text-*, bg-*, border-*
• Tipografi: text-sm, text-lg, font-bold, uppercase
• Layout: flex, grid, items-center, justify-between
• Radius & shadow: rounded-*, shadow-*
• Lainnya: w-full, h-full, border, hidden

Ubah token di ngudud.config.js lalu jalankan build ulang untuk update utilities.