Now.js Framework Documentation

Now.js Framework Documentation

คู่มือ CSS Framework

TH 27 Dec 2025 08:40

คู่มือ CSS Framework

คู่มือการใช้งาน Now.js CSS Framework - ระบบ Design System ที่ทันสมัย พร้อม CSS Custom Properties, Grid System และ Utility Classes

สารบัญ

  1. ภาพรวมระบบ
  2. การติดตั้ง
  3. ตัวแปร CSS
  4. ระบบสี
  5. Typography
  6. ระบบ Layout
  7. ระบบ Grid
  8. Components
  9. Utilities
  10. Responsive Design
  11. Dark Theme
  12. แนวทางปฏิบัติที่ดี

ภาพรวมระบบ

Now.js CSS Framework คือระบบ Design System ที่สร้างด้วย CSS Custom Properties (Variables) และเทคนิค CSS สมัยใหม่ เพื่อการพัฒนา UI ที่สม่ำเสมอและยืดหยุ่น

โครงสร้างไฟล์

Now/css/
├── main.css              # ไฟล์หลัก (import ไฟล์ทั้งหมด)
├── variables.css         # Design Tokens และ CSS Variables
├── reset.css             # CSS Reset และ Base Styles
├── theme-dark.css        # Dark Theme Overrides
├── layout.css            # ระบบ Layout (grid, flexbox, sidebar)
├── button.css            # Styles ปุ่ม
├── components.css        # Form Controls และ UI Components
├── input-group.css       # Tag-based Input Styles
├── menu.css              # Navigation Menu Styles
├── tabs.css              # Tab Component Styles
├── modal.css             # Modal Styles
├── dialog.css            # Dialog Styles
├── notification.css      # Toast/Notification Styles
├── calendar.css          # Calendar/Datepicker Styles
├── colorpicker.css       # Color Picker Styles
├── dropdown-panel.css    # Dropdown Panel Styles
├── range-slider.css      # Range Slider Styles
├── media-base.css        # Media Base Styles
├── media-viewer.css      # Media Viewer Component
├── slideshow.css         # Slideshow Component
├── utilities.css         # Utility Classes
├── animations.css        # Animation Keyframes
├── fonts.css             # Font Definitions
└── print.css             # Print Styles

หลักการออกแบบ

  • Consistency - Design Tokens ช่วยให้ UI สอดคล้องกัน
  • Scalability - ขยายและปรับแต่งได้ง่าย
  • Accessibility - รองรับการเข้าถึงสำหรับทุกคน
  • Performance - ออกแบบมาให้ Render ได้รวดเร็ว
  • Maintainability - โค้ดที่จัดระเบียบและดูแลง่าย

การติดตั้ง

วิธีที่ 1: CDN (jsDelivr) - แนะนำ

<!-- CSS แบบย่อ (Core - รวมทุก component) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/goragodwiriya/nowjs@main/Now/dist/now.core.min.css">

[!TIP]
เพิ่มประสิทธิภาพ: เพิ่ม preconnect เพื่อโหลดเร็วขึ้น

<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
<link rel="preload" href="https://cdn.jsdelivr.net/gh/goragodwiriya/nowjs@main/Now/dist/now.core.min.css" as="style">

ไฟล์ CSS ที่ใช้ได้ผ่าน CDN

ไฟล์ คำอธิบาย CDN URL
now.core.min.css ทุก component (minified) https://cdn.jsdelivr.net/gh/goragodwiriya/nowjs@main/Now/dist/now.core.min.css
main.css ทุก component (ไม่ย่อ) https://cdn.jsdelivr.net/gh/goragodwiriya/nowjs@main/Now/css/main.css
variables.css เฉพาะ CSS variables https://cdn.jsdelivr.net/gh/goragodwiriya/nowjs@main/Now/css/variables.css

วิธีที่ 2: ไฟล์ในเครื่อง

Minified (Production)

<link rel="stylesheet" href="Now/dist/now.core.min.css">

Unminified (Development)

<link rel="stylesheet" href="Now/css/main.css">

วิธีที่ 3: Import แยกไฟล์

<link rel="stylesheet" href="Now/css/variables.css">
<link rel="stylesheet" href="Now/css/reset.css">
<link rel="stylesheet" href="Now/css/layout.css">
<!-- เพิ่มไฟล์อื่นๆ ตามต้องการ -->

การใช้งานพื้นฐาน

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>แอปของฉัน</title>
    <link rel="stylesheet" href="Now/css/main.css">
