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

Fluent UI React Insights: Griffel

Microsoft Developer
589K subscribers
<__slot-el>
<__slot-el>
4.9K views 2 years ago #reactjs #webdev #fluentui
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 explain implementation details and complexities behind Griffel. Griffel is a CSS-in-JS used in Fluent UI React v9 and features ahead-of-time compilation. 🔗 Links: https://github.com/microsoft/griffel https://github.com/microsoft/fluentui https://react.fluentui.dev/ 📚 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? 💡 References: #1 Building the New Facebook with React and Relay    • Building the New Facebook with React ...   #2 CodeSandbox that shows LVFHA order importance https://codesandbox.io/s/lvfha-puzzle... #3 Styletron's website https://styletron.org #4 Webpack loader for Griffel https://github.com/microsoft/griffel/... #5 RFC: makeStyles() API changes https://github.com/microsoft/fluentui... #6 RFC: Do not allow CSS shorthands in makeStyles() calls https://github.com/microsoft/fluentui... #7 Griffel's website https://griffel.js.org #fluentui #webdev #reactjs #cssinjs ...more
...more
Fluent UI React Insights: Griffel
74Likes
4,945Views
2022Sep 19
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 explain implementation details and complexities behind Griffel. Griffel is a CSS-in-JS used in Fluent UI React v9 and features ahead-of-time compilation. 🔗 Links: https://github.com/microsoft/griffel https://github.com/microsoft/fluentui https://react.fluentui.dev/ 📚 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? 💡 References: #1 Building the New Facebook with React and Relay    • Building the New Facebook with React ...   #2 CodeSandbox that shows LVFHA order importance https://codesandbox.io/s/lvfha-puzzle... #3 Styletron's website https://styletron.org #4 Webpack loader for Griffel https://github.com/microsoft/griffel/... #5 RFC: makeStyles() API changes https://github.com/microsoft/fluentui... #6 RFC: Do not allow CSS shorthands in makeStyles() calls https://github.com/microsoft/fluentui... #7 Griffel's website https://griffel.js.org #fluentui #webdev #reactjs #cssinjs

Follow along using the transcript.

Microsoft Developer

589K subscribers