Building Pixel-Perfect UI Components Using CSS Variables

Bookmark

CSS variables have become so sophisticated in recent years that they now enable us to do things that aren't possible with JavaScript. In this lightning talk, I'll explain how MUI's engineers are leveraging the power of CSS variables in our new React component library, Joy UI, to deliver components that automatically adapt their style and structure to the context in which they're rendered.

9 min
02 Jun, 2023

Comments

Sign in or register to post your comment.

AI Generated Video Summary

CSS variables and their possibilities for UI developers, MUI's history and understanding of developer needs, Joy UI's focus on developer experience and use of CSS variables for consistency and future-proofing, the elimination of manual calculations and JavaScript with CSS variables in JoyUI, and the availability of playgrounds and a stable release for exploration.

1. Introduction to CSS and MUI

Short description:

I love CSS. That's it. That's the take. Specifically excited about CSS variables and their possibilities for UI developers. MUI leverages CSS variables for a delightful developer experience. CSS's role is expanding, opening up new possibilities. MUI's history and understanding of developer needs.

All right, hello everybody. Party people in the house. Wow. That's a lot of faces out there. All right.

I wasn't really sure how to start this talk. I was talking to a friend of mine who said, you should share your spiciest take. So in the next slide, I'm going to share my most controversial opinion in the realm of web dev. This is going to ruffle a lot of feathers in the crowd here today, but I really feel it needs to be said. You ready? Here goes. I love CSS. That's it. That's the take. I told you it's spicy, but I'm not here to make friends. I'm here to speak the truth.

Specifically the thing that I'm really excited about lately is CSS variables and all the possibilities that they open up for us as UI developers. At MUI, we are leveraging the power of CSS variables to deliver a developer experience that sparks joy and delight when customizing React's components. With CSS variables, we can essentially create components that are aware of their surroundings and automatically adapt to match the styles and structures of their parents and children. And best of all, this is all happening in CSS, not JavaScript. Don't send JavaScript to do CSS's job. And the role of CSS is quickly expanding. So for us developers, it opens up so many new possibilities.

But before we explore some of those possibilities, I need to share a little back story here. So MUI as a company began with material UI, which is the React implementation of Google's material design. We do a lot more than just material design these days. But material UI remains one of the most popular open source libraries on GitHub and has a history stretching all the way back to the early days of React itself. Over the course of those nine years or so, we've learned a lot about what developers want and need out of a component library. More than anything else, we've learned a lot about what developers hate. Here's an example of the kind of thing that I see on Twitter from time to time. I get it.

2. CSS Variables and Joy UI

Short description:

It can be frustrating when making small adjustments to a component requires multiple changes. Introducing Joy UI, a sister library to Material UI, with a focus on developer experience. Joy UI leverages CSS variables, allowing for a single source of truth and named variables for consistency and future-proofing. CSS variables have applications beyond branding, enabling dynamic values and mathematical calculations. Joy UI uses CSS variables to create components that adapt to their parents and children. Let's compare Material UI and Joy UI with a switch component.

The king of the haters here, he's got a point. He's not wrong. It can be super frustrating when you're trying to make a teeny tiny, two-pixel adjustment to one little component. And then you realize, oh, suddenly I have to make 10 other adjustments. It's frustrating. I get it. And that's just one of the reasons why we are building Joy UI, which is a brand new sister library to Material UI that implements our own in-house design system along with some bleeding edge innovations in developer experience.

And this is most evident, I think, in the way we've constructed Joy UI to handle CSS variables. So what even is a CSS variable? According to MDN, CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document. It's easy enough to understand in the context of branding colors, right? You've got a set of colors that are going to be reused throughout a design. And if you need to change one, it's so much simpler if you have one singular source of truth so you're not stuck finding and replacing hundreds of instances of the wrong hex code. Having that one source of truth is so powerful. And one of things that's really cool is you can actually name your variables, right? It helps a lot to maintain consistency across your design system and to help future proof your code, right? So instead of trying to figure out why this piece of text is sized at 1.75 rem, you can see that it has this dynamic value that's set to header to text, which gives you a lot more information about why that style has been applied.

And as you dive deeper down the rabbit hole, what you realize is that CSS variables have some really cool applications with our design systems that extend far beyond mere branding. So here's an example of what's going under the hood of the JoyUI component, the input component, that I shared a few slides back. It's weird, right? It's kind of hard to get used to at first. I mean, what is even going on here? We've got CSS variables that are referencing other variables, and they're doing mathematical calculations based on those variables. And it's all happening in CSS, right? As Josh Como points out, we're just not used to this concept, this mental model of defining CSS properties that have dynamic values. And things get even weirder when you start doing math with your variables and referencing variables inside of variables. Indeed, in the case of JoyUI, we're using CSS variables to create components that can automatically adapt their styles to match those of their parents and children, since they all reference that one singular source of truth for their magic numbers. So OK, that sounds cool, but what difference does it actually make, right? Let's consider a switch component and observe the differences in developer experience between Material UI and JoyUI. So here's some examples of switches.