</head>
<body>
    <div class="container">
        <h1>สวัสดี</h1>
        <p>ยินดีต้อนรับสู่ Now.js</p>
    </div>
</body>
</html>

ตัวแปร CSS

Framework ใช้ CSS Custom Properties เพื่อการ Theming ที่สอดคล้องกัน ตัวแปรทั้งหมดกำหนดไว้ใน variables.css

การใช้ตัวแปร

.my-component {
    color: var(--color-primary);
    background: var(--color-surface);
    padding: var(--space-4);
    border-radius: var(--border-radius);
}

การ Override ตัวแปร

/* Override สำหรับ component เฉพาะ */
.custom-button {
    --color-primary: #ff6b6b;
    background: var(--color-primary);
}

ระบบสี

สีตามความหมาย (Semantic Colors)

ตัวแปร ค่า การใช้งาน
--color-success #10b981 สถานะสำเร็จ
--color-warning #f59e0b สถานะเตือน
--color-error #ef4444 สถานะผิดพลาด
--color-info #06b6d4 สถานะข้อมูล

แต่ละสีมี hover และ light variants:

  • --color-success-hover - สีเข้มกว่าสำหรับ hover
  • --color-success-light - สีพื้นหลังอ่อน

สีกลาง (Neutral Colors)

ตัวแปร ค่า การใช้งาน
--color-white #FFFFFF สีขาวบริสุทธิ์
--color-light #EEEEEE เทาอ่อน
--color-silver #CCCCCC เงิน
--color-gray #6C757D เทากลาง
--color-dark-gray #343A40 เทาเข้ม
--color-dark #333333 มืด
--color-black #000000 ดำบริสุทธิ์

สีแบรนด์

ตัวแปร ค่า
--color-blue #0055B8
--color-brown #795548
--color-cyan #17A2B8
--color-gold #FFC107
--color-green #4CAF50
--color-magenta #F50057
--color-orange #FD7E14
--color-pink #E83E8C
--color-purple #6F42C1
--color-red #DC3545

สีแอปพลิเคชัน

ตัวแปร คำอธิบาย
--color-primary สีหลักของแบรนด์
--color-secondary สีรอง
--color-background พื้นหลังหน้า
--color-surface พื้นหลัง Card/Component
--color-text สีข้อความหลัก
--color-text-muted สีข้อความรอง
--color-border สีเส้นขอบ

ตัวอย่างการใช้งาน

<!-- Color Utility Classes -->
<div class="bg-primary color-white">พื้นหลัง Primary</div>
<div class="bg-success color-white">สถานะสำเร็จ</div>
<p class="color-error">ข้อความผิดพลาด</p>

Typography

Font Families

--font-family-base: THSarabunNew, Tahoma, Loma, Arial, Helvetica, sans-serif;
--font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace;

ขนาด Font

ตัวแปร ค่า Pixels
--font-size-xs 0.75rem 12px
--font-size-sm 0.875rem 14px
--font-size-base 1rem 16px
--font-size-lg 1.125rem 18px
--font-size-xl 1.25rem 20px
--font-size-2xl 1.5rem 24px
--font-size-3xl 1.875rem 30px
--font-size-4xl 2.25rem 36px

น้ำหนัก Font

ตัวแปร ค่า
--font-weight-light 300
--font-weight-normal 400
--font-weight-medium 500
--font-weight-semibold 600
--font-weight-bold 700

Headings

<h1>หัวข้อ 1 (36px)</h1>
<h2>หัวข้อ 2 (30px)</h2>
<h3>หัวข้อ 3 (24px)</h3>
<h4>หัวข้อ 4 (20px)</h4>
<h5>หัวข้อ 5 (18px)</h5>
<h6>หัวข้อ 6 (16px)</h6>

ระบบ Layout

Flexbox

<!-- Basic Flex -->
<div class="flex">
    <div>รายการ 1</div>
    <div>รายการ 2</div>
</div>

<!-- Column Layout -->
<div class="flex column">
    <div>รายการ 1</div>
    <div>รายการ 2</div>
</div>

<!-- จัดกลาง -->
<div class="flex center">
    <div>อยู่ตรงกลาง</div>
</div>

<!-- เว้นระยะ -->
<div class="flex fullwidth">
    <div>ซ้าย</div>
    <div>ขวา</div>
</div>

