Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit95638d5

Browse files
committed
doc updates
1 parentc4fb6a9 commit95638d5

18 files changed

+604
-411
lines changed

‎README.md‎

Lines changed: 86 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -15,34 +15,63 @@
1515
A PostCSS plugin and Javascript runtime combination, which allows you to write
1616
**container queries** in your CSS the same way you would write**media queries**.
1717

18+
🕶**Resize Observer**: Uses the native ResizeObserver implentation when available,
19+
and falls back to a[polyfill](https://github.com/que-etc/resize-observer-polyfill)
20+
to detect size changes. If you use Chrome,[you can test](https://codesandbox.io/s/l3rmm1rz2l)
21+
how performant the plugin is with the native implementation. (Shipped in v64.)
22+
23+
📦**Bundler Support**: Built with bundlers in mind, like[Parcel](https://parceljs.org),
24+
[webpack](https://webpack.js.org),[Browserify](http://browserify.org/) among others.
25+
26+
🎲**Component Support**: Built with component-based libraries in mind, like
27+
[React](https://reactjs.org),[Vue](https://vuejs.org/),[Ember](https://emberjs.com/),
28+
[Angular](https://angularjs.org/) among others.
29+
30+
📄**Intuitive syntax**: Uses at-rules, the same way@media queries are:
31+
`@container (...) { ... }`
32+
33+
🎉**Container Units**:[rh, rw, rmin, rmax,](docs/syntax.md#Units) which are
34+
relative to the container element's width and / or height. (Same way viewport
35+
units are relative to the viewport's size.)
36+
1837
##Introduction
1938

20-
Container querieswork the same way media queries do: they allow you to apply
39+
Container queriesare very similar to media queries; they allow you to apply
2140
styles to elements when certain conditions are met.
2241

23-
While media queries are relative to the viewport's size, container queries are
24-
relative to a container element's size.
42+
The key difference is that while media queries are relative to the viewport's
43+
size, container queries are relative to a container element's size.
44+
45+
Thanks to this trait, you can have multiple instances of the same container
46+
element, all of which changes its own- and its childrens' styles based on the
47+
containing element's size.
2548

2649
**What is a Container?**
2750

28-
A container is just an HTML element, which may contain other elements.
51+
A container is just an HTML element, which may(or may not)contain other elements.
2952

3053
You may want to think of them as "**Components**" ([React](https://facebook.github.io/react/docs/components-and-props.html))
3154
or "**Blocks**" ([BEM](http://getbem.com/naming/)).
3255

33-
##Highlights
56+
##Demos
3457

35-
- Built with webpack / React in mind, but can be used with legacy projects too.
36-
- Uses a[ResizeObserver polyfill](https://github.com/que-etc/resize-observer-polyfill)
37-
to detect size changes. If you use Chrome, you can test how performant the plugin
38-
is with the native`ResizeObserver` (shipped in 64):https://codesandbox.io/s/l3rmm1rz2l
39-
- Intuitive media query like syntax:`@container (...) { /* ... */ }`
40-
- Supports container units: rh, rw, rmin, rmax. (Useful to set font-size
41-
and other properties to a value that's changing with the container's size.)
42-
- Diffing algorithm which applies / removes only the necessary styles when a
43-
change occurs.
58+
The best way to understand the concept, if you play around with it yourself.
4459

45-
##Look and feel
60+
-[Nested components](https://codesandbox.io/s/k9n28rkkl7)
61+
-[Social Posts](https://codesandbox.io/s/0l71yp80w)
62+
-[Without React](https://codesandbox.io/s/mo7nr90vmj)
63+
64+
Note that because these demos are hosted on[CodeSandbox](https://codesandbox.io)
65+
where webpack or PostCSS cannot (currently) be configured, styles are simply
66+
imported as strings and processed in the browser.
67+
(Using[@zeecoder/cq-demo-utils](https://github.com/ZeeCoder/cq-demo-utils).)
68+
69+
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
4675

4776
```pcss
4877
// User.pcss
@@ -83,6 +112,10 @@ The html then could look like this:
83112
</div>
84113
```
85114

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+
86119
Finally, after you create a new`Container` instance, (passing in the container
87120
HTMLElement, and the extracted metadata) everything will just work.
88121

@@ -93,68 +126,40 @@ declaration, but it's encouraged to have a dedicated file for each component.
93126
##Documentation
94127

95128
-[Getting Started](docs/getting-started.md)
96-
-[Usage with webpack and React](docs/webpack-and-react.md)
97-
-[Usage with Gulp](docs/gulp.md)
129+
-[Parcel](docs/parcel.md)
130+
-[webpack](docs/webpack.md)
131+
-[Gulp](docs/gulp.md)
132+
-[React](docs/react.md)
133+
-[CSS Modules](docs/css-modules.md)
98134
-[Multiple Containers](docs/multiple-containers.md)
99-
-[Usage without webpack](docs/without-webpack.md)
135+
-[Without React](docs/without-react.md)
136+
-[CSS Preprocessors](docs/css-preprocessors.md)
100137
-[Syntax](docs/syntax.md)
101-
-[API](docs/api.md)
102-
-[Usage with CSS Preprocessors](docs/css-preprocessors.md)
138+
-[JS API](docs/js-api.md)
139+
-[Caveats](docs/caveats.md)
140+
-[CSS-in-JS](docs/css-in-js.md)
103141

104-
##Demos
142+
##Thoughts on Design
105143

106-
Note that because these demos are hosted on[CodeSandbox](https://codesandbox.io)
107-
where webpack cannot be configured, styles are simply imported as strings and
108-
processed in the browser. (using[@zeecoder/cq-demo-utils](https://github.com/ZeeCoder/cq-demo-utils))
109-
110-
While this works for the demos, in a real application it is strongly recommended
111-
to process styles build-time.
112-
113-
-[Nested components](https://codesandbox.io/s/k9n28rkkl7)
114-
-[Social Posts](https://codesandbox.io/s/0l71yp80w)
115-
-[Without React](https://codesandbox.io/s/mo7nr90vmj)
116-
117-
##Browser Support
118-
119-
Works with all modern browsers and IE10+
120-
121-
##Caveats / Notes
122-
123-
- The ResizeObserver polyfill reacts in~20ms. For the most part that should be ok, but
124-
if you need more control over when a container applies new styles, however, you
125-
can switch off the observing behaviour, and call the`adjust` method on the
126-
Container instance manually, when you see fit.
127-
Due to this 20ms reaction time, the more you nest containers, the slower change
128-
propagates from top to bottom. (**This is a no longer an issue** if the native
129-
`ResizeObserver` is available, for example in Chrome 64 and up.)
130-
- Styles are applied with the`Element.style.setProperty` method by default.
131-
This logic will probably be configurable in the future (#50) which will allow for
132-
different approaches. (Using[Styletron](https://github.com/rtsao/styletron), for
133-
instance.)
134-
- With element / container query solutions, circularity issues may arise. While
135-
[an attempt](https://github.com/ZeeCoder/container-query/issues/20) to tackle
136-
this was made, the same is still unfortunately true to this library as well.
137-
Use your best judgement when setting up container queries / units to avoid these
138-
issues.
139-
140-
##Thoughts on design
141-
142-
In case you're wondering about the tool's design, here is a list of goals I
143-
had in mind when I started:
144+
In case you're wondering about the tool's design, here is a list of goals I had
145+
in mind when I started:
144146

145147
- Should be tested,
146-
- Should use containers instead of elements,
148+
- Should use containers instead of elements (As opposed to other "element-query"
149+
libraries.),
147150
- Should use a media query-like syntax so that it's familiar and easy to use,
148-
- Should be easy enough to use, but a transpiling step would be assumed,
149151
- Should uses PostCSS for preprocessing, instead of having a runtime parser,
150-
- Should use JS modules, so it plays nicely with bundlers (webpack, Browserify,
151-
etc.) and Component-oriented UI libraries (React, Vue, etc.),
152-
- Shouldn't be limited to CSS syntax. (Utilising custom at-rules for instance),
153-
- Should work with component naming methodologies - like BEM or SUIT - the best.
152+
- Should be easy enough to use, but a transpiling step would be assumed (Due to
153+
the reason above.),
154+
- Should use ES modules, so it plays nicely with bundlers (Parcel, webpack
155+
Browserify, etc.) and with Component-oriented UI libraries (React, Vue, etc.),
156+
- Should work best with component naming methodologies, like BEM or SUIT, but
157+
should also work without them.
158+
- Should work with CSS Modules.
154159

155-
##Nextup
160+
##NextUp
156161

157-
[Ideas forenhancement](https://goo.gl/7XtjDe)
162+
[Ideas forEnhancement](https://goo.gl/7XtjDe)
158163

159164
##Alternatives
160165

@@ -168,15 +173,25 @@ convinced by this solution, then I encourage you to look at these alternatives:
168173

169174
##WICG
170175

171-
We at theWICG dived into 2018 with renewed effort to make native
172-
Container Queriesa reality in browsers.
176+
TheWICG dived into 2018 with renewed effort to make native Container Queries
177+
a reality in browsers.
173178

174179
If you're interested in how things are progressing, please feel free to visit
175180
the following links, where the disussions are happening:
176181

177-
-https://github.com/WICG/cq-usecases
178-
-https://github.com/WICG/container-queries
179182
-[Slack](https://join.slack.com/t/containerqueries/shared_invite/enQtMzA2OTc5MDUwNjk1LTEwMWEzNjcwMTY1MGYzYWMyOGMxM2MzNDM1OGZjMjM3NDNiMDMxYTk0YjQxN2FjYTZkYmZkMDZmOWE1ODRkZWI)
183+
-[Use Cases](https://github.com/WICG/cq-usecases)
184+
-[General Discussion](https://github.com/WICG/container-queries)
185+
186+
##Related
187+
188+
-[@zeecoder/react-resize-observer](https://github.com/ZeeCoder/react-resize-observer)
189+
-[use-resize-observer](https://github.com/ZeeCoder/use-resize-observer)
190+
191+
##Support
192+
193+
Please consider supporting me if you like what I do on my
194+
[Patreon](https://www.patreon.com/zeecoder) page.
180195

181196
##Big Thanks
182197

‎docs/api.md‎

Lines changed: 0 additions & 66 deletions
This file was deleted.

‎docs/caveats.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
#Caveats
2+
3+
##ResizeObserver Polyfill Delay
4+
5+
The ResizeObserver polyfill reacts in~20ms. For the most part that should be ok,
6+
but if you need more control over when a container applies new styles, you can
7+
switch off the observing behaviour, and call the`adjust` instance method on the
8+
Container instance manually, when you see fit.
9+
10+
Due to this 20ms reaction time, the more you nest containers, the slower change
11+
propagates from top to bottom.
12+
13+
**This is a non issue** with a native implementation however, for example in
14+
Chrome 64 and up.
15+
16+
##Circularity
17+
18+
With element / container query solutions, circularity issues may arise. While
19+
[an attempt](https://github.com/ZeeCoder/container-query/issues/20) to tackle
20+
this was made, the same is still unfortunately true to this library as well.
21+
22+
Use your best judgement when using container queries to avoid these issues.
23+
24+
---
25+
26+
◀️️[JS API](js-api.md)
27+
28+
▶️️[CSS-in-JS](css-in-js.md)

‎docs/css-in-js.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,7 @@ this could be implemented.
2626

2727
Don't hesitate to post in[issues](https://github.com/ZeeCoder/container-query/issues)
2828
if you feel like you have a good solution!
29+
30+
---
31+
32+
◀️️[Caveats](caveats.md)

‎docs/css-modules.md‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@ The following shows a usual PostCSS setup, with container queries and CSS module
1313
```sh
1414
yarn add postcss-nested \
1515
postcss-media-minmax \
16-
@zeecoder/postcss-container-query \
17-
postcss-modules --dev
16+
postcss-modules \
17+
@zeecoder/postcss-container-query --dev
1818

1919
# or with NPM:
2020

2121
npm install postcss-nested \
2222
postcss-media-minmax \
23-
@zeecoder/postcss-container-query \
24-
postcss-modules --save-dev
23+
postcss-modules \
24+
@zeecoder/postcss-container-query --save-dev
2525
```
2626

2727
Then put the following`.postcssrc` file in your root directory:
@@ -67,7 +67,7 @@ export default App;
6767
This would work the same way without react React, or without any component
6868
library for that matter.
6969

70-
##Withwebpack
70+
##webpack
7171

7272
Usage is the same with webpack, just add something like the following to your config:
7373

@@ -100,3 +100,9 @@ Usage is the same with webpack, just add something like the following to your co
100100
```
101101

102102
You can of course have the PostCSS setup in a config file for webpack as well.
103+
104+
---
105+
106+
◀️️[React](react.md)
107+
108+
▶️️[Multiple Containers](multiple-containers.md)

‎docs/css-preprocessors.md‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
#Compatibility with OtherCSS Preprocessors
1+
#CSS Preprocessors
22

3-
From the examples above, you can see that I recommend using PostCSS.
4-
However, other css preprocessors would work too, as long as they support custom
5-
at-rules.
3+
From the examples above, you can guess that I recommend using PostCSS. However,
4+
other css preprocessors would work too, so long as they support custom at-rules.
65

76
##SASS
87

@@ -46,7 +45,15 @@ Which compiles to:
4645
}
4746
```
4847

48+
(This is equivalent to using postcss-nested with the bubble option.)
49+
4950
##LESS
5051

5152
Support for at-rules is limited, but it'll work fine with v2.6.0 and above as
5253
long as you avoid nesting.
54+
55+
---
56+
57+
◀️️[Without React](without-react.md)
58+
59+
▶️️[Syntax](syntax.md)

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp