Blazor Foundation 6, which is the topic of this tutorial, is a front-end framework that helps you build mobile-first responsive websites and native apps more quickly and easily.
Just like any other framework, there are plenty of methods available for installing the Blazor Foundation 6 framework. Below is a simple methods that will give you a clear idea on how to install Blazor Foundation 6 framework for Blazor WebAssembly.
We are going to assume here that you know and have created a Blazor WebAssembly project using Visual Studio IDE.
Install from NuGet Package.
Navigate to Project > Manage NuGet Packages
Search for OpenCodeDev.Blazor.Foundation
Then Install the Latest version.
Setup index.html
Open up /wwwroot/index.html
If the project is a new project you’ll probably have the demo project and you’ll have to remove reference like bootstraps.
The final document should look like this:
<!-- HEADER -->
<!-- Compiled CSS of Zurb Foundation 6 also available foundation.min.css -->
<link href="/_content/OpenCodeDev.Blazor.Foundation/css/foundation.css" rel="stylesheet" />
<!-- Contain Overrides and Addons to Foundation Elements and Also Extras from Blazor Foundation 6.-->
<link href="/_content/OpenCodeDev.Blazor.Foundation/css/blazor.foundation.css" rel="stylesheet" />
<!-- Required for MDI Icons -->
<link href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css" rel="stylesheet" />
<!-- ... BODY ... -->
<!-- Footer After blazor.webassembly.js -->
<script src="/_content/OpenCodeDev.Blazor.Foundation/js/jquery.js"></script>
<script src="/_content/OpenCodeDev.Blazor.Foundation/js/foundation.js"></script>
<script src="/_content/OpenCodeDev.Blazor.Foundation/js/blazor-foundation.js"></script>
Setup Program.cs
Pretty straight forward
using OpenCodeDev.Blazor.Foundation;
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// Add this line.
builder.Services.AddAllBFPlugins();
await builder.Build().RunAsync();
}
Setup _Imports.razor
Good to add these usings for quick access to the components.
@using OpenCodeDev.Blazor.Foundation.Components.Controls;
@using OpenCodeDev.Blazor.Foundation.Components.Containers;
@using OpenCodeDev.Blazor.Foundation.Components.General;
@using OpenCodeDev.Blazor.Foundation.Components.Navigation;
@using OpenCodeDev.Blazor.Foundation.Components.Media;
@using OpenCodeDev.Blazor.Foundation.Components.Typography;
@using OpenCodeDev.Blazor.Foundation.Components.Plugins.Reveal;
@using OpenCodeDev.Blazor.Foundation.Components.Plugins.InfiniteScrollHelper;
@using OpenCodeDev.Blazor.Foundation.Components.Plugins.MotionUI;
@using OpenCodeDev.Blazor.Foundation.Components.Plugins.StyleManager;
You’re all set to start build your WebAssembly app.