effcss 1.1.1 → 1.1.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 +13 -11
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -22,7 +22,13 @@ npm i effcss
|
|
|
22
22
|
|
|
23
23
|
## Usage example
|
|
24
24
|
|
|
25
|
-
See simple usage example in `demo` folder
|
|
25
|
+
See simple usage example in `demo` folder.
|
|
26
|
+
You can also open demo React project on [StackBlitz](https://stackblitz.com/edit/vitejs-react-effcss?file=index.html).
|
|
27
|
+
There is also demo Svelte project on [StackBlitz](https://stackblitz.com/edit/vitejs-svelte-effcss?file=index.html).
|
|
28
|
+
|
|
29
|
+
## Docs
|
|
30
|
+
|
|
31
|
+
The documentation is currently under active development, you can find the current version on the project's [homepage](https://effcss.surge.sh).
|
|
26
32
|
|
|
27
33
|
## Concepts
|
|
28
34
|
|
|
@@ -31,18 +37,18 @@ Effcss consists of two parts - **style provider** and **style config**.
|
|
|
31
37
|
**Style provider** is the static part that defines special web component (by default, `<style-provider>`). It should be connected in separate script-tag inside html head or manually defined in page scripts. The easiest way is to use the provider script with unpkg:
|
|
32
38
|
|
|
33
39
|
```html
|
|
34
|
-
<script src="https://unpkg.com/effcss
|
|
40
|
+
<script src="https://unpkg.com/effcss/dist/build/define-provider.min.js" crossorigin="anonymous"></script>
|
|
35
41
|
```
|
|
36
42
|
|
|
37
43
|
Or you can use provider script with all library style configs included:
|
|
38
44
|
|
|
39
45
|
```html
|
|
40
|
-
<script src="https://unpkg.com/effcss
|
|
46
|
+
<script src="https://unpkg.com/effcss/dist/build/define-provider-with-configs.min.js" crossorigin="anonymous"></script>
|
|
41
47
|
```
|
|
42
48
|
|
|
43
|
-
**Style config** is the dynamic part that configures the behavior of the web component and defines the initial styles of the page. **
|
|
44
|
-
- styles - initial
|
|
45
|
-
- ext - initial expanded rules for
|
|
49
|
+
**Style config** is the dynamic part that configures the behavior of the web component and defines the initial styles of the page. **Style config** consists of 3 fields:
|
|
50
|
+
- styles - initial stylesheets configs;
|
|
51
|
+
- ext - initial expanded rules for stylesheets;
|
|
46
52
|
- params - custom global values for interpolation. Params contains style modes, the mandatory mode is `root`;
|
|
47
53
|
|
|
48
54
|
This **style config** can be defined in at least two ways:
|
|
@@ -64,7 +70,7 @@ root.render(<App styleDispatcher={styleDispatcher}/>);
|
|
|
64
70
|
|
|
65
71
|
## Customization
|
|
66
72
|
|
|
67
|
-
You can add your own
|
|
73
|
+
You can add your own stylesheets configs. While you can write arbitrary rules and selectors, the recommended way is to use the **BEM methodology**. Block key for each style config is its key inside `styles` provider settings. A style config is an object like this:
|
|
68
74
|
|
|
69
75
|
```js
|
|
70
76
|
// in style config it is in 'block' field,
|
|
@@ -156,7 +162,3 @@ export default {
|
|
|
156
162
|
}
|
|
157
163
|
}
|
|
158
164
|
```
|
|
159
|
-
|
|
160
|
-
## Docs
|
|
161
|
-
|
|
162
|
-
Coming soon
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "effcss",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"description": "Next generation CSS-in-JS library",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "rollup -c",
|
|
@@ -66,5 +66,5 @@
|
|
|
66
66
|
"type": "git",
|
|
67
67
|
"url": "https://gitverse.ru/msabitov/effcss"
|
|
68
68
|
},
|
|
69
|
-
"homepage": "https://
|
|
69
|
+
"homepage": "https://effcss.surge.sh"
|
|
70
70
|
}
|