Get Started

Getting Started with Blazor Foundation Latest version.

This project is a public package published by the company under MIT license and is the implementation of Zurb Foundation 6 for Blazor C#.

To help developers focus on C# and Blazor, we’ve assembled a easy to use package featuring Zurb Foundation 6 components’ script and style. Thus, the developer can expect to write less javascript to work with Zurb Foundation 6 and focus on writing C# and Blazor.

The package is set to be very flexible and extensively maintained by us. Therefore, expect to see many future updates, tutorial, documentation, videos and more!

That being said, let get started! Unleash the power of Zurb Foundation 6 in the comfort of C#!

First step is to install package.

Second step is to insert foundation.css or foundation.min.css inside the header of either index.html (blazor wasm) OR _host.cshtml (blazor server).

<link href="/_content/" rel="stylesheet" />

Blazor Foundation uses free material design icons for its component… you can therefore add:

<link href="" rel="stylesheet" />

Third step, in the same file you have to insert in the footer jquery.js and (foundation.js OR foundation.min.js)

<script src="/_content/"></script>
<script src="/_content/"></script>

Last step, if you want to the full advantage of Blazor Foundation Package insert in the footer, after foundation.js, bf-menu-system.js and blazor-foundation.js

<script src="/_content/"></script>
<script src="/_content/"></script>

blazor-foundation.js is allowing the blazor to automatically activate foundation component through javascript. Thus, you code more C# and less JS.

Note: if you do not include blazor-foundation.js, you still can use Blazor Components but, you’ll have to also create your own JS code to manage the component like standard Foundation.

Alright, now you have read to take advantage of Foundation Zurb powerful components and the power of C# (Blazor Server or Blazor WASM).