lism-css 0.9.1 → 0.9.2
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/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
|