Now.js Framework Documentation

Now.js Framework Documentation

CSS Framework Guide

EN 27 Dec 2025 08:40

CSS Framework Guide

Comprehensive guide for using the Now.js CSS Framework - a modern design system with CSS custom properties, responsive grid, and utility classes.

Table of Contents

  1. Overview
  2. Installation
  3. CSS Variables
  4. Color System
  5. Typography
  6. Layout System
  7. Grid System
  8. Components
  9. Utilities
  10. Responsive Design
  11. Dark Theme
  12. Best Practices

Overview

The Now.js CSS Framework is a design system built with CSS Custom Properties (Variables) and modern CSS techniques for consistent and flexible UI development.

File Structure

Now/css/
├── main.css              # Main entry point (imports all files)
├── variables.css         # Design tokens and CSS variables
├── reset.css            # CSS reset and base styles
├── theme-dark.css       # Dark theme overrides
├── layout.css           # Layout system (grid, flexbox, sidebar)
├── button.css           # Button styles
├── components.css       # Form controls and 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

Design Principles

  • Consistency - Design tokens ensure uniformity
  • Scalability - Easy to extend and customize
  • Accessibility - Built-in a11y support
  • Performance - Optimized for fast rendering
  • Maintainability - Clean, organized code

Installation

<!-- Minified CSS (Core - includes all components) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/goragodwiriya/nowjs@main/Now/dist/now.core.min.css">

[!TIP]
Performance Optimization: Add preconnect for faster loading

<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">

Available CSS Files via CDN

File Description CDN URL
now.core.min.css All components (minified) https://cdn.jsdelivr.net/gh/goragodwiriya/nowjs@main/Now/dist/now.core.min.css
main.css All components (unminified) https://cdn.jsdelivr.net/gh/goragodwiriya/nowjs@main/Now/css/main.css
variables.css CSS variables only https://cdn.jsdelivr.net/gh/goragodwiriya/nowjs@main/Now/css/variables.css

Method 2: Local Files

Minified (Production)

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

Unminified (Development)

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

Method 3: Import Individual Files

<link rel="stylesheet" href="Now/css/variables.css">
<link rel="stylesheet" href="Now/css/reset.css">
<link rel="stylesheet" href="Now/css/layout.css">
<!-- Add other files as needed -->

Basic Usage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My App</title>
    <link rel="stylesheet" href="Now/css/main.css">
</head>
<body>
    <div class="container">
        <h1>Hello World</h1>
        <p>Welcome to Now.js</p>
    </div>
</body>
</html>

CSS Variables

The framework uses CSS Custom Properties for consistent theming. All variables are defined in variables.css.

Using Variables

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

Overriding Variables

/* Override for specific component */
.custom-button {
    --color-primary: #ff6b6b;
    background: var(--color-primary);
}

Color System

Semantic Colors (Status)

Variable Value Usage
--color-success #10b981 Success states
--color-warning #f59e0b Warning states
--color-error #ef4444 Error states
--color-info #06b6d4 Info states

Each semantic color has hover and light variants:

  • --color-success-hover - Darker shade for hover
  • --color-success-light - Light background shade

Neutral Colors

Variable Value Usage
--color-white #FFFFFF Pure white
--color-light #EEEEEE Light gray
--color-silver #CCCCCC Silver
--color-gray #6C757D Medium gray
--color-dark-gray #343A40 Dark gray
--color-dark #333333 Dark
--color-black #000000 Pure black

Brand Colors

Variable Value
--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

Application Colors

Variable Description
--color-primary Primary brand color
--color-secondary Secondary accent
--color-background Page background
--color-surface Card/component background
--color-text Main text color
--color-text-muted Secondary text
--color-border Border color

Usage Examples

<!-- Color utility classes -->
<div class="bg-primary color-white">Primary Background</div>
<div class="bg-success color-white">Success State</div>
<p class="color-error">Error Text</p>

Typography

Font Families

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

Font Sizes

Variable Value 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 Weights

Variable Value
--font-weight-light 300
--font-weight-normal 400
--font-weight-medium 500
--font-weight-semibold 600
--font-weight-bold 700

Headings

<h1>Heading 1 (36px)</h1>
<h2>Heading 2 (30px)</h2>
<h3>Heading 3 (24px)</h3>
<h4>Heading 4 (20px)</h4>
<h5>Heading 5 (18px)</h5>
<h6>Heading 6 (16px)</h6>

