Sign in to confirm you’re not a bot
This helps protect our community. Learn more

Fluent UI React Trainings: Styling best practices and icons

Microsoft Developer
588K subscribers
<__slot-el>
<__slot-el>
4.5K views 1 year ago
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 effective. 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 📝 Examples: #1 Runtime styl …...more
...more
Fluent UI React Trainings: Styling best practices and icons
83Likes
4,584Views
2024Mar 11
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 effective. 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 📝 Examples: #1 Runtime styling https://stackblitz.com/edit/vitejs-vi... #2 Tokens over direct colors https://stackblitz.com/edit/vitejs-vi... #3 Avoid important https://stackblitz.com/edit/vitejs-vi... #4 Using nested selectors https://stackblitz.com/edit/vitejs-vi... 💡 References: #1 Styles handbook https://github.com/microsoft/fluentui... #2 Limitations in Griffel https://griffel.js.org/react/guides/l...

Follow along using the transcript.

Microsoft Developer

588K subscribers