Blazor web csharp template

[EdCharbeneau]

Better a11y

• Overall better HTML semantics by changing the structure of the layout in markup. Visually the rendering is the same as .NET 7. A new Header.razor​​ component was added to accommodate the new layout.
• Collapsible navigation was rewritten to use a small bit of inline JavaScript instead of the improvised checkbox approach. The menu has proper aria-* attributes and sets focus to the first link when opened, per WCAG guidelines.
• Removed :focus​ override, this is bad practice for a11y.​

Bootstrap 5.3 / themes

• Updated to Bootstrap 5.3 and embraced Bootstrap throughout the sample layout. This eliminated ~100 lines of unnecessary CSS code and simplified the HTML too. Now MainLayout.razor.css only contains error ui​ CSS code.
• Enabled theming via Bootstrap 5.3's CSS variables (aka Custom Properties). This allows runtime theme changes and future proofs the code for Bootstrap vnext.
• Automatic light/dark mode detected and applied via user preferences. This is a no-code solution enabled by CSS variables. Developers can remove this feature by uncommenting a single line of code in App.razor
• Made use of inline svg​ icons. This enables light/dark​ themes to control icon color.
• Added --bl-*​ (opt-in) CSS variables to control the theme of the NavBar component. This allows devs to easily ditch the gradient if they want to customize the template.​

Code improvements

• Reduced complexity of CSS code throughout, app.css​ is much smaller and cleaner. Used updated semantics for mediaqueries.
• Avoided CSS variables where code could be generated in SampleContent == false​ templates.
• Add/Removed blazor-error-ui​ CSS code based on template interactivity. The markup was removed in the prior version, but not the CSS.

Fixes issue #50927

[ghost]

Thanks for your PR, @EdCharbeneau. Someone from the team will get assigned to your PR shortly and we'll get it reviewed.

[visualbam]

Since you're making improvements, is it too soon to use native css nesting?

.navbar-brand {
    height: 3.5rem;
    font-size: 1.1rem;
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0;
    background-color: var(--bl-blazor-brand-color1);
    
    &, &:hover, &:visited {
       color: var(--bl-blazor-brand-contrast-color);
    }
    
    @media (width >= 641px) {
       width: 250px;
       margin-right: 1rem;
    }
}

[EdCharbeneau]

Sure, I didn't realize it was supported in all browsers. Looks like it is according to "can I use"

[EdCharbeneau]

Updates have been pushed

[agriffard]

Target = ターゲット in katakana as you can see below.

[EdCharbeneau]

Should this also include .NET 8?

"symbols/Framework/choices/net8.0/description": "ターゲット net8.0",
"symbols/Framework/choices/net9.0/description": "ターゲット net9.0",

[EdCharbeneau]

Updates have been pushed

[SteveSandersonMS]

Thanks for contributing this. Just before you get too far along this path, I want to make sure we have the same expectations!

Firstly, you probably already know this, but it's definitely too late to include a significant project template change in .NET 8. The earliest we'd consider is .NET 9.

Second, for .NET 9, we are really hoping to do a bigger redesign of the template, so most of the existing styling would not be applicable anyway. Any changes you make to the existing template might be techniques we could carry forwards into the redesigned templates, but I can't guarantee that, and certainly any fine-grained things you do (e.g., accessibility-related styling) would be unlikely to carry forwards to a very different template design.

Did you already talk with @danroth27 or someone else on the team about this project? Just want to check what expectations have been established!

[EdCharbeneau]

Thanks for contributing this. Just before you get too far along this path, I want to make sure we have the same expectations!

Firstly, you probably already know this, but it's definitely too late to include a significant project template change in .NET 8. The earliest we'd consider is .NET 9.

Second, for .NET 9, we are really hoping to do a bigger redesign of the template, so most of the existing styling would not be applicable anyway. Any changes you make to the existing template might be techniques we could carry forwards into the redesigned templates, but I can't guarantee that, and certainly any fine-grained things you do (e.g., accessibility-related styling) would be unlikely to carry forwards to a very different template design.

Did you already talk with @danroth27 or someone else on the team about this project? Just want to check what expectations have been established!

No worries @SteveSandersonMS

I saw some opportunities to fix some accessibility issues. The overall look of the design has not changed. The work is already done for me. If you're unable to use the changes, then hopefully someone can use it as inspiration for vNext.

Looking forward to the redesign in .NET 9. 💖

[mkArtakMSFT]

I believe those translations will happen automatically as a separate PR. So you should exclude those changes from your PR.