<!-- มี Gap -->
<div class="flex gap">
    <div>รายการ 1</div>
    <div>รายการ 2</div>
</div>

คลาสการจัดตำแหน่ง

<!-- แนวนอน -->
<div class="left">ชิดซ้าย</div>
<div class="center">ตรงกลาง</div>
<div class="right">ชิดขวา</div>

<!-- แนวตั้ง (ใช้กับ flex) -->
<div class="flex top">ชิดบน</div>
<div class="flex middle">ตรงกลาง</div>
<div class="flex bottom">ชิดล่าง</div>
<!-- Sidebar ซ้าย -->
<div class="sidebar-left gap">
    <aside class="sidebar">Sidebar</aside>
    <main class="content">เนื้อหาหลัก</main>
</div>

<!-- Sidebar ขวา -->
<div class="sidebar-right gap">
    <main class="content">เนื้อหาหลัก</main>
    <aside class="sidebar">Sidebar</aside>
</div>

<!-- สามคอลัมน์ -->
<div class="three-columns gap">
    <aside>Sidebar ซ้าย</aside>
    <main class="content">เนื้อหาหลัก</main>
    <aside>Sidebar ขวา</aside>
</div>

ระบบ Grid

Grid 12 คอลัมน์

Grid ใช้ CSS Grid แบบ 12 คอลัมน์

<div class="ggrid">
    <div class="block6">ความกว้าง 50%</div>
    <div class="block6">ความกว้าง 50%</div>
</div>

<div class="ggrid">
    <div class="block4">33.33%</div>
    <div class="block4">33.33%</div>
    <div class="block4">33.33%</div>
</div>

<div class="ggrid">
    <div class="block3">25%</div>
    <div class="block9">75%</div>
</div>

คลาส Grid ที่ใช้ได้

คลาส Span เปอร์เซ็นต์
.block1 1 คอลัมน์ 8.33%
.block2 2 คอลัมน์ 16.66%
.block3 3 คอลัมน์ 25%
.block4 4 คอลัมน์ 33.33%
.block5 5 คอลัมน์ 41.66%
.block6 6 คอลัมน์ 50%
.block7 7 คอลัมน์ 58.33%
.block8 8 คอลัมน์ 66.66%
.block9 9 คอลัมน์ 75%
.block10 10 คอลัมน์ 83.33%
.block11 11 คอลัมน์ 91.66%
.block12 12 คอลัมน์ 100%

Responsive Grid

<div class="ggrid">
    <!-- Desktop: 4 คอลัมน์, Tablet: 6 คอลัมน์, Mobile: 12 คอลัมน์ -->
    <div class="block4 tablet6 mobile12">Responsive Column</div>
</div>

Prefix สำหรับ Responsive

Prefix Breakpoint
wide* > 1440px
xlarge* ≤ 1440px
large* ≤ 1130px
tablet* ≤ 960px
mobile* ≤ 480px

ระยะห่าง Grid

<!-- Gap ปกติ -->
<div class="ggrid">...</div>

<!-- ระยะห่างมากขึ้น -->
<div class="ggrid space">...</div>

<!-- ไม่มี Gap -->
<div class="ggrid collapse">...</div>

Components

ปุ่ม

<!-- ปุ่มพื้นฐาน -->
<button class="btn">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>

<!-- ปุ่มสถานะ -->
<button class="btn btn-success">สำเร็จ</button>
<button class="btn btn-warning">เตือน</button>
<button class="btn btn-danger">อันตราย</button>
<button class="btn btn-info">ข้อมูล</button>

<!-- ขนาด -->
<button class="btn small">เล็ก</button>
<button class="btn">ปกติ</button>
<button class="btn large">ใหญ่</button>

<!-- รูปแบบ -->
<button class="btn btn-primary outline">Outline</button>
<button class="btn text">ข้อความเท่านั้น</button>
<button class="btn pill">รูปยา</button>
<button class="btn circle">●</button>

<!-- สถานะ Loading -->
<button class="btn btn-primary loading">กำลังโหลด...</button>

<!-- ปุ่ม Gradient -->
<button class="btn btn-gradient-blue">Gradient สีน้ำเงิน</button>
<button class="btn btn-gradient-purple">Gradient สีม่วง</button>

<!-- ปุ่ม Social -->
<button class="btn btn-facebook">Facebook</button>
<button class="btn btn-line">LINE</button>

กลุ่มปุ่ม

