Episode

Fluent UI React Trainings: Styling best practices and icons

with Oleksandr Fediashov

Fluent UI React Insights and Training

This tutorial covers two distinct topics. The first topic goes through some of the best practices of using the Griffel CSS-in-JS with or without Fluent UI components. We will learn about common development patterns when using Griffel and the best way to implement them. The second topic is a more advanced deep-dive into the different icon variants that we have in Fluent UI and how to use them effectively.

Chapters

  • 00:00 - Intro
  • 00:11 - Styles handbook
  • 01:00 - Griffel runtime styles limitations
  • 01:12 - Incorrect styling example
  • 02:03 - Enumerate all style combinations
  • 03:17 - Inline styles
  • 03:52 - Inline CSS variables
  • 05:19 - Structuring style definitions
  • 07:09 - Design tokens and themes
  • 09:22 - Don't use !important
  • 11:38 - Nested combinators
  • 16:37 - Icon recap
  • 17:25 - Regular and filled icon variants
  • 18:05 - Bundling icons
  • 19:31 - Toggling icon variants on hover
  • 20:17 - Fluent UI component icon handling
  • 21:15 - Outro

Developer