Layout System

Flexbox

<!-- Basic Flex -->
<div class="flex">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

<!-- Column Layout -->
<div class="flex column">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

<!-- Centered Content -->
<div class="flex center">
    <div>Centered</div>
</div>

<!-- Space Between -->
<div class="flex fullwidth">
    <div>Left</div>
    <div>Right</div>
</div>

<!-- With Gap -->
<div class="flex gap">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

Alignment Classes

<!-- Horizontal -->
<div class="left">Left aligned</div>
<div class="center">Center aligned</div>
<div class="right">Right aligned</div>

<!-- Vertical (with flex) -->
<div class="flex top">Top aligned</div>
<div class="flex middle">Middle aligned</div>
<div class="flex bottom">Bottom aligned</div>
<!-- Left Sidebar -->
<div class="sidebar-left gap">
    <aside class="sidebar">Sidebar</aside>
    <main class="content">Main Content</main>
</div>

<!-- Right Sidebar -->
<div class="sidebar-right gap">
    <main class="content">Main Content</main>
    <aside class="sidebar">Sidebar</aside>
</div>

<!-- Three Columns -->
<div class="three-columns gap">
    <aside>Left Sidebar</aside>
    <main class="content">Main Content</main>
    <aside>Right Sidebar</aside>
</div>

Grid System

12-Column Grid

The grid uses CSS Grid with 12 columns.

<div class="ggrid">
    <div class="block6">50% Width</div>
    <div class="block6">50% Width</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>

Available Grid Classes

Class Span Percentage
.block1 1 column 8.33%
.block2 2 columns 16.66%
.block3 3 columns 25%
.block4 4 columns 33.33%
.block5 5 columns 41.66%
.block6 6 columns 50%
.block7 7 columns 58.33%
.block8 8 columns 66.66%
.block9 9 columns 75%
.block10 10 columns 83.33%
.block11 11 columns 91.66%
.block12 12 columns 100%

Responsive Grid

<div class="ggrid">
    <!-- Desktop: 4 columns, Tablet: 6 columns, Mobile: 12 columns -->
    <div class="block4 tablet6 mobile12">Responsive Column</div>
</div>

Responsive Prefixes

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

Grid Spacing

<!-- Default gap -->
<div class="ggrid">...</div>

<!-- More space -->
<div class="ggrid space">...</div>

<!-- No gap -->
<div class="ggrid collapse">...</div>

Components

Buttons

<!-- Basic Buttons -->
<button class="btn">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>

<!-- Status Buttons -->
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-info">Info</button>

<!-- Sizes -->
<button class="btn small">Small</button>
<button class="btn">Default</button>
<button class="btn large">Large</button>

<!-- Variants -->
<button class="btn btn-primary outline">Outline</button>
<button class="btn text">Text Only</button>
<button class="btn pill">Pill Shape</button>
<button class="btn circle">●</button>

<!-- Loading State -->
<button class="btn btn-primary loading">Loading...</button>

<!-- Gradient Buttons -->
<button class="btn btn-gradient-blue">Gradient Blue</button>
<button class="btn btn-gradient-purple">Gradient Purple</button>

<!-- Social Buttons -->
<button class="btn btn-facebook">Facebook</button>
<button class="btn btn-line">LINE</button>

Button Groups

<div class="btn-group">
    <button class="btn">Left</button>
    <button class="btn">Center</button>
    <button class="btn">Right</button>
</div>

<div class="btn-group vertical">
    <button class="btn">Top</button>
    <button class="btn">Middle</button>
    <button class="btn">Bottom</button>
</div>

Form Controls

<!-- Basic Input -->
<div class="form-control">
    <input type="text" placeholder="Enter text">
</div>

<!-- Input with Icon -->
<span class="form-control icon-user">
    <input type="text" placeholder="Username">
</span>

<!-- Select -->
<span class="form-control icon-list">
    <select>
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
</span>

<!-- Textarea -->
<span class="form-control">
    <textarea placeholder="Enter message"></textarea>
</span>

Validation States

<span class="form-control valid">
    <input type="text" value="Valid input">
</span>

<span class="form-control invalid">
    <input type="text" value="Invalid input">
