Skip to content

Commit 2f140fe

Browse files
forestreamforestream
committed
Add Devup UI Docs
- added instructions for Devup pages.
1 parent 7355d61 commit 2f140fe

File tree

10 files changed

+179
-69
lines changed

10 files changed

+179
-69
lines changed

‎apps/landing/src/app/(detail)/docs/api/box/page.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ You can use the `as` prop to change the element type.
2222

2323
```jsx
2424
// Before
25-
<Box as="span" />
25+
<Box as={"span"} />
2626

2727
// After
2828
<span className="d0" />

‎apps/landing/src/app/(detail)/docs/api/image/page.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,5 @@ It is just a `img` with some styles.
1515
<Image src={"https://via.placeholder.com/150"} />
1616

1717
// After
18-
<img src={"https://via.placeholder.com/150"} />
18+
<img src="https://via.placeholder.com/150" />
1919
```

‎apps/landing/src/app/(detail)/docs/api/selector/page.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ export const metadata = {
77
<table>
88
<thead>
99
<tr>
10-
<th>Selector</th>
11-
<th>Pseudo-Class</th>
10+
<th width="300px">Selector</th>
11+
<th width="300px">Pseudo-Class</th>
1212
</tr>
1313
</thead>
1414
<tbody>

‎apps/landing/src/app/(detail)/docs/api/style-props/page.mdx‎

Lines changed: 60 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ export const metadata = {
99
<table>
1010
<thead>
1111
<tr>
12-
<th>Props</th>
13-
<th>Style Property</th>
12+
<th width="300px">Props</th>
13+
<th width="300px">Style Property</th>
1414
</tr>
1515
</thead>
1616
<tbody>
@@ -118,8 +118,8 @@ export const metadata = {
118118
<table>
119119
<thead>
120120
<tr>
121-
<th>Props</th>
122-
<th>Style Property</th>
121+
<th width="300px">Props</th>
122+
<th width="300px">Style Property</th>
123123
</tr>
124124
</thead>
125125
<tbody>
@@ -227,8 +227,8 @@ export const metadata = {
227227
<table>
228228
<thead>
229229
<tr>
230-
<th>Props</th>
231-
<th>Style Property</th>
230+
<th width="300px">Props</th>
231+
<th width="300px">Style Property</th>
232232
</tr>
233233
</thead>
234234
<tbody>
@@ -264,8 +264,8 @@ export const metadata = {
264264
<table>
265265
<thead>
266266
<tr>
267-
<th>Props</th>
268-
<th>Style Property</th>
267+
<th width="300px">Props</th>
268+
<th width="300px">Style Property</th>
269269
</tr>
270270
</thead>
271271
<tbody>
@@ -541,8 +541,8 @@ export const metadata = {
541541
<table>
542542
<thead>
543543
<tr>
544-
<th>Props</th>
545-
<th>Style Property</th>
544+
<th width="300px">Props</th>
545+
<th width="300px">Style Property</th>
546546
</tr>
547547
</thead>
548548
<tbody>
@@ -650,8 +650,8 @@ export const metadata = {
650650
<table>
651651
<thead>
652652
<tr>
653-
<th>Props</th>
654-
<th>Style Property</th>
653+
<th width="300px">Props</th>
654+
<th width="300px">Style Property</th>
655655
</tr>
656656
</thead>
657657
<tbody>
@@ -855,8 +855,8 @@ export const metadata = {
855855
<table>
856856
<thead>
857857
<tr>
858-
<th>Props</th>
859-
<th>Style Property</th>
858+
<th width="300px">Props</th>
859+
<th width="300px">Style Property</th>
860860
</tr>
861861
</thead>
862862
<tbody>
@@ -1028,8 +1028,8 @@ export const metadata = {
10281028
<table>
10291029
<thead>
10301030
<tr>
1031-
<th>Props</th>
1032-
<th>Style Property</th>
1031+
<th width="300px">Props</th>
1032+
<th width="300px">Style Property</th>
10331033
</tr>
10341034
</thead>
10351035
<tbody>
@@ -1081,8 +1081,8 @@ export const metadata = {
10811081
<table>
10821082
<thead>
10831083
<tr>
1084-
<th>Props</th>
1085-
<th>Style Property</th>
1084+
<th width="300px">Props</th>
1085+
<th width="300px">Style Property</th>
10861086
</tr>
10871087
</thead>
10881088
<tbody>
@@ -1102,8 +1102,8 @@ export const metadata = {
11021102
<table>
11031103
<thead>
11041104
<tr>
1105-
<th>Props</th>
1106-
<th>Style Property</th>
1105+
<th width="300px">Props</th>
1106+
<th width="300px">Style Property</th>
11071107
</tr>
11081108
</thead>
11091109
<tbody>
@@ -1131,8 +1131,8 @@ export const metadata = {
11311131
<table>
11321132
<thead>
11331133
<tr>
1134-
<th>Props</th>
1135-
<th>Style Property</th>
1134+
<th width="300px">Props</th>
1135+
<th width="300px">Style Property</th>
11361136
</tr>
11371137
</thead>
11381138
<tbody>
@@ -1216,8 +1216,8 @@ export const metadata = {
12161216
<table>
12171217
<thead>
12181218
<tr>
1219-
<th>Props</th>
1220-
<th>Style Property</th>
1219+
<th width="300px">Props</th>
1220+
<th width="300px">Style Property</th>
12211221
</tr>
12221222
</thead>
12231223
<tbody>
@@ -1397,8 +1397,8 @@ export const metadata = {
13971397
<table>
13981398
<thead>
13991399
<tr>
1400-
<th>Props</th>
1401-
<th>Style Property</th>
1400+
<th width="300px">Props</th>
1401+
<th width="300px">Style Property</th>
14021402
</tr>
14031403
</thead>
14041404
<tbody>
@@ -1554,8 +1554,8 @@ export const metadata = {
15541554
<table>
15551555
<thead>
15561556
<tr>
1557-
<th>Props</th>
1558-
<th>Style Property</th>
1557+
<th width="300px">Props</th>
1558+
<th width="300px">Style Property</th>
15591559
</tr>
15601560
</thead>
15611561
<tbody>
@@ -1607,8 +1607,8 @@ export const metadata = {
16071607
<table>
16081608
<thead>
16091609
<tr>
1610-
<th>Props</th>
1611-
<th>Style Property</th>
1610+
<th width="300px">Props</th>
1611+
<th width="300px">Style Property</th>
16121612
</tr>
16131613
</thead>
16141614
<tbody>
@@ -1652,8 +1652,8 @@ export const metadata = {
16521652
<table>
16531653
<thead>
16541654
<tr>
1655-
<th>Props</th>
1656-
<th>Style Property</th>
1655+
<th width="300px">Props</th>
1656+
<th width="300px">Style Property</th>
16571657
</tr>
16581658
</thead>
16591659
<tbody>
@@ -1697,8 +1697,8 @@ export const metadata = {
16971697
<table>
16981698
<thead>
16991699
<tr>
1700-
<th>Props</th>
1701-
<th>Style Property</th>
1700+
<th width="300px">Props</th>
1701+
<th width="300px">Style Property</th>
17021702
</tr>
17031703
</thead>
17041704
<tbody>
@@ -1862,8 +1862,8 @@ export const metadata = {
18621862
<table>
18631863
<thead>
18641864
<tr>
1865-
<th>Props</th>
1866-
<th>Style Property</th>
1865+
<th width="300px">Props</th>
1866+
<th width="300px">Style Property</th>
18671867
</tr>
18681868
</thead>
18691869
<tbody>
@@ -1923,8 +1923,8 @@ export const metadata = {
19231923
<table>
19241924
<thead>
19251925
<tr>
1926-
<th>Props</th>
1927-
<th>Style Property</th>
1926+
<th width="300px">Props</th>
1927+
<th width="300px">Style Property</th>
19281928
</tr>
19291929
</thead>
19301930
<tbody>
@@ -2008,8 +2008,8 @@ export const metadata = {
20082008
<table>
20092009
<thead>
20102010
<tr>
2011-
<th>Props</th>
2012-
<th>Style Property</th>
2011+
<th width="300px">Props</th>
2012+
<th width="300px">Style Property</th>
20132013
</tr>
20142014
</thead>
20152015
<tbody>
@@ -2061,8 +2061,8 @@ export const metadata = {
20612061
<table>
20622062
<thead>
20632063
<tr>
2064-
<th>Props</th>
2065-
<th>Style Property</th>
2064+
<th width="300px">Props</th>
2065+
<th width="300px">Style Property</th>
20662066
</tr>
20672067
</thead>
20682068
<tbody>
@@ -2202,8 +2202,8 @@ export const metadata = {
22022202
<table>
22032203
<thead>
22042204
<tr>
2205-
<th>Props</th>
2206-
<th>Style Property</th>
2205+
<th width="300px">Props</th>
2206+
<th width="300px">Style Property</th>
22072207
</tr>
22082208
</thead>
22092209
<tbody>
@@ -2231,8 +2231,8 @@ export const metadata = {
22312231
<table>
22322232
<thead>
22332233
<tr>
2234-
<th>Props</th>
2235-
<th>Style Property</th>
2234+
<th width="300px">Props</th>
2235+
<th width="300px">Style Property</th>
22362236
</tr>
22372237
</thead>
22382238
<tbody>
@@ -2268,8 +2268,8 @@ export const metadata = {
22682268
<table>
22692269
<thead>
22702270
<tr>
2271-
<th>Props</th>
2272-
<th>Style Property</th>
2271+
<th width="300px">Props</th>
2272+
<th width="300px">Style Property</th>
22732273
</tr>
22742274
</thead>
22752275
<tbody>
@@ -2329,8 +2329,8 @@ export const metadata = {
23292329
<table>
23302330
<thead>
23312331
<tr>
2332-
<th>Props</th>
2333-
<th>Style Property</th>
2332+
<th width="300px">Props</th>
2333+
<th width="300px">Style Property</th>
23342334
</tr>
23352335
</thead>
23362336
<tbody>
@@ -2580,8 +2580,8 @@ export const metadata = {
25802580
<table>
25812581
<thead>
25822582
<tr>
2583-
<th>Props</th>
2584-
<th>Style Property</th>
2583+
<th width="300px">Props</th>
2584+
<th width="300px">Style Property</th>
25852585
</tr>
25862586
</thead>
25872587
<tbody>
@@ -2673,8 +2673,8 @@ export const metadata = {
26732673
<table>
26742674
<thead>
26752675
<tr>
2676-
<th>Props</th>
2677-
<th>Style Property</th>
2676+
<th width="300px">Props</th>
2677+
<th width="300px">Style Property</th>
26782678
</tr>
26792679
</thead>
26802680
<tbody>
@@ -2726,8 +2726,8 @@ export const metadata = {
27262726
<table>
27272727
<thead>
27282728
<tr>
2729-
<th>Props</th>
2730-
<th>Style Property</th>
2729+
<th width="300px">Props</th>
2730+
<th width="300px">Style Property</th>
27312731
</tr>
27322732
</thead>
27332733
<tbody>
@@ -2851,8 +2851,8 @@ export const metadata = {
28512851
<table>
28522852
<thead>
28532853
<tr>
2854-
<th> Props</th>
2855-
<th>Style Property</th>
2854+
<th width="300px"> Props</th>
2855+
<th width="300px">Style Property</th>
28562856
</tr>
28572857
</thead>
28582858
<tbody>
@@ -2872,8 +2872,8 @@ export const metadata = {
28722872
<table>
28732873
<thead>
28742874
<tr>
2875-
<th>Props</th>
2876-
<th>Style Property</th>
2875+
<th width="300px">Props</th>
2876+
<th width="300px">Style Property</th>
28772877
</tr>
28782878
</thead>
28792879
<tbody>

‎apps/landing/src/app/(detail)/docs/api/text/page.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ It is just a `span` with some styles.
1212

1313
```jsx
1414
// Before
15-
<Text color={'red'}>This is Text component.</Text>
15+
<Text color={"red"}>This is Text component.</Text>
1616

1717
// After
1818
<span className="d0">This is Text component.</span>

‎apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,28 @@
11
export const metadata = {
2-
title: "Breakpoints",
2+
title: 'Breakpoints',
33
}
44

55
# Breakpoints
6+
7+
You can add responsive design by using an array of maximum 5 elements. The viewport ranges of each style
8+
value in the array are listed below:
9+
10+
- 1st element: ~ 479px,
11+
- 2nd element: 480px ~ 767px,
12+
- 3rd element: 768px ~ 991px,
13+
- 4th element: 992px ~ 1279px,
14+
- 5th element: 1280px ~
15+
16+
## How to use
17+
18+
```jsx
19+
<Box bg={['red', 'blue', 'green', 'yellow', 'purple']} w={25} h={25}>
20+
<Text>Hello</Text>
21+
</Box>
22+
```
23+
24+
If any of the five elements are set to `null`, Devup UI uses the previous value for responsive design.
25+
For example, if the array in the example above is changed into `['red', null, 'green', null, 'purple']`,
26+
the background color of `Box` component will be red from 0px to 767px, green from 768px to 1279px, purple from 1280px.
27+
28+
If the length of the array is less than 5, Devup UI makes responsive design according to the index of the element.

0 commit comments

Comments
 (0)