@bigtablet/design-system 1.16.2 → 1.17.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +29 -0
- package/dist/vanilla/bigtablet.css +1060 -0
- package/dist/vanilla/bigtablet.css.map +1 -0
- package/dist/vanilla/bigtablet.js +778 -0
- package/dist/vanilla/bigtablet.min.css +1 -0
- package/dist/vanilla/bigtablet.min.css.map +1 -0
- package/dist/vanilla/bigtablet.min.js +35 -0
- package/dist/vanilla/examples/index.html +548 -0
- package/package.json +17 -4
package/README.md
CHANGED
|
@@ -20,6 +20,7 @@ Bigtablet의 공식 디자인 시스템으로, Foundation(디자인 토큰)과 C
|
|
|
20
20
|
- [주요 특징](#주요-특징)
|
|
21
21
|
- [설치](#설치)
|
|
22
22
|
- [빠른 시작](#빠른-시작)
|
|
23
|
+
- [Vanilla JS (HTML/CSS/JS)](#vanilla-js-htmlcssjs)
|
|
23
24
|
- [컴포넌트](#컴포넌트)
|
|
24
25
|
- [Foundation (디자인 토큰)](#foundation-디자인-토큰)
|
|
25
26
|
- [개발 가이드](#개발-가이드)
|
|
@@ -32,6 +33,7 @@ Bigtablet의 공식 디자인 시스템으로, Foundation(디자인 토큰)과 C
|
|
|
32
33
|
- **React 19 지원** - 최신 React 버전 완벽 지원
|
|
33
34
|
- **TypeScript** - 완전한 타입 안정성
|
|
34
35
|
- **Pure React / Next.js** - 프레임워크별 최적화된 번들 제공
|
|
36
|
+
- **Vanilla JS** - Thymeleaf, JSP 등 서버 템플릿 지원
|
|
35
37
|
- **디자인 토큰** - 일관된 색상, 타이포그래피, 간격 시스템
|
|
36
38
|
- **접근성(a11y)** - 키보드 네비게이션, 스크린 리더 호환
|
|
37
39
|
- **Storybook** - 인터랙티브 문서화
|
|
@@ -100,6 +102,33 @@ export default function Layout({ children }) {
|
|
|
100
102
|
|
|
101
103
|
---
|
|
102
104
|
|
|
105
|
+
## Vanilla JS (HTML/CSS/JS)
|
|
106
|
+
|
|
107
|
+
React 없이 **Thymeleaf, JSP, PHP** 등 서버 템플릿 환경에서 사용할 수 있습니다.
|
|
108
|
+
|
|
109
|
+
```html
|
|
110
|
+
<!-- CSS -->
|
|
111
|
+
<link rel="stylesheet" href="https://unpkg.com/@bigtablet/design-system/dist/vanilla/bigtablet.min.css">
|
|
112
|
+
|
|
113
|
+
<!-- JS (선택) -->
|
|
114
|
+
<script src="https://unpkg.com/@bigtablet/design-system/dist/vanilla/bigtablet.min.js"></script>
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
```html
|
|
118
|
+
<button class="bt-button bt-button--md bt-button--primary">버튼</button>
|
|
119
|
+
|
|
120
|
+
<div class="bt-text-field">
|
|
121
|
+
<label class="bt-text-field__label">이메일</label>
|
|
122
|
+
<div class="bt-text-field__wrap">
|
|
123
|
+
<input type="text" class="bt-text-field__input bt-text-field__input--outline bt-text-field__input--md">
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
👉 **[Vanilla JS 전체 문서 보기](./docs/VANILLA.md)**
|
|
129
|
+
|
|
130
|
+
---
|
|
131
|
+
|
|
103
132
|
## 컴포넌트
|
|
104
133
|
|
|
105
134
|
### General
|