@meteo28093/equinox-ui 0.1.7 → 0.1.8
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 +29 -6
- package/dist/equinox-ui.0.1.7.esm.js +730 -319
- package/dist/equinox-ui.0.1.7.global.js +730 -319
- package/dist/{equinox-ui.0.1.6.global.js → equinox-ui.0.1.8.esm.js} +719 -308
- package/dist/{equinox-ui.0.1.6.esm.js → equinox-ui.0.1.8.global.js} +730 -319
- package/dist/equinox-ui.esm.js +730 -319
- package/dist/equinox-ui.global.js +730 -319
- package/package.json +5 -2
- package/reset.css +96 -0
- package/src/styles/tokens.css +28 -10
- package/tokens.css +43 -0
- package/dist/equinox-ui.0.1.3.esm.js +0 -3100
- package/dist/equinox-ui.0.1.3.global.js +0 -3100
- package/dist/equinox-ui.0.1.4.esm.js +0 -2875
- package/dist/equinox-ui.0.1.4.global.js +0 -2875
- package/dist/equinox-ui.0.1.5.esm.js +0 -2875
- package/dist/equinox-ui.0.1.5.global.js +0 -2875
package/README.md
CHANGED
|
@@ -2,14 +2,37 @@
|
|
|
2
2
|
|
|
3
3
|
Equinox UI is a web component library for blogs or small web projects.
|
|
4
4
|
|
|
5
|
-
|
|
6
5
|
## Use with a CDN
|
|
7
6
|
|
|
7
|
+
### For Existing Websites (Component Styles Only)
|
|
8
|
+
Load only the design tokens to ensure your site's existing styles are **not** altered.
|
|
9
|
+
```html
|
|
10
|
+
<link href="https://unpkg.com/@meteo28093/equinox-ui/tokens.css" rel="stylesheet">
|
|
11
|
+
<script src="https://unpkg.com/@meteo28093/equinox-ui" defer></script>
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
## CSS Integration Modes
|
|
17
|
+
|
|
18
|
+
Equinox UI offers two stylesheet integration pathways depending on whether you are embedding components into an **existing website** or building a **new project from scratch**.
|
|
19
|
+
|
|
20
|
+
| Stylesheet | Content | Safe for Existing Sites? | Recommended Use Case |
|
|
21
|
+
| :--- | :--- | :--- | :--- |
|
|
22
|
+
| `tokens.css` | CSS Custom Properties only (`--ee-*`) | **Yes** | Integrating custom elements into existing sites. |
|
|
23
|
+
| `reset.css` | Tag-level resets (`body`, `a`, `button`, etc.) | **No** (will overwrite styles) | Clean-slate blogs or new projects. |
|
|
24
|
+
| `equinox.css` | Combined bundle (`tokens.css` + `reset.css`) | **No** (will overwrite styles) | Quick-start prototypes or new projects. |
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
### For New Websites (Full Reset & Layout)
|
|
29
|
+
Load the combined sheet to establish global styles for the viewport, links, and buttons.
|
|
8
30
|
```html
|
|
9
31
|
<link href="https://unpkg.com/@meteo28093/equinox-ui/equinox.css" rel="stylesheet">
|
|
10
32
|
<script src="https://unpkg.com/@meteo28093/equinox-ui" defer></script>
|
|
11
33
|
```
|
|
12
34
|
|
|
35
|
+
---
|
|
13
36
|
|
|
14
37
|
## Install from npm
|
|
15
38
|
|
|
@@ -22,13 +45,13 @@ Import the package once in your browser entrypoint to register all custom elemen
|
|
|
22
45
|
```js
|
|
23
46
|
// main.js
|
|
24
47
|
import "@meteo28093/equinox-ui";
|
|
25
|
-
import "@meteo28093/equinox-ui/equinox.css";
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
If you only want the design tokens, import the exported token file instead:
|
|
29
48
|
|
|
30
|
-
|
|
49
|
+
// Choose your style mode:
|
|
50
|
+
// A) SAFE MODE (For existing websites - variables only)
|
|
31
51
|
import "@meteo28093/equinox-ui/tokens.css";
|
|
52
|
+
|
|
53
|
+
// B) RESET MODE (For brand new websites - full layout reset)
|
|
54
|
+
// import "@meteo28093/equinox-ui/equinox.css";
|
|
32
55
|
```
|
|
33
56
|
|
|
34
57
|
Importing `@meteo28093/equinox-ui` registers the components globally with `customElements.define(...)`.
|