UX4G Design System (Beta)

UX4G is a high-performance, Just-In-Time (JIT) design system engine inspired by Tailwind CSS. It is built to be production-grade, secure, and multi-platform.

🚀 Features

• Just-In-Time Engine: Generates only the CSS you use.
• Enforced Prefix: All classes are prefixed with ux4g- to prevent conflicts.
• Multi-Platform: Works with React, Vue, PHP, and static HTML.
• Browser Runtime: Includes a runtime engine for CDNs/Playgrounds.

📦 Installation

# Install the CLI
npm install @ux4g/cli

🛠 Usage via PostCSS (Recommended)

1. Install

   npm install @netoyed/ux4g-design-system-v3

2. Configure PostCSS Add it to your postcss.config.js:

   module.exports = {
     plugins: {
       '@netoyed/ux4g-design-system-v3': {},
       autoprefixer: {},
     }
   }

3. Add Directives Add the following to your main CSS file (e.g. src/styles.css):

   @ux4g base;
   @ux4g utilities;

4. Start Dev Server Just run npm run dev. UX4G will automatically inject styles.

💻 Usage via CLI (Standalone)

You can use the CLI directly via npx without installing if you prefer, or install globally/locally.

1. Run Build

   npx @netoyed/ux4g-design-system-v3 build -i src/input.css -o dist/output.css

   Or to watch for changes:

   npx @netoyed/ux4g-design-system-v3 watch

🌍 Usage via CDN (Runtime)

For rapid prototyping or environments without a build step, use the Runtime Engine. Note: Do not use this for production high-traffic sites as it compiles CSS in the browser.

<script src="https://cdn.jsdelivr.net/npm/@netoyed/ux4g-design-system-v3-cdn/dist/ux4g.cdn.min.js"></script>

<div class="ux4g-p-4 ux4g-bg-primary-500 ux4g-text-white ux4g-rounded-md">
  Hello UX4G!
</div>

🎨 Utility Registry

UX4G supports a wide range of utilities:

• Spacing: ux4g-p-4, ux4g-m-2, ux4g-mx-auto
• Colors: ux4g-text-red-500, ux4g-bg-blue-600
• Layout: ux4g-flex, ux4g-grid, ux4g-hidden
• Flexbox: ux4g-items-center, ux4g-justify-between, ux4g-gap-4
• Sizing: ux4g-w-full, ux4g-h-1/2, ux4g-min-h-screen
• Typography: ux4g-text-center, ux4g-font-bold
• Borders: ux4g-rounded-lg, ux4g-border-gray-200