Slide 1
Slide 1 text
Responsive Web
Applications
with Container Queries
Slide 2
Slide 2 text
Why We Need
Container Queries
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
• No orders
• One order
• Less than one page of
orders
• Multiple pages of
orders
• Has Info Notifications
• Tab overflow
• Has Warning
Notifications
• Has limited access to
features
• Has different apps
installed
Slide 11
Slide 11 text
And now consider all of
those things for
multiple viewports
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
With media queries,
you have to know the
interplay of all objects
in all scenarios
Slide 15
Slide 15 text
Implementing
Container Queries
Slide 16
Slide 16 text
With container
queries, you only have
to know the interplay
within a single object
Slide 17
Slide 17 text
No container
queries!
Slide 18
Slide 18 text
Declare in:
CSS,
HTML, or
JavaScript
Slide 19
Slide 19 text
https://github.com/ResponsiveImagesCG/cq-demos
.element:media( min-width:500px ) {}
https://github.com/tysonmatanich/elementQuery
.element[min-width~="500px"] {
background-color: #eee;
}
Slide 20
Slide 20 text
http://elementqueries.com/
@element ".element" and
(min-width: 500px) {
.element {
background: gold;
}
}
Slide 21
Slide 21 text
https://github.com/tysonmatanich/elementQuery
.element[min-width~="400px"] { }
Slide 22
Slide 22 text
To parse CSS, either
need to be on same
domain or set up CORS
Slide 23
Slide 23 text
https://github.com/Snugug/eq.js
data-eq-pts="small: 400, medium: 600,
large: 900"
Slide 24
Slide 24 text
At HTML level, requires
consistency of
implementation
across app
Slide 25
Slide 25 text
We chose JavaScript
and built our own
Slide 26
Slide 26 text
elements = [
{
"module": ".flex--2x1",
"className":"responsiveClass",
"minWidth": 768, "maxWidth": 1024
}
]
Slide 27
Slide 27 text
Why is this
so f**kin’ hard?
Slide 28
Slide 28 text
.element:media( min-width:500px ) {
width: 400px;
}
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
.element {
width: 50%;
}
.element:media( min-width:500px ) {
color: blue;
}
Slide 31
Slide 31 text
The Future
Slide 32
Slide 32 text
ResizeObserver
Slide 33
Slide 33 text
Houdini
Slide 34
Slide 34 text
What’s Houdini:
• Layout API
• Custom Paint API
• Parser API
• Properties and Values
• Animation Workout
• Typed OM
• Font Metrics API
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
In Chrome:
• Layout API
• Custom Paint API
• Parser API
• Properties and Values
• Animation Worklet
• Typed OM
• Font Metrics API
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
…
…
Slide 39
Slide 39 text
.two-columns {
display: flex;
flex-wrap: wrap;
}
.col1, .col2 { flex-grow: 1; }
.col1 {
flex-basis: 66%;
min-width: 360px;
}
.col2 {
flex-basis: 33%;
}
Slide 40
Slide 40 text
No content
Slide 42
Slide 42 text
.media-body {
display: flex;
flex-wrap: wrap;
}
Slide 43
Slide 43 text
.media-content {
flex-grow: 1;
flex-basis: 400px;
margin-right: 20px;
}
Slide 44
Slide 44 text
.media-actions {
align-self: center;
margin: 20px 0;
}
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
...
Slide 47
Slide 47 text
.box {
display: flex;
flex-wrap: wrap;
}
Slide 48
Slide 48 text
.box-image {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 150px;
}
.box-image > img {
width: 100%;
object-fit: cover;
}
Slide 49
Slide 49 text
.box-content {
margin: 10px;
flex-shrink: 1;
flex-grow: 1;
flex-basis: 60%;
}
Slide 50
Slide 50 text
…
…
…
Slide 51
Slide 51 text
.items {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(400px, 1fr));
}
Slide 52
Slide 52 text
Thank you.
http:/
/snook.ca/
@snookca