{"id":299,"date":"2024-10-17T10:00:00","date_gmt":"2024-10-17T10:00:00","guid":{"rendered":"https:\/\/blissfuldebt.com\/?p=299"},"modified":"2025-03-06T17:24:39","modified_gmt":"2025-03-06T17:24:39","slug":"css-min-all-the-things","status":"publish","type":"post","link":"https:\/\/blissfuldebt.com\/index.php\/2024\/10\/17\/css-min-all-the-things\/","title":{"rendered":"CSS min() All The Things"},"content":{"rendered":"<p>              <title>CSS min() All The Things<\/title><\/p>\n<article>\n<header>\n<h1>CSS min() All The Things<\/h1>\n<address>Victor Ayomipo<\/address>\n<p>                  2024-10-17T10:00:00+00:00<br \/>\n                  2025-03-06T17:04:34+00:00<br \/>\n                <\/header>\n<p>Did you see <a href=\"https:\/\/frontendmasters.com\/blog\/what-if-you-used-container-units-for-everything\/\">this post<\/a> that Chris Coyier published back in August? He experimented with CSS container query units, going all in and using them for every single numeric value in a demo he put together. And <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/OJYKLXz\">the result<\/a> was\u2026 not too bad, actually.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"ExqWXOQ\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Container Units for All Units [forked]](https:\/\/codepen.io\/smashingmag\/pen\/ExqWXOQ) by <a href=\"https:\/\/codepen.io\/chriscoyier\">Chris Coyier<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/ExqWXOQ\">Container Units for All Units [forked]<\/a> by <a href=\"https:\/\/codepen.io\/chriscoyier\">Chris Coyier<\/a>.<\/figcaption><\/figure>\n<p>What I found interesting about this is how it demonstrates the complexity of sizing things. We\u2019re constrained to absolute and relative units in CSS, so we\u2019re either stuck at a specific size (e.g., <code>px<\/code>) or computing the size based on sizing declared on another element (e.g., <code>%<\/code>, <code>em<\/code>, <code>rem<\/code>, <code>vw<\/code>, <code>vh<\/code>, and so on). Both come with compromises, so it\u2019s not like there is a \u201ccorrect\u201d way to go about things &mdash; it\u2019s about the element\u2019s context &mdash; and leaning heavily in any one direction doesn\u2019t remedy that.<\/p>\n<p>I thought I\u2019d try my own experiment but with the CSS <code>min()<\/code> function instead of container query units. Why? Well, first off, we can supply the function with <strong>any type of length unit we want<\/strong>, which makes the approach a little more flexible than working with one type of unit. But the real reason I wanted to do this is personal interest more than anything else.<\/p>\n<h2 id=\"the-demo\">The Demo<\/h2>\n<p>I won\u2019t make you wait for the end to see how my <code>min()<\/code> experiment went:<\/p>\n<\/p>\n<blockquote class=\"twitter-tweet\" data-media-max-width=\"560\">\n<p lang=\"en\" dir=\"ltr\">Taking website responsiveness to a whole new level \ud83c\udf10 <a href=\"https:\/\/t.co\/pKmHl5d0Dy\">pic.twitter.com\/pKmHl5d0Dy<\/a><\/p>\n<p>&mdash; Vayo (@vayospot) <a href=\"https:\/\/twitter.com\/vayospot\/status\/1630863145014112257?ref_src=twsrc%5Etfw\">March 1, 2023<\/a><\/p><\/blockquote>\n<p><\/p>\n<p>We\u2019ll talk about that more after we walk through the details.<\/p>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <strong><a data-instant href=\"https:\/\/www.smashingconf.com\/online-workshops\/\">Smashing Workshops<\/a><\/strong> on <strong>front-end, design &amp; UX<\/strong>, with practical takeaways, live sessions, <strong>video recordings<\/strong> and a friendly Q&amp;A. With Brad Frost, St\u00e9ph Walter and <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\">so many others<\/a>.<\/p>\n<p><a data-instant href=\"smashing-workshops\" class=\"btn btn--green btn--large\">Jump to the workshops&nbsp;\u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"smashing-workshops\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img decoding=\"async\" loading=\"lazy\" class=\"feature-panel-image-img lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Feature Panel\" width=\"257\" height=\"355\" data-src=\"\/images\/smashing-cat\/cat-scubadiving-panel.svg\"><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"a-little-about-min\">A Little About <code>min()<\/code><\/h2>\n<p>The <code>min()<\/code> function takes two values and applies the smallest one, whichever one happens to be in the element\u2019s context. For example, we can say we want an element to be as wide as <code>50%<\/code> of whatever container it is in. And if <code>50%<\/code> is <em>greater<\/em> than, say <code>200px<\/code>, cap the width there instead.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"LYwWLMg\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [[forked]](https:\/\/codepen.io\/smashingmag\/pen\/LYwWLMg) by <a href=\"https:\/\/codepen.io\/geoffgraham\">Geoff Graham<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/LYwWLMg\">[forked]<\/a> by <a href=\"https:\/\/codepen.io\/geoffgraham\">Geoff Graham<\/a>.<\/figcaption><\/figure>\n<p>So, <code>min()<\/code> is sort of like container query units in the sense that it is aware of how much available space it has in its container. But it\u2019s different in that <code>min()<\/code> isn\u2019t querying its container dimensions to compute the final value. We supply it with two acceptable lengths, and it determines which is best given the context. That makes <code>min()<\/code> (and <code>max()<\/code> for that matter) <strong>a useful tool for responsive layouts that adapt to the viewport\u2019s size<\/strong>. It uses conditional logic to determine the \u201cbest\u201d match, which means it can help adapt layouts without needing to reach for CSS media queries.<\/p>\n<pre><code class=\"language-css\">.element {\n  width: min(200px, 50%);\n}\n\n\/&#042; Close to this: &#042;\/\n.element {\n  width: 200px;\n\n  @media (min-width: 600px) {\n    width: 50%;\n  }\n}\n<\/code><\/pre>\n<p>The difference between <code>min()<\/code> and <code>@media<\/code> in that example is that we\u2019re telling the browser to set the element\u2019s width to <code>50%<\/code> at a specific <em>breakpoint<\/em> of <code>600px<\/code>. With <code>min()<\/code>, it switches things up automatically as the amount of available space changes, whatever viewport size that happens to be.<\/p>\n<p>When I use the <code>min()<\/code>, I think of it as having the ability to make smart decisions based on context. We don\u2019t have to do the thinking or calculations to determine which value is used. However, using <code>min()<\/code> coupled with just any CSS unit isn\u2019t enough. For instance, relative units work better for responsiveness than absolute units. You might even think of <code>min()<\/code> as <a href=\"https:\/\/css-tricks.com\/min-max-and-clamp-are-css-magic\/\">setting a <em>maximum<\/em> value<\/a> in that it never goes below the first value but also caps itself at the second value.<\/p>\n<p>I mentioned earlier that we could use any type of unit in <code>min()<\/code>. Let\u2019s take the same approach that Chris did and lean heavily into a type of unit to see how <code>min()<\/code> behaves when it is used exclusively for a responsive layout. Specifically, we\u2019ll use <strong>viewport units<\/strong> as they are directly relative to the size of the viewport.<\/p>\n<p>Now, there are different flavors of viewport units. We can use the viewport\u2019s width (<code>vw<\/code>) and height (<code>vh<\/code>). We also have the <code>vmin<\/code> and <code>vmax<\/code> units that are slightly more intelligent in that they evaluate an element\u2019s width and height and apply either the smaller (<code>vmin<\/code>) or larger (<code>vmax<\/code>) of the two. So, if we declare <code>100vmax<\/code> on an element, and that element is <code>500px<\/code> wide by <code>250px<\/code> tall, the unit computes to <code>500px<\/code>.<\/p>\n<p>That is how I am approaching this experiment. What happens if we eschew media queries in favor of only using <code>min()<\/code> to establish a responsive layout and lean into viewport units to make it happen? We\u2019ll take it one piece at a time.<\/p>\n<h2 id=\"font-sizing\">Font Sizing<\/h2>\n<p>There are various approaches for responsive type. Media queries are quickly becoming the \u201cold school\u201d way of doing it:<\/p>\n<pre><code class=\"language-css\">p { font-size: 1.1rem; }\n\n@media (min-width: 1200px) {\n  p { font-size: 1.2rem; }\n}\n\n@media (max-width: 350px) {\n  p { font-size: 0.9rem; }\n}\n<\/code><\/pre>\n<p>Sure, this works, but what happens when the user uses a 4K monitor? Or a foldable phone? There are other tried and true approaches; in fact, <a href=\"https:\/\/www.smashingmagazine.com\/2023\/11\/addressing-accessibility-concerns-fluid-type\/\"><code>clamp()<\/code> is the prevailing go-to<\/a>. But we\u2019re leaning all-in on <code>min()<\/code>. As it happens, just one line of code is all we need to wipe out all of those media queries, substantially reducing our code:<\/p>\n<pre><code class=\"language-css\">p { font-size: min(6vmin, calc(1rem + 0.23vmax)); }\n<\/code><\/pre>\n<p>I\u2019ll walk you through those values\u2026<\/p>\n<ol>\n<li><code>6vmin<\/code> is essentially 6% of the browser\u2019s width or height, whichever is smallest. This allows the font size to shrink as much as needed for smaller contexts.<\/li>\n<li>For <code>calc(1rem + 0.23vmax)<\/code>, <code>1rem<\/code> is the base font size, and <code>0.23vmax<\/code> is a tiny fraction of the viewport\u2018s width or height, whichever happens to be the largest.<\/li>\n<li>The <code>calc()<\/code> function adds those two values together. Since <code>0.23vmax<\/code> is evaluated differently depending on which viewport edge is the largest, it\u2019s crucial when it comes to scaling the font size between the two arguments. I\u2019ve tweaked it into something that scales gradually one way or the other rather than blowing things up as the viewport size increases.<\/li>\n<li>Finally, the <code>min()<\/code> returns the smallest value suitable for the font size of the current screen size.<\/li>\n<\/ol>\n<p>And speaking of how flexible the <code>min()<\/code> approach is, it can restrict how far the text grows. For example, we can cap this at a maximum <code>font-size<\/code> equal to <code>2rem<\/code> as a third function parameter:<\/p>\n<pre><code class=\"language-css\">p { font-size: min(6vmin, calc(1rem + 0.23vmax), 2rem); }\n<\/code><\/pre>\n<p>This isn\u2019t a silver bullet tactic. I\u2019d say it\u2019s probably best used for body text, like paragraphs. We might want to adjust things a smidge for headings, e.g., <code>&lt;h1&gt;<\/code>:<\/p>\n<pre><code class=\"language-css\">h1 { font-size: min(7.5vmin, calc(2rem + 1.2vmax)); }\n<\/code><\/pre>\n<p>We\u2019ve bumped up the minimum size from <code>6vmin<\/code> to <code>7.5vmin<\/code> so that it stays larger than the body text at any viewport size. Also, in the <code>calc()<\/code>, the base size is now <code>2rem<\/code>, which is smaller than the default UA styles for <code>&lt;h1&gt;<\/code>. We\u2019re using <code>1.2vmax<\/code> as the multiplier this time, meaning it grows more than the body text, which is multiplied by a smaller value, <code>.023vmax<\/code>.<\/p>\n<p>This works for me. You can always tweak these values and see which works best for your use. Whatever the case, the <code>font-size<\/code> for this experiment is completely fluid and completely based on the <code>min()<\/code> function, adhering to my self-imposed constraint.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"margin-and-padding\">Margin And Padding<\/h2>\n<p>Spacing is a big part of layout, responsive or not. We need <code>margin<\/code> and <code>padding<\/code> to properly situate elements alongside other elements and give them breathing room, both inside and outside their box.<\/p>\n<p>We\u2019re going all-in with <code>min()<\/code> for this, too. We could use absolute units, like pixels, but those aren\u2019t exactly responsive.<\/p>\n<p><code>min()<\/code> can combine relative and absolute units so they are more effective. Let\u2019s pair <code>vmin<\/code> with <code>px<\/code> this time:<\/p>\n<pre><code class=\"language-css\">div { margin: min(10vmin, 30px); }\n<\/code><\/pre>\n<p><code>10vmin<\/code> is likely to be smaller than <code>30px<\/code> when viewed on a small viewport. That\u2019s why I\u2019m allowing the margin to shrink dynamically this time around. As the viewport size increases, whereby <code>10vmin<\/code> exceeds <code>30px<\/code>, <code>min()<\/code> caps the value at <code>30px<\/code>, going no higher than that.<\/p>\n<p>Notice, too, that I didn\u2019t reach for <code>calc()<\/code> this time. Margins don\u2019t really need to grow indefinitely with screen size, as too much spacing between containers or elements generally looks awkward on larger screens. This concept also works extremely well for padding, but we don\u2019t have to go there. Instead, it might be better to stick with a single unit, preferably <code>em<\/code>, since it is relative to the element\u2019s <code>font-size<\/code>. We can essentially \u201cpass\u201d the work that <code>min()<\/code> is doing on the <code>font-size<\/code> to the <code>margin<\/code> and <code>padding<\/code> properties because of that.<\/p>\n<pre><code class=\"language-css\">.card-info {\n  font-size: min(6vmin, calc(1rem + 0.12vmax));\n  padding: 1.2em;\n}\n<\/code><\/pre>\n<p>Now, padding scales with the <code>font-size<\/code>, which is powered by <code>min()<\/code>.<\/p>\n<h2 id=\"widths\">Widths<\/h2>\n<p>Setting <code>width<\/code> for a responsive design doesn\u2019t have to be complicated, right? We could simply use a single percentage or viewport unit value to specify how much available horizontal space we want to take up, and the element will adjust accordingly. Though, container query units could be a happy path outside of this experiment.<\/p>\n<p>But we\u2019re <code>min()<\/code> all the way!<\/p>\n<p><code>min()<\/code> comes in handy when setting constraints on how much an element responds to changes. We can set an upper limit of <code>650px<\/code> and, if the computed width tries to go larger, have the element settle at a full width of <code>100%<\/code>:<\/p>\n<pre><code class=\"language-css\">.container { width: min(100%, 650px); }\n<\/code><\/pre>\n<p>Things get interesting with text width. When the width of a text box is too long, it becomes uncomfortable to read through the texts. There are competing theories about how many characters per line of text is best for an optimal reading experience. For the sake of argument, let\u2019s say that number should be between 50-75 characters. In other words, we ought to pack no more than 75 characters on a line, and we can do that with the <code>ch<\/code> unit, which is based on the <code>0<\/code> character\u2019s size for whatever font is in use.<\/p>\n<pre><code class=\"language-css\">p {\n  width: min(100%, 75ch);\n}\n<\/code><\/pre>\n<p>This code basically says: <em>get as wide as needed but never wider than 75 characters.<\/em><\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"sizing-recipes-based-on-min\">Sizing Recipes Based On <code>min()<\/code><\/h2>\n<p>Over time, with a lot of tweaking and modifying of values, I have drafted a list of pre-defined values that I find work well for responsively styling different properties:<\/p>\n<pre><code class=\"language-css\">:root {\n  --font-size-6x: min(7.5vmin, calc(2rem + 1.2vmax));\n  --font-size-5x: min(6.5vmin, calc(1.1rem + 1.2vmax));\n  --font-size-4x: min(4vmin, calc(0.8rem + 1.2vmax));\n  --font-size-3x: min(6vmin, calc(1rem + 0.12vmax));\n  --font-size-2x: min(4vmin, calc(0.85rem + 0.12vmax));\n  --font-size-1x: min(2vmin, calc(0.65rem + 0.12vmax));\n  --width-2x: min(100vw, 1300px);\n  --width-1x: min(100%, 1200px);\n  --gap-3x: min(5vmin, 1.5rem);\n  --gap-2x: min(4.5vmin, 1rem);\n  --size-10x: min(15vmin, 5.5rem);\n  --size-9x: min(10vmin, 5rem);\n  --size-8x: min(10vmin, 4rem);\n  --size-7x: min(10vmin, 3rem);\n  --size-6x: min(8.5vmin, 2.5rem);\n  --size-5x: min(8vmin, 2rem);\n  --size-4x: min(8vmin, 1.5rem);\n  --size-3x: min(7vmin, 1rem);\n  --size-2x: min(5vmin, 1rem);\n  --size-1x: min(2.5vmin, 0.5rem);\n}\n<\/code><\/pre>\n<p>This is how I approached my experiment because it helps me know what to reach for in a given situation:<\/p>\n<pre><code class=\"language-css\">h1 { font-size: var(--font-size-6x); }\n\n.container {\n  width: var(--width-2x);\n  margin: var(--size-2x);\n}\n\n.card-grid { gap: var(--gap-3x); }\n<\/code><\/pre>\n<p>There we go! We have a heading that scales flawlessly, a container that\u2019s responsive and never too wide, and a grid with dynamic spacing &mdash; all without a single media query. The <code>--size-<\/code> properties declared in the variable list are the most versatile, as they can be used for properties that require scaling, e.g., margins, paddings, and so on.<\/p>\n<h2 id=\"the-final-result-again\">The Final Result, Again<\/h2>\n<p>I shared a video of the result, but here\u2019s a link to the demo.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"wvVdPxL\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [min() website [forked]](https:\/\/codepen.io\/smashingmag\/pen\/wvVdPxL) by <a href=\"https:\/\/codepen.io\/vayospot\">Vayo<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/wvVdPxL\">min() website [forked]<\/a> by <a href=\"https:\/\/codepen.io\/vayospot\">Vayo<\/a>.<\/figcaption><\/figure>\n<p>So, is <code>min()<\/code> the be-all, end-all for responsiveness? Absolutely not. Neither is a diet consisting entirely of container query units. I mean, it\u2019s cool that we can scale an entire webpage like this, but the web is never a one-size-fits-all beanie.<\/p>\n<p>If anything, I think this and what Chris demoed are <strong>warnings against dogmatic approaches to web design<\/strong> as a whole, not solely unique to responsive design. CSS features, including length units and functions, are tools in a larger virtual toolshed. Rather than getting too cozy with one feature or technique, explore the shed because you might find a better tool for the job.<\/p>\n<div class=\"signature\">\n  <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" class=\"lazyload\" data-src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\"><br \/>\n  <span>(gg, yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>CSS min() All The Things CSS min() All The Things [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":["post-299","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/posts\/299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/comments?post=299"}],"version-history":[{"count":1,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/posts\/299\/revisions"}],"predecessor-version":[{"id":300,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/posts\/299\/revisions\/300"}],"wp:attachment":[{"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/media?parent=299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/categories?post=299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/tags?post=299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}