#136

? A Note from Robin on CSS Grid, Possibilities, and Design Tools

This week, I’ve been thinking a lot about layout and specifically CSS Grid and the new values for the width property, such as min-content and max-content. I think that’s because I understand some of these new layout systems and properties from only a surface level — I’ve never really used them heavily in a project before, although I’ve made some experiments that were a lot of fun.

I think that’s how a lot of CSS works for me though — there are large portions of the spec that I understand in passing and will know what to look for when I need it. But now I’m starting to fear that layout changes in CSS have been so drastic that what I think browsers are capable of and what they can actually do are two very separate things.

In other words, I feel like I need to catch up.

On that note, I read a post by Hidde de Vries this week called Content-based grid tracks and embracing flexibility and he describes how Grid layout and min-content and max-content work in conjunction with one another. For example, I didn’t know that setting the width of an element to min-content will set the width to the longest word in that sentence. Sort of like this:

p {
  width: min-content;
}

You’ll see that paragraph look something like this where the width of the paragraph is set to the width of the word “consectetur”:

That’s kinda weird to me and I’m not sure exactly why you’d ever want to do that — but it certainly is neat!

Another point that I found super interesting is where Hidde argues how our design tools might not be keeping up with this new landscape of layout possibilities in CSS. Sketch, Figma, and Framer don’t yet seem to embrace all the wonderful opportunities that CSS Grid, Flexbox and the newer CSS properties and values give us.

Hidde writes:

One of the hardest problems in designing for the web is that the designer has to deal with unknowns. Websites have CMSes, so content can change. It’s likely unknown. Users come with all sorts of devices and screens, so canvas size is mostly unknown, too.

CSS does a fantastic job at giving us tools to solve that exact problem. If you want a certain amount of characters in a column, you don’t need to know what the characters are in order to get what you want. Just write what the rule is, and the browser worries about how to apply it to actual content. But even if this is solved in CSS, that doesn’t mean it is solved in the tools we design websites in. I have met with designers who write CSS and design in the browser, but design in software like Sketch is also very common.

I completely agree with Hidde on this point and I wonder just how many times I’ve designed an interface with the limitations of a design tool in mind rather than the limitations of a browser.

And maybe after all these years we have to return to the printed world for inspiration — we need books and magazine layouts to help us break out of the rut that we’re in when it comes to thinking about grids and layouts. We have to forget all about floats and clearfixes as well as CSS as a function for aligning boxes of divs next to one another. Instead, we have to think on a whole new level when it comes to layout.

One example of this that I think about often is the work that Jules Forrest has been posting — especially with her CodePen demos like this one that mimics the Russ & Daughters menu:

Isn’t this completely, stupendously wonderful? And have you ever seen a real website like this? I know I certainly haven’t.

But I reckon the reason why this hasn’t happened yet is that we haven’t bridged that gap between what CSS allows us to do and what design tools give us. And this isn’t to dunk on those tools — making a design tool is extraordinarily complex work and I love the recent developments and improvements to the tools that I’ve been using and seeing. I just wonder if there’s room for them to help us bridge this gap between design and development, too.

I guess my point with saying all this is just to underline what so many have said before: CSS Grid isn’t just a new way for us to lay out websites — it’s a brand new paradigm for design on the web.

It opens so many exciting doors for us and I reckon we might have to unlearn everything we thought browsers could do in the past if we really want to push our designs to the next level.

---

? From the blog

Mask Compositing: Ana Tudor goes into the power of combining multiple images via masks. Some design effects involving images and gradients simply aren’t possible without it.

Did you know that CSS Custom Properties can handle images too?: You might think of values for custom properties as being things like lengths (--padding: 1.2rem;) or colors (e.g. --brandColor: #f06d06;), but variables are surprisingly flexible in what they are allowed to be, and can even be references to images. Even Data URLs!

Do CSS Custom Properties Beat Sass Loops? They may not seem like a 1:1 comparison at first glance, but it’s all in how they are typically used. A Sass map of variables might be a configuration of colors and images used for style variations. That can be represented more clearly and with less overhead by using classes with overriding custom properties.

Should I Use Source Maps in Production? You probably should! It’s useful for both you and other people. It can help you debug production problems, and it delivers some teachability around your website without having to sacrifice performance.

Writing Tests for React Applications Using Jest and Enzyme: Do your React components render what they should? Call the right functions when their lifecycle methods trigger? You can, if you get your spy on.

Why CSS Needs its Own Survey

Recreating the Facebook Messenger Gradient Effect with CSS Stepan Bolotnikov does it by setting a background gradient and exposing it selectively with mix-blend-mode. Another approach is using background-attachment: fixed, although they both have their uses.

---