DXB: Design eXperience Builder

DXB CSS는 DesignOneX에서 개발하고 관리하는 오픈 소스 프로젝트입니다. Tailwind CSS의 유틸리티 퍼스트 체계를 계승하며, 복잡한 빌드 과정 없이 브라우저 런타임에서 스타일을 실시간 생성합니다.

DXB CSS is an open-source project developed by DesignOneX. It inherits the utility-first approach of Tailwind CSS and generates styles in real-time at browser runtime, without complex build processes.

Runtime Engine No Build MIT Licensed

실시간 런타임 감시

Real-time Runtime Monitoring

MutationObserver를 통해 HTML의 변화를 0ms에 가깝게 포착합니다. 클래스 변경을 즉시 감지하여 스타일을 생성하는 DXB의 심장부입니다.

Captures HTML changes near 0ms via MutationObserver — the heart of DXB.

지능형 파서 (Regex)

Intelligent Parser (Regex)

복잡한 유틸리티 클래스명을 유효한 CSS로 번역합니다. 정교한 정규식 매핑으로 w-1/2, p-4 같은 속성을 정밀한 수치로 변환합니다.

Translates utility class names into valid CSS via sophisticated regex mapping.

임의 값 및 AST 처리

Arbitrary Values & AST Processing

대괄호([]) 문법으로 표준 범위를 벗어난 수치를 자유롭게 적용합니다. AST 분석 로직이 복잡한 수치와 색상을 즉석에서 조립합니다.

Bracket ([]) syntax for out-of-range values. AST analysis assembles complex values on the fly.

Overwhelming Technology of the Runtime Engine

런타임 엔진의 압도적 기술력

기술 비교 항목 Comparison Items	DXB CSS Pure JavaScript Engine	Tailwind CSS PostCSS/Node Engine
작동 메커니즘 (Mechanism)	실시간 브라우저 런타임 (No Build)	사전 컴파일 빌드 (Static Build)
설치 및 환경 (Setup)	Script 한 줄로 즉시 구동	Node.js, NPM 환경 및 종속성 필수
DOM 실시간 대응 (DOM Response)	MutationObserver 실시간 추적	소스 수정 시마다 재컴파일 대기
메모리 관리 (Memory)	Set 객체 기반 지능형 캐싱	PurgeCSS 과정을 통한 수동 최적화
수치 전처리 (Processing)	동적 AST 분석 기반 즉석 조립	Config 내 사전 정의된 수치 위주

ARTICLE 05

베리언트 및 가상 요소 핸들링

Handling Variants & Pseudo-elements

단순 스타일링을 넘어 상호작용을 제어합니다. hover:, focus: 같은 접두사를 분석하여 실시간으로 가상 클래스 셀렉터를 생성하며, before:, after:를 완벽 지원합니다.

Controls interactions beyond simple styling. Generates pseudo-class selectors in real-time from prefixes like hover: and focus:.

                        // Real-time Pseudo-element

                        <div class="hover:scale-110 before:content-['*']">

ARTICLE 06

계층형 미디어 쿼리 엔진

Hierarchical Media Query Engine

모바일 우선(Mobile First) 원칙을 실시간 구현합니다. sm부터 2xl까지 5단계 브레이크포인트를 감시하여 현재 화면에 필요한 반응형 스타일만 선택적으로 생성합니다.

Implements Mobile First in real-time. Monitors 5 breakpoints and selectively generates only the responsive styles actually needed.

2xl

상상하는 모든 스타일 규칙을
단 3분 만에 추가하세요.

Add any style rule in just 3 minutes.

DXB 엔진은 갇혀 있지 않습니다. 오픈소스인 dxb.js의 rules 배열에 정규식 한 줄만 추가하면, 당신만의 독창적인 유틸리티 클래스가 즉시 탄생합니다.

Simply add one line of regex to the dxb.js rules array, and your unique utility class is born instantly.

커스텀 유틸리티

브랜드 컬러 직접 주입

테마 유연성

브레이크포인트 리셋

dxb.rules.config.js

// Infinite Scalability Example
const rules = [
  {
match: /^my-grad-(.+)$/,
prop: 'background',
val: m => `linear-gradient(...)`
  },
// Your new rules go here...
];

MIT Open Source License

DXB CSS는 전 세계 개발자의 자유로운 창작 활동을 보장하기 위해 MIT 라이선스 하에 배포됩니다. 상업적 이용, 소스 수정, 재배포에 어떠한 제한도 없으며 DesignOneX가 100% 독자 설계한 구동 로직으로 법적 안정성을 확보했습니다.

Fully open source under MIT License. No restrictions on commercial use or redistribution. DesignOneX independently designed 100% of the internal logic.

Commercial Free Modify Permitted

지능형 캐싱 및 GPU 가속

generatedCSS (Set 객체)를 통한 캐싱으로 중복 연산을 제거합니다. 내부적으로 하드웨어 가속을 유도하여 60fps의 부드러운 애니메이션과 웹 성능 최적화를 보장합니다.

Caching via Set object eliminates redundant calculations. Hardware acceleration ensures 60fps animations and optimal web performance.

60fps Animation

Set-based Caching

Breaking technical barriers for anyone to build the best design experiences.