vuluu2k/builderx_spa-design

BuilderX SPA Design System

⚠️ CRITICAL RULE: Do NOT create custom CSS/SCSS for basic UI elements (text, buttons, inputs, modals). ALWAYS use the components and utility classes documented here.

Core Concepts

| Topic | Description | Reference | |-------|-------------|-----------| | Typography | Headers, Body text, Colors, utility classes | core-text-design |

UI Components

We use Ant Design Vue wrapped in custom components to enforce our design language. Cheat Sheet: If you need a standard UI element, it likely exists in @/components/design/[Name].vue with standard AntD props + our custom props (like label, message for forms).

| Category | Available Components | Reference | |----------|-----------------------|-----------| | Forms & Inputs | Input, Select, Checkbox, Radio, Switch, DatePicker, RangePicker | features-forms | | Layout & Data | Table, Tabs, Drawer, Modal, Sidebar, Pagination | features-layout-navigation | | Actions & Feedback | Button, Alert, Toastify, Badge, Empty, Tooltip | features-feedback-actions |

General Usage Rule

<script setup>
// ALWAYS import from @/components/design, NOT generic antdv
import { Button, Input, Table } from '@/components/design'
</script>

Tailwind CSS Integration

Absolutely DO NOT use custom CSS (custom classes in <style>) for layout and positioning. Combine the Design Component with Tailwind CSS to handle layout, spacing, sizing, and positioning.

Usage Rules:

1. Design System Components: Handle the functional logic and core UI/UX attributes (Example: <Button> controls color, hover effect, loading state).
2. Tailwind CSS: Handles layout via utility classes (e.g. flex, gap-4, p-6, col-span-2), spacing, sizing, and positioning.

Example Integration:

<template>
  <!-- Use Tailwind classes 'flex', 'gap-4', 'p-6', 'items-center' to design layout -->
  <div class="flex flex-col gap-4 p-6 bg-white rounded-lg shadow-sm">
    
    <div class="flex items-center justify-between">
      <h2 class="text-design-h3-bold">User Information</h2>
      <Button type="primary" label="Save Profile" @click="save" />
    </div>

    <!-- 2-column Grid Layout using Tailwind -->
    <div class="grid grid-cols-2 gap-4">
      <!-- Input component scales to its parents grid item -->
      <Input v-model:value="user.firstName" label="First Name" />
      <Input v-model:value="user.lastName" label="Last Name" />
      
      <!-- Force column spanning -->
      <Input 
        class="col-span-2" 
        v-model:value="user.bio" 
        label="Biography" 
        isTextArea 
      />
    </div>

  </div>
</template>

💡 Override Note: Avoid overwriting internal styles of a Design Component. Before overriding UI, check for available props (such as size, type, or ghost). If you absolutely must override:

1. For small tweaks: Create a custom class and put it in your <style scoped> block.
2. For heavy customizations: Create a separate [name]_custom_design.scss file and import it, keeping the Vue file clean. DO NOT use /deep/ or ::v-deep directly on the component tag to brute-force styles.