<div class="btn-group">
    <button class="btn">ซ้าย</button>
    <button class="btn">กลาง</button>
    <button class="btn">ขวา</button>
</div>

<div class="btn-group vertical">
    <button class="btn">บน</button>
    <button class="btn">กลาง</button>
    <button class="btn">ล่าง</button>
</div>

Form Controls

<!-- Input พื้นฐาน -->
<div class="form-control">
    <input type="text" placeholder="กรอกข้อความ">
</div>

<!-- Input พร้อมไอคอน -->
<span class="form-control icon-user">
    <input type="text" placeholder="ชื่อผู้ใช้">
</span>

<!-- Select -->
<span class="form-control icon-list">
    <select>
        <option>ตัวเลือก 1</option>
        <option>ตัวเลือก 2</option>
    </select>
</span>

<!-- Textarea -->
<span class="form-control">
    <textarea placeholder="กรอกข้อความ"></textarea>
</span>

สถานะการตรวจสอบ

<span class="form-control valid">
    <input type="text" value="ข้อมูลถูกต้อง">
</span>

<span class="form-control invalid">
    <input type="text" value="ข้อมูลไม่ถูกต้อง">
</span>

Switch Toggle

<label>
    <input type="checkbox" class="switch" id="toggle1">
    <label for="toggle1">เปิดใช้งานฟีเจอร์</label>
</label>

Badges

<span class="badge-success" data-badge="สำเร็จ">สถานะ</span>
<span class="badge-error" data-badge="ล้มเหลว">สถานะ</span>
<span class="badge-warning" data-badge="รอดำเนินการ">สถานะ</span>
<span class="badge-info" data-badge="ข้อมูล">สถานะ</span>

ช่องค้นหา

<div class="search">
    <label>
        <input type="text" class="search-input" placeholder="ค้นหา...">
        <button type="button" class="icon-close"></button>
    </label>
</div>

Utilities

คลาสความกว้าง

คลาส ความกว้าง
.width5 5%
.width10 10%
.width15 15%
.width20 20%
.width25 25%
.width30 30%
.width33 33.33%
.width40 40%
.width50 50%
.width60 60%
.width66 66.66%
.width70 70%
.width75 75%
.width80 80%
.width90 90%
.width100 100%
.fullwidth 100%

คลาส Display

<div class="block">Block element</div>
<div class="inline">Inline element</div>
<div class="inline-block">Inline-block element</div>
<div class="flex">Flex container</div>
<div class="grid">Grid container</div>
<div class="hidden">ซ่อน element</div>

Color Utilities

<!-- สีข้อความ -->
<span class="color-white">ขาว</span>
<span class="color-gray">เทา</span>
<span class="color-dark">มืด</span>
<span class="color-blue">น้ำเงิน</span>
<span class="color-green">เขียว</span>
<span class="color-red">แดง</span>
<span class="color-orange">ส้ม</span>
<span class="color-purple">ม่วง</span>

<!-- สีพื้นหลัง -->
<div class="bg-white">พื้นหลังขาว</div>
<div class="bg-light">พื้นหลังอ่อน</div>
<div class="bg-dark">พื้นหลังมืด</div>
<div class="bg-blue">พื้นหลังน้ำเงิน</div>
<div class="bg-green">พื้นหลังเขียว</div>
<div class="bg-red">พื้นหลังแดง</div>

<!-- สีสถานะ -->
<span class="success">ข้อความสำเร็จ</span>
<span class="warning">ข้อความเตือน</span>
<span class="error">ข้อความผิดพลาด</span>
<span class="info">ข้อความข้อมูล</span>

Status Badges

<span class="status0">สถานะ 0</span>
<span class="status1">สถานะ 1</span>
<span class="status2">สถานะ 2</span>
<!-- ... ถึง status11 -->

เส้นขอบและเงา

<div class="border">มีเส้นขอบ</div>
<div class="border rounded">เส้นขอบโค้ง</div>
<div class="border circle">เส้นขอบวงกลม</div>

<div class="shadow-sm">เงาเล็ก</div>
<div class="shadow-md">เงากลาง</div>
<div class="shadow-lg">เงาใหญ่</div>

Text Utilities

<span class="big">ข้อความใหญ่ขึ้น (1.2em)</span>
<span class="small">ข้อความเล็กลง (0.9em)</span>
<p class="comment">ข้อความ Comment (สีเขียว, 0.9rem)</p>
<span class="nowrap">ข้อความไม่ขึ้นบรรทัดใหม่</span>
<span class="wrap">ข้อความขึ้นบรรทัดใหม่</span>

