Skip to content

[Docs] Add message for when using reboot with different BasePath #3678

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vnbaaij merged 3 commits into from
Apr 14, 2025
Merged

[Docs] Add message for when using reboot with different BasePath #3678

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
275463d
Fix #3674 by removing leading slash on @import
vnbaaij Apr 14, 2025
362d05d
Add message on using different BasePath
vnbaaij Apr 14, 2025
8b7a53b
merge
vnbaaij Apr 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,12 +82,12 @@ If you add interactivity later, the Blazor script will kick in and try to load t
If you want to use **Reboot**, you'll need to add to your `app.razor`, `index.html` or `_Layout.cshtml` file a line that includes the stylesheet (`.css` file). This can be done by adding the following line to the `<head>` section:

```html
<link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
<link href="/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
```

When using the templates to create your application, **Reboot** is already set-up for you.


_When creating a site that is hosted in a different base path,it might be necessary to remove the leading '/' from the stylesheet link._

### Register Services
Add the following in `Program.cs`
Expand Down
5 changes: 4 additions & 1 deletion examples/Demo/Shared/Pages/RebootPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,17 @@
</p>
<p>
If you want to use Reboot, like this demo site, you'll need to include it in your <code>App.razor</code> or <code>index.html</code> file like this:
<CodeSnippet Language="language-html">&lt;link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" /&gt;</CodeSnippet>
<CodeSnippet Language="language-html">&lt;link href="/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" /&gt;</CodeSnippet>
If you are creating a site by using our <a href="/Templates">Templates</a> package, this is already set up for you. You can
<FluentAnchor Appearance=Appearance.Hypertext Href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" Download="reboot.css">download the file</FluentAnchor>
to see what's inside.
</p>
<p>
PS: It is entirely possible to build a site <b>without using Reboot</b> but you will have to do more styling yourself.
</p>
<p>
PSs: <em>When creating a site that is hosted in a different base path,it might be necessary to remove the leading '/' from the stylesheet link.</em>
</p>

<h2 id="approach">Approach <a class="anchor-link" href="#approach" aria-label="Link to this section: Approach"></a></h2>
<p>Reboot builds upon Bootstrap's Reboot which itself builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. </p>
Expand Down
2 changes: 1 addition & 1 deletion examples/Demo/Shared/wwwroot/css/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

body {
height: 100%;
Expand Down
12 changes: 5 additions & 7 deletions examples/Demo/Shared/wwwroot/docs/CodeSetup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,19 +79,17 @@ builder.Services.AddFluentUIComponents(options =>

#### Reboot
**Reboot** is a collection of element-specific CSS changes in a single file to help kick-start building a site with the **Fluent UI Blazor** components for Blazor. It provides an elegant, consistent, and simple baseline to build upon.
The library automatically includes reboot through the
The library automatically includes reboot through the templates.

If you want to use **Reboot**, you'll need to add to your `app.razor`, `index.html` or `_Layout.cshtml` file a line that includes the stylesheet (`.css` file). This can be done by adding the following line to the `<head>` section:
If you want to use **Reboot**, and your site is not created by using our templates, you'll need to add to your `app.razor`, `index.html` or `_Layout.cshtml` file a line that includes the stylesheet (`.css` file). This can be done by adding the following line to the `<head>` section:

```html
<link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
<link href="/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
```

It is entirely possible to build a site without using **Reboot**. If you do not want to use Reboot and you used the templates as a starting point, just remove the following line from the app.css file (it is the first line in the file):
It is entirely possible to build a site without using **Reboot**. Either remove or do not add to file and it will not be used by the components.

```
@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
```
_When creating a site that is hosted in a different base path,it might be necessary to remove the leading '/' from the stylesheet link._

### Register Services
Add the following in `Program.cs`
Expand Down
2 changes: 1 addition & 1 deletion src/Templates/templates/aspire-starter/8.2/Aspire-StarterApplication.1.Web/wwwroot/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

body {
--body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
Expand Down
2 changes: 1 addition & 1 deletion src/Templates/templates/aspire-starter/9.0/Aspire-StarterApplication.1.Web/wwwroot/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

body {
--body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
Expand Down
2 changes: 1 addition & 1 deletion src/Templates/templates/blazorweb-csharp/BlazorWeb-CSharp/wwwroot/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

body {
--body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
Expand Down
2 changes: 1 addition & 1 deletion src/Templates/templates/componentswebassembly-csharp/wwwroot/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

body {
--body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
Expand Down
2 changes: 1 addition & 1 deletion src/Templates/templates/maui-blazor-solution/MauiApp.1.Shared/wwwroot/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

body {
--body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
Expand Down
Loading