DEV Community

Cover image for Fluent UI Insights EP3: Griffel
Paul Gildea
Paul Gildea

Posted on

1

Fluent UI Insights EP3: Griffel

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 the implementation details and complexities behind Griffel. Griffel is a CSS-in-JS used in Fluent UI React v9 and features ahead-of-time compilation.

In this video he covers:

  • Requirements for styling solution
  • Important concepts of Atomic CSS-in-JS
  • Creating Griffel CSS-in-JS
  • Did it all magically go smoothly? Find out more!

Checkout the CodesandBox from the video that demonstrates LVFHA order importance:

As always let us know what kind of content you want see from Fluent UI React by visiting us on:

Quadratic AI

Quadratic AI – The Spreadsheet with AI, Code, and Connections

  • AI-Powered Insights: Ask questions in plain English and get instant visualizations
  • Multi-Language Support: Seamlessly switch between Python, SQL, and JavaScript in one workspace
  • Zero Setup Required: Connect to databases or drag-and-drop files straight from your browser
  • Live Collaboration: Work together in real-time, no matter where your team is located
  • Beyond Formulas: Tackle complex analysis that traditional spreadsheets can't handle

Get started for free.

Watch The Demo 📊✨

Top comments (0)

Permit.io Launch week

Permit CLI Launch Week is coming 🔜

Fully CLI-Based Integrated Authorization - for devs who live in their terminal. Subscribe for daily livestreams, swag giveaways, and exciting new releases.

Sign up

👋 Kindness is contagious

If you found this post helpful, please leave a ❤️ or a friendly comment below!

Okay