[EdCharbeneau]

Per the readme, it looked like it was required. Maybe this needs some clarification?
https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/README.md#submitting-pull-requests

Per @SteveSandersonMS if the PR is still wanted, I will go back and remove the translation files.

[SteveSandersonMS]

Per @SteveSandersonMS if the PR is still wanted, I will go back and remove the translation files.

Thanks. I wouldn't worry about such details since it would be more useful to use this as a starting point or set of requirements for the bigger redesign effort for .NET 9.

I see that #50927 is already tracked in the ".NET 9 planning" milestone so will get considered there, and perhaps could serve as the tracking issue for the proposed redesign. Since that issue already links to this PR, we'll be able to find our way back here (even if this is closed) to see the description and implementation at the right time.

[Pinox]

@EdCharbeneau Would be great to have an option between Bootstrap and TailwindCSS in this template. Bootstrap do not play nicely with something like Mudblazor that is one off the biggest open source Blazor Component Libraries. TailwindCSS works great in general and does not cause issues. Also TailwindCSS is used extensively in all major frameworks like React , Angular , Vue etc.

Similar to request here:
(#51326)

Perhaps @bub-bl is willing todo the TailwindCSS contribution.

[bub-bl]

@Pinox You summarized the situation very well, Boostrap is starting to get old, and tailwind is adopted by a very large majority of web frameworks.

Perhaps give the possibility to choose between Boostrap or Tailwind via the project configurator?

I am ready to contribute for the Tailwind part

[EdCharbeneau]

Tailwind is far too opinionated for me, it reminds me of inline styles. If I'm not mistaken it requires the JavaScript tooling too?

Anyhow, it's not my decision. The ASPNET team would need to decide that.

[Pinox]

Well I don't think Microsoft is committed to only Bootstrap in Blazor because if they are then they should make that statement clearly to all devs. As Blazor is the way forward in my opinion for having a universal UI in web , native windows development and mobile I think more resources should be devoted to creating flexibility and choice as that will be good for the whole ecosystem of .NET

[gragra33]

@Pinox Bootstrap was created to address the issues with cross-browser quirks/compatibility. JQuery was done for a similar reason. Websites sprung up to address the CSS quirks black box that frustrated both professional and amateur developers.

CSS and modern browser support have come a long way and, IMHO, are improving day by day. The need for CSS frameworks, and JQuery for that matter, has passed. CSS naming conventions can address specificity issues. The days of needing hacks and !important are long gone. CSS Frameworks, IMHO, are bloatware.

I am a firm believer that, like Javascript, plain CSS should be the new standard for Blazor samples.

[KennethHoff]

@EdCharbeneau Tailwind is opinionated? I'm assuming you mean bootstrap in this context. Tailwind is fully customizable - albeit with some sane defaults. Bootstrap on the other hand is incredibly opinionated and comparatively very awkward to customize.

I personally think neither framework should be in the template, but if there has to be one, then Tailwind makes more sense as it's more modern.

I dislike comparing these two frameworks though, because it's like comparing Blazor Server with React; they're so incredibly different there's not even a logical comparison to make. The only real similarity is that they both rely on adding more than 1 class to an element for styling. How they work (technically and conceptually) are fundamentally different - one is a set of standard looks. The other is practically another language on top of CSS that emphasizes modularity and colocation.

[Pinox]

Just to make it clear I'm not for this framework over another framework. I'm for an all inclusive template wizard + CLI support with choice of options. With frameworks like Bootstrap , Plain HTML , Mublazor etc. With optional add-on capabilities like TailwindCSS , CummunityToolkit.MVVM and with different State Providers. This makes it extremely easy for beginners and advanced users to mock up a sample Blazor Project without the boilerplate. The nice thing is Microsoft can already lean on this tech ( wizard ) as they have it in other products like WinUI & MAUI.

For example :

[SteveSandersonMS]

@mkArtakMSFT Since we're definitely not doing this in .NET 8, I'm moving this to .NET 9 planning and removing my assignment.

[mkArtakMSFT]

Thanks @SteveSandersonMS. Looks like we're not yet ready to take this, but this is something we will be interested in for sure. So perhaps this is a timing problem. @EdCharbeneau do you mind if for now we switch this to Draft and bring back when we actually look into template updates?

[EdCharbeneau]

Fine with me, let me know if/when I can help.

[mkArtakMSFT]

Thanks @EdCharbeneau. Would you mind changing it to Draft yourself, as it seems I'm unable to do it myself.