@rhavenside/baseline-ui 1.0.13 → 1.0.14
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 +26 -24
- package/package.json +2 -6
package/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# Baseline UI
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A technical glass design framework with SCSS source and compiled CSS.
|
|
4
|
+
|
|
5
|
+
**Homepage/Documentation:** https://baseline.rhavenside.de
|
|
4
6
|
|
|
5
7
|
## Installation
|
|
6
8
|
|
|
@@ -39,17 +41,17 @@ npm install @rhavenside/baseline-ui
|
|
|
39
41
|
// ES Module Import
|
|
40
42
|
import '@rhavenside/baseline-ui/dist/baseline.js';
|
|
41
43
|
|
|
42
|
-
//
|
|
44
|
+
// Or manually
|
|
43
45
|
import { initModal, openModal, closeModal } from '@rhavenside/baseline-ui/dist/baseline.js';
|
|
44
46
|
```
|
|
45
47
|
|
|
46
|
-
##
|
|
48
|
+
## Usage
|
|
47
49
|
|
|
48
50
|
### HTML
|
|
49
51
|
|
|
50
52
|
```html
|
|
51
53
|
<!DOCTYPE html>
|
|
52
|
-
<html lang="
|
|
54
|
+
<html lang="en">
|
|
53
55
|
<head>
|
|
54
56
|
<meta charset="UTF-8">
|
|
55
57
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
@@ -58,14 +60,14 @@ import { initModal, openModal, closeModal } from '@rhavenside/baseline-ui/dist/b
|
|
|
58
60
|
</head>
|
|
59
61
|
<body>
|
|
60
62
|
<div class="bl-container">
|
|
61
|
-
<h1>
|
|
62
|
-
<button class="bl-btn bl-btn-primary">
|
|
63
|
+
<h1>Welcome</h1>
|
|
64
|
+
<button class="bl-btn bl-btn-primary">Click me</button>
|
|
63
65
|
</div>
|
|
64
66
|
</body>
|
|
65
67
|
</html>
|
|
66
68
|
```
|
|
67
69
|
|
|
68
|
-
###
|
|
70
|
+
### Components
|
|
69
71
|
|
|
70
72
|
#### Button
|
|
71
73
|
|
|
@@ -81,10 +83,10 @@ import { initModal, openModal, closeModal } from '@rhavenside/baseline-ui/dist/b
|
|
|
81
83
|
```html
|
|
82
84
|
<div class="bl-card">
|
|
83
85
|
<div class="bl-card-header">
|
|
84
|
-
<h3 class="bl-card-title">
|
|
86
|
+
<h3 class="bl-card-title">Title</h3>
|
|
85
87
|
</div>
|
|
86
88
|
<div class="bl-card-body">
|
|
87
|
-
<p>
|
|
89
|
+
<p>Content</p>
|
|
88
90
|
</div>
|
|
89
91
|
</div>
|
|
90
92
|
```
|
|
@@ -93,7 +95,7 @@ import { initModal, openModal, closeModal } from '@rhavenside/baseline-ui/dist/b
|
|
|
93
95
|
|
|
94
96
|
```html
|
|
95
97
|
<div class="bl-form-group">
|
|
96
|
-
<label class="bl-form-label" for="email">
|
|
98
|
+
<label class="bl-form-label" for="email">Email</label>
|
|
97
99
|
<input type="email" id="email" class="bl-input" placeholder="name@example.com">
|
|
98
100
|
</div>
|
|
99
101
|
```
|
|
@@ -102,8 +104,8 @@ import { initModal, openModal, closeModal } from '@rhavenside/baseline-ui/dist/b
|
|
|
102
104
|
|
|
103
105
|
```html
|
|
104
106
|
<div class="bl-row">
|
|
105
|
-
<div class="bl-col-6">50%
|
|
106
|
-
<div class="bl-col-6">50%
|
|
107
|
+
<div class="bl-col-6">50% Width</div>
|
|
108
|
+
<div class="bl-col-6">50% Width</div>
|
|
107
109
|
</div>
|
|
108
110
|
```
|
|
109
111
|
|
|
@@ -111,13 +113,13 @@ import { initModal, openModal, closeModal } from '@rhavenside/baseline-ui/dist/b
|
|
|
111
113
|
|
|
112
114
|
```html
|
|
113
115
|
<div class="m-md p-lg">Margin & Padding</div>
|
|
114
|
-
<div class="bl-text-center bl-text-lg">
|
|
116
|
+
<div class="bl-text-center bl-text-lg">Centered Text</div>
|
|
115
117
|
<div class="bl-d-flex bl-justify-center">Flexbox Center</div>
|
|
116
118
|
```
|
|
117
119
|
|
|
118
120
|
### Design Tokens
|
|
119
121
|
|
|
120
|
-
|
|
122
|
+
All design tokens are available as CSS custom properties:
|
|
121
123
|
|
|
122
124
|
```css
|
|
123
125
|
:root {
|
|
@@ -130,33 +132,33 @@ Alle Design-Tokens sind als CSS Custom Properties verfügbar:
|
|
|
130
132
|
|
|
131
133
|
### JavaScript API
|
|
132
134
|
|
|
133
|
-
Baseline UI
|
|
135
|
+
Baseline UI provides optional JavaScript for interactive components:
|
|
134
136
|
|
|
135
|
-
#### Auto-
|
|
137
|
+
#### Auto-initialization
|
|
136
138
|
|
|
137
|
-
|
|
139
|
+
All components are automatically initialized when JavaScript is loaded:
|
|
138
140
|
|
|
139
141
|
```html
|
|
140
142
|
<script type="module" src="node_modules/@rhavenside/baseline-ui/dist/baseline.js"></script>
|
|
141
143
|
```
|
|
142
144
|
|
|
143
|
-
####
|
|
145
|
+
#### Manual Usage
|
|
144
146
|
|
|
145
147
|
```javascript
|
|
146
148
|
import { initModal, openModal, closeModal } from '@rhavenside/baseline-ui/dist/baseline.js';
|
|
147
149
|
|
|
148
|
-
//
|
|
150
|
+
// Open modal
|
|
149
151
|
openModal('my-modal');
|
|
150
152
|
|
|
151
|
-
//
|
|
153
|
+
// Close modal
|
|
152
154
|
closeModal('my-modal');
|
|
153
155
|
|
|
154
|
-
//
|
|
156
|
+
// Initialize manually
|
|
155
157
|
const modal = document.getElementById('my-modal');
|
|
156
158
|
initModal(modal);
|
|
157
159
|
```
|
|
158
160
|
|
|
159
|
-
####
|
|
161
|
+
#### Available Functions
|
|
160
162
|
|
|
161
163
|
- **Modal**: `initModal()`, `openModal()`, `closeModal()`
|
|
162
164
|
- **Dropdown**: `initDropdown()`
|
|
@@ -164,6 +166,6 @@ initModal(modal);
|
|
|
164
166
|
- **Tabs**: `initTabs()`
|
|
165
167
|
- **Alert**: `initAlert()`, `dismissAlert()`
|
|
166
168
|
|
|
167
|
-
##
|
|
169
|
+
## License
|
|
168
170
|
|
|
169
|
-
MIT License -
|
|
171
|
+
MIT License - see [LICENSE](LICENSE) file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rhavenside/baseline-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.14",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A technical glass design framework with SCSS source and compiled CSS - minimalist, rectangular forms with milky glass effects",
|
|
6
6
|
"main": "dist/baseline.css",
|
|
@@ -46,14 +46,10 @@
|
|
|
46
46
|
],
|
|
47
47
|
"author": "",
|
|
48
48
|
"license": "MIT",
|
|
49
|
-
"repository": {
|
|
50
|
-
"type": "git",
|
|
51
|
-
"url": "https://github.com/e7a-0-e7a/baseline.git"
|
|
52
|
-
},
|
|
53
49
|
"bugs": {
|
|
54
50
|
"url": "https://github.com/e7a-0-e7a/baseline/issues"
|
|
55
51
|
},
|
|
56
|
-
"homepage": "https://
|
|
52
|
+
"homepage": "https://baseline.rhavenside.de",
|
|
57
53
|
"devDependencies": {
|
|
58
54
|
"sass": "^1.69.0",
|
|
59
55
|
"esbuild": "^0.19.0"
|