Fluent UI React Insights: Griffel

Microsoft Developer
Microsoft Developer
4.4 هزار بار بازدید - 2 سال پیش - Fluent UI Insights is a
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
2 سال پیش در تاریخ 1401/06/28 منتشر شده است.
4,401 بـار بازدید شده
... بیشتر