8

Use CSS Clamp to create a more flexible wrapper utility

 4 years ago
source link: https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Use CSS Clamp to create a more flexible wrapper utility

19th January, 2021

A handy way to use modern CSS functions to give yourself fine-grained, yet flexible, design control.

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.

An article where the content is very tight to each side of the viewport

Even though the line lengths are set to a sensible width in CSS, contextually, they still look very long in medium viewports.

If we use clamp() to use a viewport unit as the ideal and use what we would previously use as the max-width as the clamp’s maximum value, we get a much more flexible setup.

Code language 
/**
 * WRAPPER
 * Sets a max width, adds a consistent gutter and horizontally
 * centers the contents
 */
.wrapper {
  width: 90vw;
  width: clamp(16rem, 90vw, 70rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  position: relative;
}

We can set two instances of width so browsers that don’t support clamp() can get a sensible default. Browsers that do support clamp() will override that first value. Good ol’ progressive CSS, right?

You could also use logical properties to set margin and padding. I choose not to in this context because we’re setting both horizontal values anyway.

Here’s how it looks after setting our new wrapper:

An article where the content has much more room horizontally

This is much better now and the content looks like it has much more breathing room, making it easier to read.



The app I’m using for this responsive design testing is called Sizzy and it’s absolutely fantastic. You should get it!

This is a very small tweak, but these design details are what makes the user-experience that little bit better. Check out this handy write-up by Una Kravets.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK