Episode
Fluent UI React Insights: Griffel
with Oleksandr Fediashov
Fluent UI Insights is a series that describes the design and decisions behind the Fluent UI design system. In the third episode, Oleksandr from the Fluent UI team explains implementation details and complexities behind Griffel. Griffel is CSS-in-JS used in Fluent UI React v9 and features ahead-of-time compilation.
Chapters
- 00:00 - Intro
- 00:34 - Requirements for styling solution
- 04:53 - Important concepts of Atomic CSS-in-JS
- 11:00 - Creating Griffel CSS-in-JS
- 13:21 - Did everything go smoothly?
Recommended resources
- FluentUI website
- FluentUI GitHub repo
- Griffel website
- Griffel GitHub repo
- CodeSandbox that shows LVFHA order importance
- Styletron website
- Webpack loader for Griffel
- RFC: makeStyles() API changes
- RFC: Do not allow CSS shorthands in makeStyles() calls
Related episodes
Fluent UI Insights is a series that describes the design and decisions behind the Fluent UI design system. In the third episode, Oleksandr from the Fluent UI team explains implementation details and complexities behind Griffel. Griffel is CSS-in-JS used in Fluent UI React v9 and features ahead-of-time compilation.
Chapters
- 00:00 - Intro
- 00:34 - Requirements for styling solution
- 04:53 - Important concepts of Atomic CSS-in-JS
- 11:00 - Creating Griffel CSS-in-JS
- 13:21 - Did everything go smoothly?
Recommended resources
- FluentUI website
- FluentUI GitHub repo
- Griffel website
- Griffel GitHub repo
- CodeSandbox that shows LVFHA order importance
- Styletron website
- Webpack loader for Griffel
- RFC: makeStyles() API changes
- RFC: Do not allow CSS shorthands in makeStyles() calls
Related episodes
Video URL
HTML iframe
Have feedback? Submit an issue here.