@kb.ui/css 0.10.1 → 0.10.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 +14 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
All kbui styling, as plain CSS. Components are styled through `kb-` classes and `data-*` attributes, so any renderer that produces the right markup gets the kbui look: React, another framework or hand-written HTML.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Published defaults use monochrome light/dark surfaces with a persimmon accent and shared tactile materials.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
For plain HTML or another renderer, add the standalone CSS package:
|
|
10
|
+
|
|
11
|
+
```sh
|
|
12
|
+
npm install @kb.ui/css
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Keep it on the same version as any other kbui package your app installs. React apps receive this stylesheet through `@kb.ui/react`; see [Get Started](https://kbui.kcb.pro/setup/). The CSS package supplies styling and markup contracts. Your renderer supplies interactive behavior, state and accessibility.
|
|
6
16
|
|
|
7
17
|
## Importing
|
|
8
18
|
|
|
@@ -12,7 +22,9 @@ React apps import the same stylesheet from `@kb.ui/react/styles.css` and do not
|
|
|
12
22
|
import "@kb.ui/css/styles.css";
|
|
13
23
|
```
|
|
14
24
|
|
|
15
|
-
Individual files are also available: `@kb.ui/css/reset.css`, or a single component such as `@kb.ui/css/components/button.css`.
|
|
25
|
+
Individual files are also available: `@kb.ui/css/reset.css`, or a single component such as `@kb.ui/css/components/button.css`. For a partial stylesheet, install `@kb.ui/tokens` at the same version and load `@kb.ui/tokens/tokens.css`, the reset and every component's required styles. The full stylesheet already contains these assets.
|
|
26
|
+
|
|
27
|
+
The examples use a bundler that resolves package imports. For a plain HTML page without a bundler, copy the built CSS into your app's served assets and link that file from the document head. A browser cannot resolve a bare npm package name as a stylesheet URL.
|
|
16
28
|
|
|
17
29
|
Plain HTML works as well:
|
|
18
30
|
|