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#.
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 fl.blazor.foundation 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/fl.blazor.foundation/css/foundation.css" rel="stylesheet" />
Blazor Foundation uses free material design icons for its component… you can therefore add:
<link href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css" 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/fl.blazor.foundation/js/jquery.js"></script> <script src="/_content/fl.blazor.foundation/js/foundation.js"></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/fl.blazor.foundation/js/bf-menu-system.js"></script> <script src="/_content/fl.blazor.foundation/js/blazor-foundation.js"></script>
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).