Responsive Design

Breakpoints

ชื่อ ความกว้าง การใช้งาน
Wide > 1440px Desktop ขนาดใหญ่
XLarge ≤ 1440px Desktop
Large ≤ 1130px Desktop ขนาดเล็ก
Tablet ≤ 960px แท็บเล็ต
Mobile ≤ 480px มือถือ

ตัวอย่าง Media Query

/* Mobile First (แนะนำ) */
.my-component {
    padding: var(--space-2);
}

@media (min-width: 768px) {
    .my-component {
        padding: var(--space-4);
    }
}

/* Desktop First */
@media (max-width: 768px) {
    .my-component {
        padding: var(--space-2);
    }
}

Dark Theme

เปิดใช้งาน Dark Theme

<!-- เพิ่ม data-theme="dark" ที่ html หรือ body -->
<html data-theme="dark">
<body>
    <!-- เนื้อหาใช้ dark theme อัตโนมัติ -->
</body>
</html>

ตัวแปร Dark Theme

Dark theme จะ Override ตัวแปรเหล่านี้:

ตัวแปร Light Dark
--color-background #ffffff #0f172a
--color-surface #f8fafc #1e293b
--color-text #1e293b #f8fafc
--color-border rgba(0,0,0,0.2) #334155

Components ที่รองรับ Theme

/* Components ปรับตัวตาม theme อัตโนมัติ */
.my-component {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

แนวทางปฏิบัติที่ดี

1. ใช้ตัวแปร CSS

/* ✅ ดี - ใช้ตัวแปรจากระบบ */
.component {
    color: var(--color-primary);
    padding: var(--space-4);
}

/* ❌ ไม่ดี - ค่าตายตัว */
.component {
    color: #2563eb;
    padding: 16px;
}

2. ตั้งชื่อ Class ตามความหมาย

/* ✅ ดี - ชื่อที่อธิบายหน้าที่ */
.btn-primary { }
.card-header { }

/* ❌ ไม่ดี - ชื่อตามลักษณะ */
.blue-button { }
.big-text { }

3. Mobile First

/* ✅ ดี - Mobile First */
.component { padding: var(--space-2); }

@media (min-width: 768px) {
    .component { padding: var(--space-4); }
}

4. ใช้ Transform สำหรับ Animation

/* ✅ ดี - GPU accelerated */
.component {
    transform: translateX(0);
    transition: transform 0.3s;
}

/* ❌ ไม่ดี - ทำให้เกิด reflow */
.component {
    left: 0;
    transition: left 0.3s;
}

5. Accessibility

/* Focus visible สำหรับ keyboard navigation */
.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* รองรับ reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

ขยายระบบ

เพิ่มตัวแปรใหม่

:root {
    /* สีที่กำหนดเอง */
    --color-brand-primary: #ff6b6b;
    --color-brand-secondary: #4ecdc4;

    /* Spacing ที่กำหนดเอง */
    --space-7: calc(var(--space-unit) * 7);
}

สร้าง Component ใหม่

/* ทำตามรูปแบบของ Design System */
.custom-card {
    /* Layout */
    display: flex;
    flex-direction: column;

    /* Spacing */
    padding: var(--space-4);
    gap: var(--space-2);

    /* Visual */
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);

    /* Typography */
    color: var(--color-text);

    /* Transitions */
    transition: box-shadow var(--transition-duration);
}

.custom-card:hover {
    box-shadow: var(--shadow-lg);
}

ระบบ Z-Index

Layer ตัวแปร ค่า
Sticky --z-index-sticky 988
Fixed --z-index-fixed 989
Dropdown --z-index-dropdown 1000
Menu Backdrop --z-index-menu-backdrop 1010
Mobile Menu --z-index-menu-mobile 1020
Submenu --z-index-menu-submenu 1030
Popover --z-index-popover 1050
Tooltip --z-index-tooltip 1060
Loading --z-index-loading 1070
Modal --z-index-modal 1080
Toast --z-index-toast 1090
Alert --z-index-alert 1100

เอกสารที่เกี่ยวข้อง

  • Variables Reference - การกำหนดตัวแปรทั้งหมด
  • Components - การรวม JavaScript Component
  • Forms - คู่มือการจัดการ Form
  • Animations - Animation Utilities

Did you spot an improvement?

Enhance the documentation by contributing updates or translations.

Visit project repository