Where's all my layout and styling primitives?

[Arlen22]

I'm trying to come to this from Material UI and I'm confused. Where's CSS Baseline? Where's my Stack component for flex layouts? Where are my theme components so I can properly apply theme styles to my custom components that I'm supposed to write? And how do I know I'm writing those components correctly? I want to be able to just layout a page without having to worry about making sure all the styles and paddings and everything else are properly set. Aren't these things standard in fluent UI? Do I just need to guess what I think looks good? Is there no standard format for this like there is in Material UI where everything is standardized?

[bubuluxWork]

Hey @Arlen22 ,

I had a similar question once:

• What is Stack / Box aquivalent in Fluent UI V2 and best practice on accessing design tokens #32836
• https://stackoverflow.com/questions/78989040/what-is-stack-box-aquivalent-in-fluent-ui-v2-and-best-practice-on-accessing-de

I was on the wrong version of the docs, that's why I was not finding useful docs for this. Make sure you are on this version: https://react.fluentui.dev/?path=/docs/concepts-introduction--docs

The "Theme" Section will help a lot.

I was also confused about the baseline, but so far, integrating Fluent into a legacy app (which has tons of CSS above it) did not mess up the underlying CSS from Fluent. If you want to create some sort of static baseline, I'd suggest looking into this: https://griffel.js.org/react/api/make-static-styles

I don't think it was intended to serve as a baseline utility, but for me, it actually did the trick. But this might have been a side effect.

[Arlen22]

Ah, nice. So it's StackShim and StackItemShim . Yay!

Also, I switched back to MUI because I didn't have the time to bother trying to figure out flex shenanigans in HTML and I just wanted a quick solution. But hopefully this will help future fluentui candidates.

[carlamntn]

Hello @Arlen22

FluentUI React is an implementation of the Fluent 2 Design System, offering theme tokens and low-level components (primitives) that enable you to build the UX according to the design system. It intentionally does not support layout components as both CSS Flex and CSS Grid are supported well everywhere nowadays. Please check those websites for more information on guidelines and standards.

Similar questions answered:
#30798 (comment)
#28195 (comment)

[Arlen22]

The problem with this approach is that it still requires me to find a third party solution that ties into your CSS framework? Why not just provide such a solution within your framework? Or are you saying that any such solution would simply be passing rendering primitives through verbatim? Like am I supposed to just use a div with display: flex?

[tudorpopams]

Hello @Arlen22 , you should be able to find all v8 to v9 mappings on this page.

In v9, we chose to offer our users the option to implement their own layout preferences by using CSS properties through CSS-in-JS instead of coming up with our own baked in methods. This means that the Stack component and others that were used for these kind of purposes have been removed, but you can still achieve all those previous behaviours by following the examples that we have provided (one, two).