beathers 5.7.3 → 5.7.5
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.
Potentially problematic release.
This version of beathers might be problematic. Click here for more details.
- package/.prettierrc.js +8 -8
- package/CHANGELOG +274 -267
- package/css/beathers.min.css +3 -3
- package/css/beathers.min.css.map +1 -1
- package/docs/colors.md +250 -250
- package/docs/grid-system.md +130 -130
- package/docs/shaping.md +272 -272
- package/docs/typography.md +124 -124
- package/package.json +105 -101
- package/readme.md +301 -301
- package/scripts/cli.js +0 -0
- package/scss/_variables.scss +106 -106
- package/scss/beathers.min.scss +15 -15
- package/scss/functions/_colors.scss +230 -230
- package/scss/functions/_mediaQueries.scss +136 -136
- package/scss/functions/_others.scss +79 -79
- package/scss/functions/_typographic.scss +129 -129
- package/scss/functions/_validations.scss +251 -251
- package/scss/settings/_configs.scss +270 -270
- package/scss/settings/_defaults.scss +214 -214
- package/scss/settings/_index.scss +90 -90
- package/scss/style/_button.scss +101 -101
- package/scss/style/_colors.scss +146 -146
- package/scss/style/_dialog.scss +146 -146
- package/scss/style/_glass.scss +80 -80
- package/scss/style/_grid.scss +95 -95
- package/scss/style/_loader.scss +62 -62
- package/scss/style/_resets.scss +168 -168
- package/scss/style/_shaping.scss +439 -432
- package/scss/style/_typographic.scss +345 -345
package/docs/shaping.md
CHANGED
|
@@ -1,272 +1,272 @@
|
|
|
1
|
-
# Shaping Documentation
|
|
2
|
-
|
|
3
|
-
> Simple guide to visual styling utilities in Beathers CSS framework
|
|
4
|
-
|
|
5
|
-
## Table of Contents
|
|
6
|
-
|
|
7
|
-
- [Shadows](#shadows)
|
|
8
|
-
- [Glass Effects](#glass-effects)
|
|
9
|
-
- [Display & Visibility](#display--visibility)
|
|
10
|
-
- [Overflow](#overflow)
|
|
11
|
-
- [Object Fit](#object-fit)
|
|
12
|
-
- [Positioning](#positioning)
|
|
13
|
-
- [Sizing](#sizing)
|
|
14
|
-
- [Border Radius](#border-radius)
|
|
15
|
-
|
|
16
|
-
---
|
|
17
|
-
|
|
18
|
-
## Shadows
|
|
19
|
-
|
|
20
|
-
### Normal State
|
|
21
|
-
|
|
22
|
-
```html
|
|
23
|
-
<div class="shadow:light">Light shadow</div>
|
|
24
|
-
<div class="shadow:soft">Soft shadow</div>
|
|
25
|
-
<div class="shadow:medium">Medium shadow</div>
|
|
26
|
-
<div class="shadow:solid">Solid shadow</div>
|
|
27
|
-
<div class="shadow:floating">Floating shadow</div>
|
|
28
|
-
<div class="shadow:flat">Flat shadow</div>
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
### Responsive Shadows
|
|
32
|
-
|
|
33
|
-
```html
|
|
34
|
-
<div class="shadow:soft md:shadow:medium lg:shadow:floating">Responsive shadow</div>
|
|
35
|
-
<div class="shadow:light lg:shadow:solid">Mobile light, desktop solid</div>
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
---
|
|
39
|
-
|
|
40
|
-
## Glass Effects
|
|
41
|
-
|
|
42
|
-
### Normal State
|
|
43
|
-
|
|
44
|
-
```html
|
|
45
|
-
<div class="bg:glass">Glass effect element</div>
|
|
46
|
-
<div class="bg:glass radius:full">Rounded glass effect</div>
|
|
47
|
-
<div class="bg:glass shadow:soft">Glass with soft shadow</div>
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
### Theme Support
|
|
51
|
-
|
|
52
|
-
```html
|
|
53
|
-
<!-- Context method -->
|
|
54
|
-
<div class="light">
|
|
55
|
-
<div class="bg:glass">Light theme glass</div>
|
|
56
|
-
</div>
|
|
57
|
-
<div class="dark">
|
|
58
|
-
<div class="bg:glass">Dark theme glass</div>
|
|
59
|
-
</div>
|
|
60
|
-
|
|
61
|
-
<!-- Direct method -->
|
|
62
|
-
<div class="bg:glass light">Light glass</div>
|
|
63
|
-
<div class="bg:glass dark">Dark glass</div>
|
|
64
|
-
|
|
65
|
-
<!-- Utility-first -->
|
|
66
|
-
<div class="light:bg:glass">Light only glass</div>
|
|
67
|
-
<div class="dark:bg:glass">Dark only glass</div>
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
### Combined with Other Utilities
|
|
71
|
-
|
|
72
|
-
```html
|
|
73
|
-
<div class="bg:glass shadow:floating radius:full p-relative">Complete glass card</div>
|
|
74
|
-
<div class="bg:glass color-main border:color-main">Glass with borders</div>
|
|
75
|
-
<div class="bg:glass d-flex justify-center items-center">Glass container</div>
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
### Custom Settings
|
|
79
|
-
|
|
80
|
-
Customize glass effects using CSS custom properties:
|
|
81
|
-
|
|
82
|
-
```css
|
|
83
|
-
.custom-glass {
|
|
84
|
-
--glass-blur: 12px;
|
|
85
|
-
--glass-border-thickness: 2px;
|
|
86
|
-
--glass-light-angle: 135deg;
|
|
87
|
-
|
|
88
|
-
/* Light theme colors */
|
|
89
|
-
--glass-color-light: rgba(255, 255, 255, 0.2);
|
|
90
|
-
--glass-border-1-color-light: rgba(255, 255, 255, 0.3);
|
|
91
|
-
--glass-border-2-color-light: rgba(255, 255, 255, 0.1);
|
|
92
|
-
|
|
93
|
-
/* Dark theme colors */
|
|
94
|
-
--glass-color-dark: rgba(0, 0, 0, 0.2);
|
|
95
|
-
--glass-border-1-color-dark: rgba(255, 255, 255, 0.1);
|
|
96
|
-
--glass-border-2-color-dark: rgba(255, 255, 255, 0.05);
|
|
97
|
-
}
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
**Usage:**
|
|
101
|
-
|
|
102
|
-
```html
|
|
103
|
-
<div class="bg:glass custom-glass">Custom glass effect</div>
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
**Available Settings:**
|
|
107
|
-
|
|
108
|
-
- `--glass-blur` - Backdrop blur amount (default: 8px)
|
|
109
|
-
- `--glass-border-thickness` - Border thickness (default: 1px)
|
|
110
|
-
- `--glass-light-angle` - Gradient angle (default: 45deg)
|
|
111
|
-
- `--glass-color-light/dark` - Background colors for themes
|
|
112
|
-
- `--glass-border-1/2-color-light/dark` - Border gradient colors
|
|
113
|
-
|
|
114
|
-
---
|
|
115
|
-
|
|
116
|
-
## Display & Visibility
|
|
117
|
-
|
|
118
|
-
### Normal State
|
|
119
|
-
|
|
120
|
-
```html
|
|
121
|
-
<div class="d-inline">Inline display</div>
|
|
122
|
-
<div class="d-block">Block display</div>
|
|
123
|
-
<div class="d-inline-block">Inline-block display</div>
|
|
124
|
-
<div class="d-flex">Flex display</div>
|
|
125
|
-
<div class="d-inline-flex">Inline-flex display</div>
|
|
126
|
-
<div class="d-inline-grid">Inline-grid display</div>
|
|
127
|
-
<div class="d-table">Table display</div>
|
|
128
|
-
<div class="d-table-cell">Table-cell display</div>
|
|
129
|
-
<div class="d-none">Hidden element</div>
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
### Responsive Display
|
|
133
|
-
|
|
134
|
-
```html
|
|
135
|
-
<div class="d-none md:d-block">Hidden on mobile, visible on desktop</div>
|
|
136
|
-
<div class="d-block lg:d-flex">Block on mobile, flex on desktop</div>
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
---
|
|
140
|
-
|
|
141
|
-
## Overflow
|
|
142
|
-
|
|
143
|
-
### Normal State
|
|
144
|
-
|
|
145
|
-
```html
|
|
146
|
-
<div class="overflow-visible">Visible overflow</div>
|
|
147
|
-
<div class="overflow-hidden">Hidden overflow</div>
|
|
148
|
-
<div class="overflow-auto">Auto overflow</div>
|
|
149
|
-
<div class="overflow-scroll">Scroll overflow</div>
|
|
150
|
-
```
|
|
151
|
-
|
|
152
|
-
### Directional Overflow
|
|
153
|
-
|
|
154
|
-
```html
|
|
155
|
-
<div class="x:overflow-hidden">Hide horizontal overflow</div>
|
|
156
|
-
<div class="y:overflow-auto">Auto vertical overflow</div>
|
|
157
|
-
<div class="x:overflow-scroll y:overflow-hidden">Mixed overflow control</div>
|
|
158
|
-
```
|
|
159
|
-
|
|
160
|
-
### Responsive Overflow
|
|
161
|
-
|
|
162
|
-
```html
|
|
163
|
-
<div class="overflow-hidden md:overflow-auto">Responsive overflow</div>
|
|
164
|
-
<div class="x:overflow-auto lg:x:overflow-hidden">Responsive horizontal</div>
|
|
165
|
-
```
|
|
166
|
-
|
|
167
|
-
---
|
|
168
|
-
|
|
169
|
-
## Object Fit
|
|
170
|
-
|
|
171
|
-
### Normal State
|
|
172
|
-
|
|
173
|
-
```html
|
|
174
|
-
<img class="object-fit:cover" src="image.jpg" />
|
|
175
|
-
<img class="object-fit:fill" src="image.jpg" />
|
|
176
|
-
<img class="object-fit:contain" src="image.jpg" />
|
|
177
|
-
<img class="object-fit:none" src="image.jpg" />
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
### Responsive Object Fit
|
|
181
|
-
|
|
182
|
-
```html
|
|
183
|
-
<img class="object-fit:cover md:object-fit:contain" src="image.jpg" />
|
|
184
|
-
<img class="object-fit:fill lg:object-fit:cover" src="image.jpg" />
|
|
185
|
-
```
|
|
186
|
-
|
|
187
|
-
---
|
|
188
|
-
|
|
189
|
-
## Positioning
|
|
190
|
-
|
|
191
|
-
### Normal State
|
|
192
|
-
|
|
193
|
-
```html
|
|
194
|
-
<div class="p-static">Static position</div>
|
|
195
|
-
<div class="p-relative">Relative position</div>
|
|
196
|
-
<div class="p-fixed">Fixed position</div>
|
|
197
|
-
<div class="p-absolute">Absolute position</div>
|
|
198
|
-
<div class="p-sticky">Sticky position</div>
|
|
199
|
-
```
|
|
200
|
-
|
|
201
|
-
### Responsive Positioning
|
|
202
|
-
|
|
203
|
-
```html
|
|
204
|
-
<div class="p-relative md:p-absolute">Responsive positioning</div>
|
|
205
|
-
<div class="p-static lg:p-sticky">Mobile static, desktop sticky</div>
|
|
206
|
-
```
|
|
207
|
-
|
|
208
|
-
---
|
|
209
|
-
|
|
210
|
-
## Sizing
|
|
211
|
-
|
|
212
|
-
### Width
|
|
213
|
-
|
|
214
|
-
```html
|
|
215
|
-
<div class="w:25">25% width</div>
|
|
216
|
-
<div class="w:50">50% width</div>
|
|
217
|
-
<div class="w:75">75% width</div>
|
|
218
|
-
<div class="w:100">100% width</div>
|
|
219
|
-
|
|
220
|
-
<div class="min:w:25">Min 25% width</div>
|
|
221
|
-
<div class="max:w:75">Max 75% width</div>
|
|
222
|
-
```
|
|
223
|
-
|
|
224
|
-
### Height
|
|
225
|
-
|
|
226
|
-
```html
|
|
227
|
-
<div class="h:25">25% height</div>
|
|
228
|
-
<div class="h:50">50% height</div>
|
|
229
|
-
<div class="h:75">75% height</div>
|
|
230
|
-
<div class="h:100">100% height</div>
|
|
231
|
-
|
|
232
|
-
<div class="min:h:50">Min 50% height</div>
|
|
233
|
-
<div class="max:h:90">Max 90% height</div>
|
|
234
|
-
```
|
|
235
|
-
|
|
236
|
-
### Responsive Sizing
|
|
237
|
-
|
|
238
|
-
```html
|
|
239
|
-
<div class="w:100 md:w:50 lg:w:25">Responsive width</div>
|
|
240
|
-
<div class="h:50 md:h:75 lg:h:100">Responsive height</div>
|
|
241
|
-
<div class="min:w:25 lg:min:w:50">Responsive min-width</div>
|
|
242
|
-
```
|
|
243
|
-
|
|
244
|
-
---
|
|
245
|
-
|
|
246
|
-
## Border Radius
|
|
247
|
-
|
|
248
|
-
### Normal State
|
|
249
|
-
|
|
250
|
-
```html
|
|
251
|
-
<div class="radius:full">Full rounded</div>
|
|
252
|
-
<div class="radius:top:full">Top rounded</div>
|
|
253
|
-
<div class="radius:bottom:full">Bottom rounded</div>
|
|
254
|
-
<div class="radius:start:full">Start rounded</div>
|
|
255
|
-
<div class="radius:end:full">End rounded</div>
|
|
256
|
-
```
|
|
257
|
-
|
|
258
|
-
### Corner-Specific Radius
|
|
259
|
-
|
|
260
|
-
```html
|
|
261
|
-
<div class="radius:top-start:full">Top-start corner</div>
|
|
262
|
-
<div class="radius:top-end:full">Top-end corner</div>
|
|
263
|
-
<div class="radius:bottom-start:full">Bottom-start corner</div>
|
|
264
|
-
<div class="radius:bottom-end:full">Bottom-end corner</div>
|
|
265
|
-
```
|
|
266
|
-
|
|
267
|
-
### Responsive Radius
|
|
268
|
-
|
|
269
|
-
```html
|
|
270
|
-
<div class="radius:full md:radius:top:full">Responsive border radius</div>
|
|
271
|
-
<div class="radius:start:full lg:radius:full">Start on mobile, full on desktop</div>
|
|
272
|
-
```
|
|
1
|
+
# Shaping Documentation
|
|
2
|
+
|
|
3
|
+
> Simple guide to visual styling utilities in Beathers CSS framework
|
|
4
|
+
|
|
5
|
+
## Table of Contents
|
|
6
|
+
|
|
7
|
+
- [Shadows](#shadows)
|
|
8
|
+
- [Glass Effects](#glass-effects)
|
|
9
|
+
- [Display & Visibility](#display--visibility)
|
|
10
|
+
- [Overflow](#overflow)
|
|
11
|
+
- [Object Fit](#object-fit)
|
|
12
|
+
- [Positioning](#positioning)
|
|
13
|
+
- [Sizing](#sizing)
|
|
14
|
+
- [Border Radius](#border-radius)
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
## Shadows
|
|
19
|
+
|
|
20
|
+
### Normal State
|
|
21
|
+
|
|
22
|
+
```html
|
|
23
|
+
<div class="shadow:light">Light shadow</div>
|
|
24
|
+
<div class="shadow:soft">Soft shadow</div>
|
|
25
|
+
<div class="shadow:medium">Medium shadow</div>
|
|
26
|
+
<div class="shadow:solid">Solid shadow</div>
|
|
27
|
+
<div class="shadow:floating">Floating shadow</div>
|
|
28
|
+
<div class="shadow:flat">Flat shadow</div>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### Responsive Shadows
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
<div class="shadow:soft md:shadow:medium lg:shadow:floating">Responsive shadow</div>
|
|
35
|
+
<div class="shadow:light lg:shadow:solid">Mobile light, desktop solid</div>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
## Glass Effects
|
|
41
|
+
|
|
42
|
+
### Normal State
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<div class="bg:glass">Glass effect element</div>
|
|
46
|
+
<div class="bg:glass radius:full">Rounded glass effect</div>
|
|
47
|
+
<div class="bg:glass shadow:soft">Glass with soft shadow</div>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Theme Support
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<!-- Context method -->
|
|
54
|
+
<div class="light">
|
|
55
|
+
<div class="bg:glass">Light theme glass</div>
|
|
56
|
+
</div>
|
|
57
|
+
<div class="dark">
|
|
58
|
+
<div class="bg:glass">Dark theme glass</div>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<!-- Direct method -->
|
|
62
|
+
<div class="bg:glass light">Light glass</div>
|
|
63
|
+
<div class="bg:glass dark">Dark glass</div>
|
|
64
|
+
|
|
65
|
+
<!-- Utility-first -->
|
|
66
|
+
<div class="light:bg:glass">Light only glass</div>
|
|
67
|
+
<div class="dark:bg:glass">Dark only glass</div>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Combined with Other Utilities
|
|
71
|
+
|
|
72
|
+
```html
|
|
73
|
+
<div class="bg:glass shadow:floating radius:full p-relative">Complete glass card</div>
|
|
74
|
+
<div class="bg:glass color-main border:color-main">Glass with borders</div>
|
|
75
|
+
<div class="bg:glass d-flex justify-center items-center">Glass container</div>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Custom Settings
|
|
79
|
+
|
|
80
|
+
Customize glass effects using CSS custom properties:
|
|
81
|
+
|
|
82
|
+
```css
|
|
83
|
+
.custom-glass {
|
|
84
|
+
--glass-blur: 12px;
|
|
85
|
+
--glass-border-thickness: 2px;
|
|
86
|
+
--glass-light-angle: 135deg;
|
|
87
|
+
|
|
88
|
+
/* Light theme colors */
|
|
89
|
+
--glass-color-light: rgba(255, 255, 255, 0.2);
|
|
90
|
+
--glass-border-1-color-light: rgba(255, 255, 255, 0.3);
|
|
91
|
+
--glass-border-2-color-light: rgba(255, 255, 255, 0.1);
|
|
92
|
+
|
|
93
|
+
/* Dark theme colors */
|
|
94
|
+
--glass-color-dark: rgba(0, 0, 0, 0.2);
|
|
95
|
+
--glass-border-1-color-dark: rgba(255, 255, 255, 0.1);
|
|
96
|
+
--glass-border-2-color-dark: rgba(255, 255, 255, 0.05);
|
|
97
|
+
}
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
**Usage:**
|
|
101
|
+
|
|
102
|
+
```html
|
|
103
|
+
<div class="bg:glass custom-glass">Custom glass effect</div>
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
**Available Settings:**
|
|
107
|
+
|
|
108
|
+
- `--glass-blur` - Backdrop blur amount (default: 8px)
|
|
109
|
+
- `--glass-border-thickness` - Border thickness (default: 1px)
|
|
110
|
+
- `--glass-light-angle` - Gradient angle (default: 45deg)
|
|
111
|
+
- `--glass-color-light/dark` - Background colors for themes
|
|
112
|
+
- `--glass-border-1/2-color-light/dark` - Border gradient colors
|
|
113
|
+
|
|
114
|
+
---
|
|
115
|
+
|
|
116
|
+
## Display & Visibility
|
|
117
|
+
|
|
118
|
+
### Normal State
|
|
119
|
+
|
|
120
|
+
```html
|
|
121
|
+
<div class="d-inline">Inline display</div>
|
|
122
|
+
<div class="d-block">Block display</div>
|
|
123
|
+
<div class="d-inline-block">Inline-block display</div>
|
|
124
|
+
<div class="d-flex">Flex display</div>
|
|
125
|
+
<div class="d-inline-flex">Inline-flex display</div>
|
|
126
|
+
<div class="d-inline-grid">Inline-grid display</div>
|
|
127
|
+
<div class="d-table">Table display</div>
|
|
128
|
+
<div class="d-table-cell">Table-cell display</div>
|
|
129
|
+
<div class="d-none">Hidden element</div>
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
### Responsive Display
|
|
133
|
+
|
|
134
|
+
```html
|
|
135
|
+
<div class="d-none md:d-block">Hidden on mobile, visible on desktop</div>
|
|
136
|
+
<div class="d-block lg:d-flex">Block on mobile, flex on desktop</div>
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
---
|
|
140
|
+
|
|
141
|
+
## Overflow
|
|
142
|
+
|
|
143
|
+
### Normal State
|
|
144
|
+
|
|
145
|
+
```html
|
|
146
|
+
<div class="overflow-visible">Visible overflow</div>
|
|
147
|
+
<div class="overflow-hidden">Hidden overflow</div>
|
|
148
|
+
<div class="overflow-auto">Auto overflow</div>
|
|
149
|
+
<div class="overflow-scroll">Scroll overflow</div>
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
### Directional Overflow
|
|
153
|
+
|
|
154
|
+
```html
|
|
155
|
+
<div class="x:overflow-hidden">Hide horizontal overflow</div>
|
|
156
|
+
<div class="y:overflow-auto">Auto vertical overflow</div>
|
|
157
|
+
<div class="x:overflow-scroll y:overflow-hidden">Mixed overflow control</div>
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
### Responsive Overflow
|
|
161
|
+
|
|
162
|
+
```html
|
|
163
|
+
<div class="overflow-hidden md:overflow-auto">Responsive overflow</div>
|
|
164
|
+
<div class="x:overflow-auto lg:x:overflow-hidden">Responsive horizontal</div>
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
---
|
|
168
|
+
|
|
169
|
+
## Object Fit
|
|
170
|
+
|
|
171
|
+
### Normal State
|
|
172
|
+
|
|
173
|
+
```html
|
|
174
|
+
<img class="object-fit:cover" src="image.jpg" />
|
|
175
|
+
<img class="object-fit:fill" src="image.jpg" />
|
|
176
|
+
<img class="object-fit:contain" src="image.jpg" />
|
|
177
|
+
<img class="object-fit:none" src="image.jpg" />
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
### Responsive Object Fit
|
|
181
|
+
|
|
182
|
+
```html
|
|
183
|
+
<img class="object-fit:cover md:object-fit:contain" src="image.jpg" />
|
|
184
|
+
<img class="object-fit:fill lg:object-fit:cover" src="image.jpg" />
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
---
|
|
188
|
+
|
|
189
|
+
## Positioning
|
|
190
|
+
|
|
191
|
+
### Normal State
|
|
192
|
+
|
|
193
|
+
```html
|
|
194
|
+
<div class="p-static">Static position</div>
|
|
195
|
+
<div class="p-relative">Relative position</div>
|
|
196
|
+
<div class="p-fixed">Fixed position</div>
|
|
197
|
+
<div class="p-absolute">Absolute position</div>
|
|
198
|
+
<div class="p-sticky">Sticky position</div>
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
### Responsive Positioning
|
|
202
|
+
|
|
203
|
+
```html
|
|
204
|
+
<div class="p-relative md:p-absolute">Responsive positioning</div>
|
|
205
|
+
<div class="p-static lg:p-sticky">Mobile static, desktop sticky</div>
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
---
|
|
209
|
+
|
|
210
|
+
## Sizing
|
|
211
|
+
|
|
212
|
+
### Width
|
|
213
|
+
|
|
214
|
+
```html
|
|
215
|
+
<div class="w:25">25% width</div>
|
|
216
|
+
<div class="w:50">50% width</div>
|
|
217
|
+
<div class="w:75">75% width</div>
|
|
218
|
+
<div class="w:100">100% width</div>
|
|
219
|
+
|
|
220
|
+
<div class="min:w:25">Min 25% width</div>
|
|
221
|
+
<div class="max:w:75">Max 75% width</div>
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
### Height
|
|
225
|
+
|
|
226
|
+
```html
|
|
227
|
+
<div class="h:25">25% height</div>
|
|
228
|
+
<div class="h:50">50% height</div>
|
|
229
|
+
<div class="h:75">75% height</div>
|
|
230
|
+
<div class="h:100">100% height</div>
|
|
231
|
+
|
|
232
|
+
<div class="min:h:50">Min 50% height</div>
|
|
233
|
+
<div class="max:h:90">Max 90% height</div>
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
### Responsive Sizing
|
|
237
|
+
|
|
238
|
+
```html
|
|
239
|
+
<div class="w:100 md:w:50 lg:w:25">Responsive width</div>
|
|
240
|
+
<div class="h:50 md:h:75 lg:h:100">Responsive height</div>
|
|
241
|
+
<div class="min:w:25 lg:min:w:50">Responsive min-width</div>
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
---
|
|
245
|
+
|
|
246
|
+
## Border Radius
|
|
247
|
+
|
|
248
|
+
### Normal State
|
|
249
|
+
|
|
250
|
+
```html
|
|
251
|
+
<div class="radius:full">Full rounded</div>
|
|
252
|
+
<div class="radius:top:full">Top rounded</div>
|
|
253
|
+
<div class="radius:bottom:full">Bottom rounded</div>
|
|
254
|
+
<div class="radius:start:full">Start rounded</div>
|
|
255
|
+
<div class="radius:end:full">End rounded</div>
|
|
256
|
+
```
|
|
257
|
+
|
|
258
|
+
### Corner-Specific Radius
|
|
259
|
+
|
|
260
|
+
```html
|
|
261
|
+
<div class="radius:top-start:full">Top-start corner</div>
|
|
262
|
+
<div class="radius:top-end:full">Top-end corner</div>
|
|
263
|
+
<div class="radius:bottom-start:full">Bottom-start corner</div>
|
|
264
|
+
<div class="radius:bottom-end:full">Bottom-end corner</div>
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
### Responsive Radius
|
|
268
|
+
|
|
269
|
+
```html
|
|
270
|
+
<div class="radius:full md:radius:top:full">Responsive border radius</div>
|
|
271
|
+
<div class="radius:start:full lg:radius:full">Start on mobile, full on desktop</div>
|
|
272
|
+
```
|