Blazor #3 - How to Install Foundation into a Blazor Project

If you're working on a Blazor project you'll probably want to use a modern front-end framework, Blazor's starter site already comes shipped with Bootstrap, which is great, but there are other options out there like Bulma, Tailwind or Material.

In this blog post, we’ll walk through the steps to install and configure Foundation within your Blazor project, although the concepts will work well with other frameworks too. Foundation is known for its flexibility and robust grid system so offers the tools you need to create responsive, accessible, and visually appealing web applications.

What is Foundation?

Foundation is a mobile-first responsive front-end framework that provides a range of CSS and JavaScript components for creating websites quickly. It’s often seen as a competitor to Bootstrap, offering more flexibility and customization options.

Prerequisites

Before you start, make sure you have followed my previous post on How to work with SASS in Blazor

Step 1: Install Foundation via npm

First, we need to install Foundation’s CSS and JavaScript assets. To do this, we’ll use npm (Node Package Manager).

Initialise npm: If your Blazor project doesn't already have a package.json, initialise npm by running the following command in your project directory:

npm init -y

Install Foundation: Run the following command to install Foundation along with its required dependencies:

npm install foundation-sites --save

This will install Foundation’s assets into the node_modules folder. Now these are added there is nothing stopping us from running our blazor project so we can watch the changes in the full glory of 🔥 Hot reload.

dotnet watch

Step 2: Taking off the Bootstaps

Its always good to start with a clean slate, so lets start by removing all the bootstrap nonsense.

In the App.Razor file, remove <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />. Then delete the whole bootstrap directory from within wwwroot. In the new world, Foundation will be bundled in the SassCompiler generated css/styles.css,

Right now, you're site should look a bit like in the image below. What remains, is the from styles we migrated to Sass in the last post. Lets clear all of that too.

Delete the following scss files, as they are no longer needed

• /Styles/Components/Layout/_mainLayout.scss
• /Styles/Components/Layout/_navMenu.scss
• /Styles/Components/_blazor.scss

And empty the contents of the following, we may need these later

• /Styles/_components.scss
• /Styles/_mixins.scss
• /Styles/_variables.scss

Finally, create a new file /Styles/Components/_blazor.scss with the following styles; adding the @import in /Styles/_components.scss

#blazor-error-ui {
    background: #ffffe0;
    bottom: 0;
    display: none;
    left: 0;
    padding: 1rem;
    position: fixed;
    width: 100%;
    z-index: 1000;

    .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
}

Now, you're site should look even more basic

Step 3: Add Foundation the to the styles.scss

Add a new scss file in /Styles/Components/ called _foundation.scss, and import it the/Styles/_components.scss

@import 'Components/blazor-error';
@import 'Components/foundation';

Now import the the foundation Sass from the node-modules that was installed in Step 1, with Foundation, you also need to initialise the styles with @include foundation-everything;; or nothing would show.

@import "../node_modules/foundation-sites/scss/foundation.scss";
@include foundation-everything;

Note: Each Foundation component has an export mixin which prints out the CSS for that component. For simplicity I'm including everything, but in a production site, you can pick and choose what you need. See the Adjusting CSS Output documentation

Now your website should be running on Foundation, and look a little better (well, the fonts and colours anyhow)

Wait, I'm getting the following error

I got stuck on this for a while, and almost decided to go for another framework because of it. It turns out that the color.channel() Scss function is only included in newer version of the AspNetCore.SassCompiler nuget package, upgrade to the newest release and you'll be fine.

Step 4: Start adding some Foundation components

Now that you have Foundation installed, you can start using its components in your Blazor project. Here are a few examples to get you started:

The Top Bar

The Top Bar is a responsive navigation bar that adapts to different screen sizes. It’s a great way to create a consistent navigation experience across your site.

Create a new file /Components/TopBar.razor and add the following code:

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="dropdown menu">
      <li class="menu-text">Fresh Caffeine - Blazor Demo</li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li>
        <NavLink href="" Match="NavLinkMatch.All">
          Home
        </NavLink>
      </li>
      <li>
        <NavLink href="counter">
          Counter
        </NavLink>
      </li>
      <li>
        <NavLink href="weather">
          Weather
        </NavLink>
      </li>
    </ul>
  </div>
</div>

Then, update your MainLayout.razor file with the following:

@inherits LayoutComponentBase

<TopBar />

<main class="grid-container">
    @Body
</main>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">&times;</a>
</div>

• <TopBar /> is a new component that we created in the previous step. It will render the Foundation Top Bar in your Blazor project.
• The <main> tag is wrapped in a grid-container class, which is a Foundation class that creates a responsive grid layout.
• The <div id="blazor-error-ui"> is the error message that appears when there’s an unhandled error in your Blazor project. We’re keeping it here for consistency with the default Blazor template.

Now, when you run your Blazor project, you should see the Foundation Top Bar in action.

Now all that's left to do is to delete the old navMenu component, and you're all set.

Conclusion

And that's it! You've successfully installed Foundation into your Blazor project. You can now start using Foundation’s components to build responsive and visually appealing web applications.

Sample code

I've uploaded the code related to this post to a branch in my Blazor Demo repo in GitHub.