Post Content
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-vite-y24huq
#2 Tokens over direct colors https://stackblitz.com/edit/vitejs-vite-lycyid
#3 Avoid important https://stackblitz.com/edit/vitejs-vite-uarkfp
#4 Using nested selectors https://stackblitz.com/edit/vitejs-vite-63qrew
? References:
#1 Styles handbook https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/styles-handbook.md
#2 Limitations in Griffel https://griffel.js.org/react/guides/limitations/ Read More Microsoft Developer
+ There are no comments
Add yours