opui-css 1.2.4 → 1.2.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.
- package/README.md +15 -49
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,59 +1,25 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Open Props UI
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A CSS UI library exploring how next-gen HTML & CSS features can change the way we create components. Designed to be used by professional teams as well as tinkering hobbyists. Everything is made with **ease-of-use** and **scalability** in mind. Last but not least - you **copy and paste** the components into your repo. It's the best way to have a complete **understanding** and **ownership** over your stuff.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
https://open-props-ui.netlify.app/
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Getting started
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
pnpm add ui-css
|
|
11
|
-
# or
|
|
12
|
-
npm install ui-css
|
|
13
|
-
# or
|
|
14
|
-
yarn add ui-css
|
|
15
|
-
```
|
|
9
|
+
Check out the [getting started guide](https://open-props-ui.netlify.app/guide/getting-started.html).
|
|
16
10
|
|
|
17
|
-
##
|
|
11
|
+
## Backstory
|
|
18
12
|
|
|
19
|
-
-
|
|
13
|
+
Practically all established UI libraries need to take older browser versions into account. Some have only just dropped Internet Explorer. Some have barely discovered the power of CSS grid. Open Props UI starts from a blank slate and re-imagines how a component library could be built if you used the most modern features.
|
|
20
14
|
|
|
21
|
-
|
|
15
|
+
## The goal of the component library
|
|
22
16
|
|
|
23
|
-
|
|
24
|
-
/* app.css */
|
|
25
|
-
@import "ui-css/dist/ui.css";
|
|
26
|
-
```
|
|
17
|
+
> "If you only use the latest features, that means this is can never enter production"
|
|
27
18
|
|
|
28
|
-
|
|
19
|
+
Yes and no. Right now that's true for most components. The point is to let the spec and the components mature alongside each other and in time the library will be ready for production.
|
|
29
20
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
-
|
|
35
|
-
|
|
36
|
-
If you have PostCSS or a bundler handling CSS imports, you can import from `src` to tree-pick only what you need:
|
|
37
|
-
|
|
38
|
-
```css
|
|
39
|
-
@import "ui-css/src/normalize.css";
|
|
40
|
-
@import "ui-css/src/theme.css";
|
|
41
|
-
@import "ui-css/src/components/button.css";
|
|
42
|
-
/* ... */
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
## Exports
|
|
46
|
-
|
|
47
|
-
- `"ui-css"` and `"ui-css/dist/ui.css"` point to the prebuilt CSS bundle.
|
|
48
|
-
- `"ui-css/dist/*"` exposes all built files in `dist/`.
|
|
49
|
-
- `"ui-css/src/*"` exposes the raw, unprocessed sources for advanced setups.
|
|
50
|
-
|
|
51
|
-
## Publishing
|
|
52
|
-
|
|
53
|
-
The package auto-builds before publish via `prepublishOnly`. To publish:
|
|
54
|
-
|
|
55
|
-
```bash
|
|
56
|
-
pnpm publish --access public
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
Ensure you are logged in to npm and have the proper permissions.
|
|
21
|
+
- Have sensible defaults without sacrificing flexibility and control
|
|
22
|
+
- Use modern HTML & CSS features
|
|
23
|
+
- Follow accessibility guidelines
|
|
24
|
+
- Serve as an inspiration
|
|
25
|
+
- Be scalable
|