Beginner information on layout element usage/guidelines?

[backcode-dev]

I'm completely new to this framework so this question is from a beginner viewpoint. For context - I'm a long time C# dev with a bit of experience with ASP/MVC. Is there a document available that explains expected use of layout elements available to us? I'm specifically thinking of equivalents to the Bootstrap system. There are pages about fluent UI on MS design but those are aspirational, not documentation :)

Is there an equivalent to "container" that items must be in? Is there an equivalent to "row" that items should be nested within? FluentLayout doesn't have a width parameter so I assume it is supposed to be within elements like stack that do? I have rewritten the generated MainLayout.razor to use fluent elements, but I have not been able to get a working layout when using <FluentMainLayout ...> as the outer element. The element does not work as expected when I replace the asp

element with it. For example, FluentMain is not documented that I can see. The small samples on each element page often have "stock" elements (like ) instead of using , instead of etc. - so I do not have very many references.

I have a functional layout using the fluent grid, stack, and Layout elements but resizing, padding, and margins not always what I would expect without me adding some css - I'm assuming that I have nested elements improperly. Also - looking forward to the updated templates mentioned in github issues!

Thanks!

[vnbaaij]

Hi,

There is no document available like that. As opposed to Bootstrap, we do not prescribe what elements you need to realize a layout. We just provide some of the building blocks to help you. I think the demo site describes all of these well enough. Specifically https://www.fluentui-blazor.net/Layout shows a number of them working together.

If things are unclear, there is always the source of the components themselves, but also the source of the the demo site is available in the repo.

I think some examples have gone missing from your post

We kind of assume you to know css and html to make a layout look, act and behave as you want. We don't aim to cater every possible scenario with the components.

Yes, we (main maintainers) work for Microsoft and yes we implement Fluent in these Blazor components, but we are not an integral part of the Fluent team in Microsoft. Not everything they publish pertains to our library per se.

Hope this helps!

[backcode-dev]

Ok - that is definitely understandable. I'm not a webdev by trade so I'm not always up to speed ;) I'm used to libs having some (or lots) of undercover "magic". As for the samples - the github editor ate everything I had in angle brackets - but that's moot now since your answer explains what I needed. Thanks for the patient help!

[mguinness]

There's a good post Getting started with Blazor and FluentUI that is helpful. It covers how to do responsive layouts which I think a lot of people coming from Bootstrap would want.

I'm looking to replicate Navbar in Bootstrap, but NavMenu looks to be vertical only. I'm assuming I could use Menu instead?

[vnbaaij]

We don't have anything for that out of the box.

It is not our goal to be a complete UI framework, like Bootstrap. We provide a set of components that work well together and implement the Fluent Design language but I'm not foreseeing any big changes or additions to that at the moment.

[mguinness]

That's unfortunate, I imagine others will also be needing a solution OOB for this. Below is my attempt at getting this to work.

@media (max-width: 599px) {
    .hidden-xs {
        display: none !important;
    }
}

@media (min-width: 600px) and (max-width: 959px) {
    .hidden-sm {
        display: none !important;
    }
}

@media (min-width: 960px) and (max-width: 1279px) {
    .hidden-md {
        display: none !important;
    }
}

