Nils Binder talks about a technique for spacing between two elements. Picture a header on a large screen with a logo in the upper left and nav in the upper right. Then a small screen, when they can no longer be on the same “row” and need to wrap, they don’t just wrap but are centered.
A video explains better:
My mind goes: I’d just find the exact pixel value for the breakpoint I want this to happen and then write a media query that re-styles things to do that.
But… media queries are only for the entire browser window width. While that probably works in a case like this because it’s a full-site kinda concern, I get the desire to not have to write media queries. Nils’ idea borrow concepts from Heydon’s Holy Albatross to make this work without any media queries at all. So, you could use this on a smaller-scope component where you need to adjust the breaking point at a certain size that has nothing to do with the size of the browser window.
I have used this technique recently. The documentation is really good so I had no problems to implement it. You should give it a try when coming to such a design-idea.
This is (almost exactly) something I’ve been trying to solve for a project I’m working on! The one box it doesn’t check for me is that I don’t want any magic numbers for sizing where the wrap occurs. But for my build, which is almost entirely static, I was able to solve that by introducing
ch
into the calc based on the nav content. Basically N characters plus N nav items’ padding plus known logo width plus gap. It’s a lot to calc and I worry having all of that in a calc will harm performance so I’m looking into unifying on ch units to do as much at build time as I can. But it works!Yeah the thing abount the “magic number” fpr the threshold makes me skeptical too. Guess you could only use this on static, never changing content.
But I really like the idea of working without media-queries whenever possible!