lism-css 0.9.1 → 0.9.3
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 +41 -19
- package/dist/lib/types/ResponsiveProps.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
# lism-css
|
|
2
|
+
|
|
3
|
+
A lightweight, layout-first CSS framework for websites.
|
|
4
|
+
Provides CSS utilities, design tokens, and React / Astro layout components.
|
|
2
5
|
|
|
3
|
-
For details, see [
|
|
6
|
+
For details, see [Documentation](https://lism-css.com/).
|
|
4
7
|
|
|
5
|
-
|
|
8
|
+
## Installation
|
|
6
9
|
|
|
7
10
|
```bash
|
|
8
11
|
npm i lism-css
|
|
@@ -14,39 +17,58 @@ or
|
|
|
14
17
|
pnpm add lism-css
|
|
15
18
|
```
|
|
16
19
|
|
|
17
|
-
|
|
20
|
+
## Setup
|
|
18
21
|
|
|
19
|
-
|
|
22
|
+
Import CSS as a global style.
|
|
20
23
|
|
|
21
24
|
```js
|
|
22
25
|
import 'lism-css/main.css';
|
|
23
26
|
```
|
|
24
27
|
|
|
25
|
-
|
|
28
|
+
For Next.js, load it in `layout.js` (App Router) or `_app.js` (Pages Router).
|
|
26
29
|
|
|
27
|
-
For HTML sites, you can
|
|
30
|
+
For HTML sites, you can load CSS via CDN:
|
|
28
31
|
|
|
29
32
|
```html
|
|
30
33
|
<link href="https://cdn.jsdelivr.net/npm/lism-css/dist/css/main.css" rel="stylesheet" />
|
|
31
34
|
```
|
|
32
35
|
|
|
33
|
-
|
|
36
|
+
## Usage
|
|
37
|
+
|
|
38
|
+
### React
|
|
34
39
|
|
|
35
40
|
```jsx
|
|
36
|
-
import { Box,
|
|
41
|
+
import { Box, Flex, Stack, HTML } from 'lism-css/react';
|
|
37
42
|
|
|
38
|
-
|
|
39
|
-
<Box p=
|
|
40
|
-
|
|
41
|
-
</Box>
|
|
42
|
-
|
|
43
|
+
<Stack g="20">
|
|
44
|
+
<Box p="20" bgc="base-2">
|
|
45
|
+
<HTML.p fz="l">Lorem ipsum text...</HTML.p>
|
|
46
|
+
</Box>
|
|
47
|
+
</Stack>
|
|
43
48
|
```
|
|
44
49
|
|
|
50
|
+
### Astro
|
|
51
|
+
|
|
52
|
+
```astro
|
|
53
|
+
---
|
|
54
|
+
import { Box, Flex, Stack, HTML } from 'lism-css/astro';
|
|
45
55
|
---
|
|
46
56
|
|
|
47
|
-
|
|
57
|
+
<Stack g="20">
|
|
58
|
+
<Box p="20" bgc="base-2">
|
|
59
|
+
<HTML.p fz="l">Lorem ipsum text...</HTML.p>
|
|
60
|
+
</Box>
|
|
61
|
+
</Stack>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## UI Components
|
|
65
|
+
|
|
66
|
+
For interactive UI components (Accordion, Modal, Tabs, etc.), see [@lism-css/ui](https://www.npmjs.com/package/@lism-css/ui).
|
|
67
|
+
|
|
68
|
+
## Credits
|
|
69
|
+
|
|
70
|
+
- [Phosphor Icons](https://phosphoricons.com/) — MIT License ([source](https://github.com/phosphor-icons))
|
|
71
|
+
|
|
72
|
+
## License
|
|
48
73
|
|
|
49
|
-
|
|
50
|
-
Website: https://phosphoricons.com/
|
|
51
|
-
Source: https://github.com/phosphor-icons
|
|
52
|
-
License: MIT License, https://opensource.org/licenses/MIT
|
|
74
|
+
MIT
|
|
@@ -5,7 +5,7 @@ type BreakpointKey = (typeof BREAK_POINTS_ALL)[number];
|
|
|
5
5
|
/** ブレイクポイント数（5: base, sm, md, lg, xl） */
|
|
6
6
|
type BreakpointCount = (typeof BREAK_POINTS_ALL)['length'];
|
|
7
7
|
/** ブレイクポイント数を上限とする配列型（1〜5要素） */
|
|
8
|
-
type ResponsiveArray<T> = LimitedArray<T, BreakpointCount>;
|
|
8
|
+
type ResponsiveArray<T> = LimitedArray<T | null, BreakpointCount>;
|
|
9
9
|
/**
|
|
10
10
|
* プロパティ値をレスポンシブ対応の型に変換するユーティリティ型
|
|
11
11
|
*
|