These are all Material UI switches. Switch, obviously, simple on and off toggle, it's composed of a track and a thumb. So the user clicks the thumb to slide it across the track and make their selection. It's pretty simple on the surface, but it can get quite annoying when you need to make pixel perfect adjustments to the Material UI component. For instance, if we need to change the width of the track here, well, then that throws the thumb completely out of whack because it doesn't know the length of the track. And if I try to change the size of the thumb, well that messes up its path as well. And don't even get me started on border radii. If I need to adjust the rounded corners, it's not as though I can simply pass the same values to both pieces.

3. CSS Variables and JoyUI

Short description:

CSS variables in JoyUI eliminate the need for manual calculations and JavaScript. The SX prop contains the necessary CSS variables for pixel-perfect adjustments. JoyUI aims to enhance the developer experience and sparks joy. It's just a small sample of what JoyUI offers, with more innovations to come. Playgrounds and a stable release are available for exploration. Feedback is welcome via email or in person at the MUI booth.

No, of course not. I have to do math to calculate the precise curvature. And I don't know about you, but I did not sign up for this line of work to do math. No thank you.

So by contrast, let's take a look at JoyUI's switch. Now, watch what happens when I make those same adjustments that we talked about from the Material UI switch. You notice how it just works, right? And that's all thanks to the magic of CSS variables.

So not only do I not have to write any JavaScript to pull this off, but I don't even have to do the math to get the border radii right. It just knows what to do. And these values that you see inside the SX prop, those are the CSS variables that you need to make those pixel perfect adjustments. So you can literally just copy and paste this code directly onto your component after you've customized it. And we've got CSS variable playgrounds like this all throughout the JoyUI documentation to make it as simple as possible.

It's pretty cool, right? I think it helps foster the kind of developer experience that sparks joy. And that's why we call it JoyUI. So this has just been a pretty small sample of what we're up to with JoyUI. But I hope it's gotten you excited about the possibilities for CSS variables when implementing custom design systems. And I want to leave you with this question, which is this. What else is possible with CSS variables? I think we're going to continue to see a lot of new innovations in this realm. And I cannot wait to see what you all create.

If you thought those component demos were cool, like I said, we've got playgrounds all through our documentation. This QR code, if you want to scan it, will take you directly to the switch CSS variable playground that I just shared. So I hope you'll have some fun playing around with that. And if you like JoyUI, give it a try. We're inches away from a stable release. And we would love to get your feedback on how we can improve and what components we should build next. So if you get a chance, please send me an email. I'm Sam Sycamore. My email is SamMui.com. You can find me on Twitter, BlueSky, et cetera. I'm at the MUI booth for the rest of the conference. So come by, say hi. That's it. Thanks a lot, everybody. Thank you. Thanks a lot.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.


React Summit 2022React Summit 2022
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
There are many ways of authoring components in React, and doing it right might not be that easy, especially when components get more complex. In this talk, you will learn how to build future-proof React components. We will cover two different approaches to building components - Composition and Configuration, to build the same component using both approaches and explore their advantages and disadvantages.
React Advanced Conference 2021React Advanced Conference 2021
21 min
Building Cross-Platform Component Libraries for Web and Native with React
Building products for multiple platforms such as web and mobile often requires separate code-based despite most of the components being identical in look and feel. Is there a way where we could use shared React component library on different platforms and save time? In this presentation I'll demonstrate one way to build truly cross-platform component library with a unique approach of using React
&
React Native in combination.


Workshops on related topic

React Summit 2023React Summit 2023
137 min
Build a Data-Rich Beautiful Dashboard With MUI X's Data Grid and Joy UI
Workshop Free
Learn how to put MUI’s complete ecosystem to use to build a beautiful and sophisticated project management dashboard in a fraction of the time that it would take to construct it from scratch. In particular, we’ll see how to integrate the MUI X Data Grid with Joy UI, our newest component library and sibling to the industry-standard Material UI.
Table of contents:
- Introducing our project and tools
- App setup and package installation
- Constructing the dashboard
- Prototyping, styling, and themes - Joy UI features
- Filtering, sorting, editing - Data Grid features
- Conclusion, final thoughts, Q
&
A