</span>

Switch Toggle

<label>
    <input type="checkbox" class="switch" id="toggle1">
    <label for="toggle1">Enable feature</label>
</label>

Badges

<span class="badge-success" data-badge="Complete">Status</span>
<span class="badge-error" data-badge="Failed">Status</span>
<span class="badge-warning" data-badge="Pending">Status</span>
<span class="badge-info" data-badge="Info">Status</span>

Search Component

<div class="search">
    <label>
        <input type="text" class="search-input" placeholder="Search...">
        <button type="button" class="icon-close"></button>
    </label>
</div>

Utilities

Width Classes

Class Width
.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 Classes

<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">Hidden element</div>

Color Utilities

<!-- Text Colors -->
<span class="color-white">White</span>
<span class="color-gray">Gray</span>
<span class="color-dark">Dark</span>
<span class="color-blue">Blue</span>
<span class="color-green">Green</span>
<span class="color-red">Red</span>
<span class="color-orange">Orange</span>
<span class="color-purple">Purple</span>

<!-- Background Colors -->
<div class="bg-white">White BG</div>
<div class="bg-light">Light BG</div>
<div class="bg-dark">Dark BG</div>
<div class="bg-blue">Blue BG</div>
<div class="bg-green">Green BG</div>
<div class="bg-red">Red BG</div>

<!-- Status Colors -->
<span class="success">Success text</span>
<span class="warning">Warning text</span>
<span class="error">Error text</span>
<span class="info">Info text</span>

Status Badges

<span class="status0">Status 0</span>
<span class="status1">Status 1</span>
<span class="status2">Status 2</span>
<!-- ... up to status11 -->

Borders & Shadows

<div class="border">With border</div>
<div class="border rounded">Rounded border</div>
<div class="border circle">Circle border</div>

<div class="shadow-sm">Small shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>

Text Utilities

<span class="big">Larger text (1.2em)</span>
<span class="small">Smaller text (0.9em)</span>
<p class="comment">Comment text (green, 0.9rem)</p>
<span class="nowrap">No wrap text</span>
<span class="wrap">Wrapping text</span>

Responsive Design

Breakpoints

Name Width Usage
Wide > 1440px Large desktop
XLarge ≤ 1440px Desktop
Large ≤ 1130px Small desktop
Tablet ≤ 960px Tablet
Mobile ≤ 480px Mobile

Media Query Examples

/* Mobile first approach (recommended) */
.my-component {
    padding: var(--space-2);
}

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

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

Dark Theme

Enabling Dark Theme

<!-- Add data-theme="dark" to html or body -->
<html data-theme="dark">
<body>
    <!-- Content uses dark theme automatically -->
</body>
</html>

Dark Theme Variables

The dark theme overrides these key variables:

Variable Light Dark
--color-background #ffffff #0f172a
--color-surface #f8fafc #1e293b
--color-text #1e293b #f8fafc
--color-border rgba(0,0,0,0.2) #334155

Theme-Aware Components

/* Components automatically adapt to theme */
.my-component {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

Best Practices

1. Use CSS Variables

/* ✅ Good - Use system variables */
.component {
    color: var(--color-primary);
    padding: var(--space-4);
}

/* ❌ Bad - Hardcoded values */
.component {
    color: #2563eb;
    padding: 16px;
}

2. Semantic Class Names

/* ✅ Good - Descriptive names */
.btn-primary { }
.card-header { }

/* ❌ Bad - Appearance-based names */
.blue-button { }
.big-text { }

3. Mobile First

/* ✅ Good - Mobile first */
.component { padding: var(--space-2); }

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

4. Use Transform for Animations

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

/* ❌ Bad - Causes reflow */
.component {
    left: 0;
    transition: left 0.3s;
}

5. Accessibility

/* Focus visible for keyboard navigation */
.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

Extending the System

Adding Custom Variables

:root {
    /* Custom colors */
    --color-brand-primary: #ff6b6b;
    --color-brand-secondary: #4ecdc4;

    /* Custom spacing */
    --space-7: calc(var(--space-unit) * 7);
}

Creating Custom Components

/* Follow the design system patterns */
.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 System

Layer Variable Value
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

Did you spot an improvement?

Enhance the documentation by contributing updates or translations.

Visit project repository