Select Page

Category: media queries

Where Do You Nest Your Sass Breakpoints?

I love nesting my @media query breakpoints. It’s perhaps the most important feature of Sass to me. Maybe I pick a method and do it like this: .element { display: grid; grid-template-columns: 100px 1fr; @include breakpoint(baby-bear) { display: block; } } That’s straightforward enough. But what if my element has several sub-elements and the breakpoint affects them as well? There are different approaches, and I’m never quite sure which one I should be doing. I could duplicate the breakpoint for each child: .parent { @include breakpoint(desktop) { } .child { @include breakpoint(desktop) { } } .child-2 { @include breakpoint(desktop) { } } } The compiled CSS comes out to something like this: @media screen and (min-width: 700px) { .parent { } } @media screen and (min-width: 700px) { .parent .child { } } @media screen and (min-width: 700px) { .parent .child-2 { } } Or, I could duplicate the children under the first nested breakpoint: .parent { @include breakpoint(desktop) { .child { } .child-2 { } } .child { } .child-2 { } } That results in: @media screen and (min-width: 700px) { .parent .child { } .parent .child-2 { } } .parent .child { } .parent .child-2 { } Or I could do a combination of the two. Neither of them feels particularly great because of the duplication, but I’m not sure there is a perfect answer here....

Read More

How to create a logo that responds to its own aspect ratio

One of the cool things about is that it’s literally its own document, so @media queries in CSS inside the SVG are based on its viewport rather than the HTML document that likely contains it. This unique feature has let people play around for years. Tim Kadlec experimented with SVG formats and which ones respect the media queries most reliably. Sara Soueidan experimented with that a bunch more. Jake Archibald embedded a canvas inside and tested cross-browser compatibility that way. Estelle Weyl used that ability to do responsive images before responsive images. Another thing that has really tripped people’s triggers is using that local media query stuff to make responsive logos. Most famously Joe Harrison’s site, but Tyler Sticka, Jeremy Frank, and Chris Austin all had a go as well. Nils Binder has the latest take. Nils take is especially clever in how it uses s referencing other s for extra efficiency and min-aspect-ratio media queries rather than magic number widths. For the record, we still very much need container queries for HTML elements. I get that it’s hard, but the difficulty of implementation and usefulness are different things. I much prefer interesting modern solutions over trying to be talked out of it. Direct Link to Article — Permalink The post How to create a logo that responds to its own aspect ratio appeared first on CSS-Tricks....

Read More