Don’t miss this video by Heydon that digs into CSS layouts. It’s great how he combines fundamental knowledge, like the way elements flow, wrap, and can have margin with new layout methods like flexbox and grid (with specific examples). Of particular note is the clear demonstration of how flexbox and grid help avoid the need to constantly intervene with media queries in order to affect responsive layouts.
So, in place of this…
.sidebar {
float: left;
width: 20rem;
}
.not-sidebar {
float-right: calc(100% - 20rem);
}
@media (max-width: 40rem) {
.sidebar, .not-sidebar {
float: none;
width: auto.
}
}
…something like this:
/* Parent container */
.with-sidebar {
display: flex;
flex-wrap: wrap;
}
.sidebar {
flex-basis: 20rem;
flex-grow: 1;
}
.not-sidebar {
min-width: 50%;
flex-grow: 600;
}
This isn’t a one-off video either, Heydon’s channel has videos on making unusual shapes and custom properties as well.
Some things are more like tricks rather than clean css. Like the
margin: -0.5rem;
Nice! As technology changes, I guess it shouldn’t surprise that what was considered cutting edge not seemingly long ago (screen width-based media queries) will no longer be needed at all, before we know it. I love the thinking to solve the problem of manually determined breakpoints!