Log in
React Conferences
React Summit 2023React Summit 2023
Talk Videos
EN

Video: Building Pixel-Perfect UI Components Using CSS Variables

Sam Sycamore
Sam Sycamore
MUI
Rate this content
Bookmark
The video delves into the potential of CSS variables in enhancing user interface design, particularly through the Joy UI library. Joy UI, a sister library to Material UI, focuses on improving the developer experience by leveraging CSS variables, which can simplify the process of making pixel-perfect adjustments. This is particularly useful for tasks like customizing the switch component, which can benefit from CSS variables by eliminating the need for JavaScript and manual calculations. The speaker emphasizes the power of CSS variables for design systems, highlighting their ability to provide a single source of truth for values like branding colors, thereby facilitating consistency and future-proofing. Joy UI's use of CSS variables allows components to automatically adapt to their parent and child styles, offering a more intuitive and joyful experience for developers. The video also touches on the challenges developers face with Material UI components, where making small adjustments often requires multiple changes and calculations, issues that Joy UI aims to address. Developers interested in experimenting with CSS variables in Joy UI can find playgrounds for customization in the Joy UI documentation.

This talk has been presented at React Summit 2023, check out the latest edition of this React Conference.

Read FAQ and transcription
component librarycssreact css variables
Sam Sycamore
Sam Sycamore
9 min
02 Jun, 2023

Comments

Sign in or register to post your comment.
Available in other languages:

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

Design Systems: Walking the Line Between Flexibility and Consistency
React Advanced 2021React Advanced 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
Siddharth Kshetrapal
Siddharth Kshetrapal
GitHub
The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.
best practicesdesign systemscomponent library
Towards a Standard Library for JavaScript Runtimes
Node Congress 2022Node Congress 2022
34 min
Towards a Standard Library for JavaScript Runtimes
Top Content
James Snell
James Snell
Workers team @Cloudflare
There is a need for a standard library of APIs for JavaScript runtimes, as there are currently multiple ways to perform fundamental tasks like base64 encoding. JavaScript runtimes have historically lacked a standard library, causing friction and difficulty for developers. The idea of a small core has both benefits and drawbacks, with some runtimes abusing it to limit innovation. There is a misalignment between Node and web browsers in terms of functionality and API standards. The proposal is to involve browser developers in conversations about API standardization and to create a common standard library for JavaScript runtimes.
javascriptcomponent librarynode.js
Build a Design System with React and Tailwind CSS
React Summit 2022React Summit 2022
27 min
Build a Design System with React and Tailwind CSS
Top Content
Shruti Balasa
Shruti Balasa
Tech Educator
This Talk discusses design systems and how to build one using React and Tailwind CSS. Tailwind CSS provides utility classes for building complex layouts without writing CSS rules. Custom colors can be added to the Tailwind CSS config file, and font styles and text sizes can be customized. The entire Tailwind CSS configuration can be customized to meet specific requirements. Base styles can be added to the config file itself using a plugin. Reusable components can be created with Tailwind CSS, allowing for easy customization of size and color.
design systemscssreact design systemstailwind react
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
React Summit 2022React Summit 2022
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
Top Content
Thomas Findlay
Thomas Findlay
Findlay Web Tech
Today's Talk discusses building flexible, resilient, and future-proof React components using composition and configuration approaches. The composition approach allows for flexibility without excessive conditional logic by using multiple components and passing props. The context API can be used for variant styling, allowing for appropriate styling and class specification. Adding variants and icons is made easy by consuming the variant context. The composition and configuration approaches can be combined for the best of both worlds.
react componentscomponent libraryarchitectureprogramming conceptsreact compositionreact fiber
Rethinking CSS - Introducing Stylex
React Finland 2021React Finland 2021
25 min
Rethinking CSS - Introducing Stylex
Top Content
Naman Goel
Naman Goel
Meta
CSS + superpowers - bloat. How Stylex creates a zero-cost abstraction that gives CSS superpowers.
csscss-in-jsstylexjs react native
Building Cross-Platform Component Libraries for Web and Native with React
React Advanced 2021React Advanced 2021
21 min
Building Cross-Platform Component Libraries for Web and Native with React
Top Content
Perttu Lähteenlahti
Perttu Lähteenlahti
Mavericks
This Talk discusses building cross-platform component libraries for React and React Native, based on a successful project with a large government-owned news organization. It covers the requirements for React Native knowledge, building cross-platform components, platform-specific components, styling, and the tools used. The Talk also highlights the challenges of implementing responsive design in React Native.
reactreact nativecomponent librarycross-platformreact native componentsreact native for webreact native ui library

Workshops on related topic

Build a Data-Rich Beautiful Dashboard With MUI X's Data Grid and Joy UI
React Summit 2023React Summit 2023
137 min
Build a Data-Rich Beautiful Dashboard With MUI X's Data Grid and Joy UI
Top Content
WorkshopFree
Sam Sycamore
Siriwat (Jun) Kunaporn
2 authors
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
component library
Learn To Use Composables: The Swiss Army Knife Of Vue Developers
Vue.js Live 2024Vue.js Live 2024
163 min
Learn To Use Composables: The Swiss Army Knife Of Vue Developers
Workshop
Juan Andrés Núñez Charro
Juan Andrés Núñez Charro
Composables (composition functions) are stateful/stateless functions that can leverage Vue's reactivity API, decoupling it from components.This shift in perspective opens the possibility for tackling common scenarios in a new and creative way. In this workshop, you will learn how to solve typical problems every Vue developer faces, using composables:
- Data store;- Component cross-communication;- Utility functions (DOM, API, etc);And more.
component libraryunit testingvue