You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
While this works demo purposes, in a real application it is strongly recommended
70
-
to process styles build-time, as later described in this documentation.
71
-
72
-
## Look and Feel
73
-
74
-
// todo remove once everything here is covered by other sections
75
-
76
-
```pcss
77
-
// User.pcss
78
-
.User {
79
-
background: red;
80
-
81
-
@container (width >= 200px) and (height >= 200px) {
82
-
background: green;
83
-
}
84
-
85
-
&__name {
86
-
font-size: 10rh;
87
-
}
88
-
89
-
&__avatar {
90
-
display: none;
91
-
92
-
@container (width >= 200px) and (height >= 200px) {
93
-
display: block;
94
-
}
95
-
}
96
-
}
97
-
```
98
-
99
-
The above example assumes **webpack**, using **BEM** naming conventions and the
100
-
**postcss-loader**.
101
-
102
-
`.User` is automatically detected to be the container (the first class in the
103
-
proccessed file), and all following container queries / units will be related
104
-
to the containing `.User` element.
105
-
106
-
The html then could look like this:
107
-
108
-
```html
109
-
<divclass="User">
110
-
<divclass="User__name"></div>
111
-
<imgclass="User__avatar"src="..." />
112
-
</div>
113
-
```
114
-
115
-
(Note that for container queries and units to work, all elements must be
116
-
descendants of the container, as their conditions and values only makes sense in
117
-
a container's context.)
118
-
119
-
Finally, after you create a new `Container` instance, (passing in the container
120
-
HTMLElement, and the extracted metadata) everything will just work.
121
-
122
-
_Note:_ A file can have multiple containers, with the [@define-container](docs/multiple-containers.md)
123
-
declaration, but it's encouraged to have a dedicated file for each component.
124
-
(Which is also the assumption of the [@zeecoder/react-container-query](https://github.com/ZeeCoder/container-query/tree/master/packages/react-container-query) package).
69
+
While this works for demo purposes, in a real application it is strongly
70
+
recommended to process styles build-time, as later described in this
71
+
documentation.
125
72
126
73
## Documentation
127
74
@@ -139,10 +86,19 @@ declaration, but it's encouraged to have a dedicated file for each component.
139
86
-[Caveats](docs/caveats.md)
140
87
-[CSS-in-JS](docs/css-in-js.md)
141
88
89
+
## What's Next?
90
+
91
+
[Ideas for Enhancement](https://goo.gl/7XtjDe)
92
+
93
+
## Support
94
+
95
+
Please consider supporting me if you like what I do on my
96
+
[Patreon](https://www.patreon.com/zeecoder) page.
97
+
142
98
## Thoughts on Design
143
99
144
100
In case you're wondering about the tool's design, here is a list of goals I had
145
-
in mind when I started:
101
+
in mind with the initial implementation:
146
102
147
103
- Should be tested,
148
104
- Should use containers instead of elements (As opposed to other "element-query"
@@ -155,21 +111,6 @@ in mind when I started:
155
111
Browserify, etc.) and with Component-oriented UI libraries (React, Vue, etc.),
156
112
- Should work best with component naming methodologies, like BEM or SUIT, but
157
113
should also work without them.
158
-
- Should work with CSS Modules.
159
-
160
-
## Next Up
161
-
162
-
[Ideas for Enhancement](https://goo.gl/7XtjDe)
163
-
164
-
## Alternatives
165
-
166
-
If you like the idea of container queries, but are not particularly
167
-
convinced by this solution, then I encourage you to look at these alternatives:
0 commit comments