@media (min-width: 1280px) and (max-width: 1919px) {
    .hidden-lg {
        display: none !important;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    .hidden-xl {
        display: none !important;
    }
}

@media (min-width: 2560px) {
    .hidden-xxl {
        display: none !important;
    }
}

	X Small <600px	Small ≥600px	Medium ≥960px	Large ≥1280px	X Large ≥1920px	XX Large ≥2560px
.hidden-xs	✅	❌	❌	❌	❌	❌
.hidden-sm	❌	✅	❌	❌	❌	❌
.hidden-md	❌	❌	✅	❌	❌	❌
.hidden-lg	❌	❌	❌	✅	❌	❌
.hidden-xl	❌	❌	❌	❌	✅	❌
.hidden-xxl	❌	❌	❌	❌	❌	✅

[vnbaaij]

This is great! Think we can put this in the Grid's css file.
Looking at that file, we only have medaiqueries there for min-width values. Why do you include the max-width values? Are the needed?

I'm not a CSS expert, so maybe a dumb question...

[mguinness]

If you'd prefer ranges to sizes then you could use the alternate styles below. That way you could replace hidden-sm hidden-md hidden-lg hidden-xl hidden-xxl with hidden-sm-up and hidden-xs with hidden-xs-down that was used in the markup shown in comment above.

.hidden-xs-up {
  display: none !important;
}

@media (max-width: 599px) {
  .hidden-xs-down {
    display: none !important;
  }
}

@media (min-width: 600px) {
  .hidden-sm-up {
    display: none !important;
  }
}

@media (max-width: 959px) {
  .hidden-sm-down {
    display: none !important;
  }
}

@media (min-width: 960px) {
  .hidden-md-up {
    display: none !important;
  }
}

@media (max-width: 1279px) {
  .hidden-md-down {
    display: none !important;
  }
}

@media (min-width: 1280px) {
  .hidden-lg-up {
    display: none !important;
  }
}

@media (max-width: 1919px) {
  .hidden-lg-down {
    display: none !important;
  }
}

@media (min-width: 1920px) {
  .hidden-xl-up {
    display: none !important;
  }
}

@media (max-width: 2559px) {
  .hidden-xl-down {
    display: none !important;
  }
}

@media (min-width: 2560px) {
  .hidden-xxl-up {
    display: none !important;
  }
}

.hidden-xxl-down {
  display: none !important;
}

[dvoituron]

Following your excellent ideas. Thanks @mguinness, I just pushed this PR #1048.

To hide elements, simply use the HiddenWhen attribute by selecting one of the following values or combining them with the | operator (see Enumeration flags)

To display an element only on a given range of screen sizes, you can combine a these values. e.g. GridItemHidden.Md | GridItemHidden.Lg will display the element for all screen sizes, except on medium and large devices.

Example:

<FluentGrid>
    <FluentGridItem xs="12"> ... </FluentGridItem>
    <FluentGridItem xs="12" sm="6" HiddenWhen="GridItemHidden.SmAndDown"> ... </FluentGridItem>
    <FluentGridItem xs="12" sm="6"> ... </FluentGridItem>
</FluentGrid>

What is you opinion?

[mguinness]

This looks very good, thanks for being so responsive (pardon the pun, but it's Friday 😀)

I like the enumeration design. @bytefish Since I've referenced your blog, do you have any thoughts?

I noticed minor typos, showing "that" instead of "than", i.e. Browser size less that 599px in help text.

One final suggestion, can you think of a way to wrap the Javascript change event of window.matchMedia?

I was thinking it would be helpful to register a C# event using an enumeration value for a breakpoint change.

The post Using matchMedia shows more detail, but below is a simple example based on GridItemHidden.Xs

var mql = window.matchMedia('(max-width: 599px)');
mql.addEventListener('change', event => console.log(event.matches ? 'At or under' : 'Over', event.media));

[bytefish]

@mguinness Thanks for tagging me. I didn’t know the blog post was helpful. This looks very good. 👍

[mguinness]

Tried it out with the JavaScript interoperability in Blazor

var mql;

function registerEvent(dotNetObjRef, mq, init) {
    mql = window.matchMedia(mq);
    if (init)
        dotNetObjRef.invokeMethodAsync("OnBreakpointChange", mql.matches, mql.media);        

    mql.addEventListener('change', event => dotNetObjRef.invokeMethodAsync('OnBreakpointChange', event.matches, event.media));
}

The callback to C# worked and updated the variable for display

@code
{
    string Message;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
            await JsRuntime.InvokeVoidAsync("registerEvent", DotNetObjectReference.Create(this), "(max-width: 599px)");
    }

    [JSInvokable]
    public void OnBreakpointChange(bool match, string media)
    {
        Message = (match ? "At or under " : "Over ") + media;
        StateHasChanged();
    }
}

It would be great if this could be wired up with the FluentGrid somehow.

[dvoituron]

Thanks. Yes... I will add this feature in the FluentGrid component

[dvoituron]

I've added a FluentGrid.OnSizeEnter event that triggers when a matchMedia Query is verified.

Example

<FluentGrid OnSizeEnter="@OnSizeEnterHandler"> ... </FluentGrid>

void OnSizeEnterHandler(GridItemSize size)
{
    Console.WriteLine($"Page Size: {size}");
    DemoLogger.WriteLine($"Page Size: {size}");
}

[mguinness]

LGTM 🚀

Do you have nightly builds available from the dev branch? Something like https://pkgs.dev.azure.com/fluentui-blazor?

Thanks for your efforts in adding this functionality. Hopefully this will end up being used within the Blazor Web App template.