はてなブックマーク

You can use clamp() to set three values: a minimum, an ideal and a maximum. This is really handy in the context of a wrapper, because it’s a mostly fluid element, often limited with a max-width. This becomes a slight issue in mid-sized viewports, such as tablets in portrait mode, in long-form content, such as this article because contextually, the line-lengths feel very long. Even though the line

Front-end education for the real world. Since 2018. If there’s one thing you can guarantee in tech, it’s that someone, somewhere, will declare that CSS isn’t up to the job of “big projects” and what will undoubtedly be recommended by those same people will be either a JavaScript-heavy approach or some sort of all-in utility class approach like Tailwind. There’s mostly nothing wrong with these appr

I know I also have a terrible record with open source maintenance, so I thought I’d archive the original and just post this instead. Do with it what you want! To be super clear, this is a reset that works for me, personally and us at Set Studio. Whenever I refer to “we”, that’s who I’m referring to. The reset in wholepermalink /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box;

[class*='ratio-'] { display: block; position: relative; } [class*='ratio-'] > * { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .aspect-ratio-wide { padding-top: 56.25%; } .aspect-ratio-square { padding-top: 100%; } 🔥 Pro tip: The [class*=''] selector looks for elements that contain whatever you put in the quotes. It’s handy for querying parts of a selector whe