Using Foundation 6 on ASP.NET Core

ASP.NET Core opens the doors to new opportunities for ASP.NET developers through integration points in Bower, NPM, and Gulp. One perk of using common web development tools is that frameworks like Foundation can be installed directly from the vendor whereas before developers needed to rely on NuGet packages. In some instances, these were a repackaging of vendor assets and lagged behind official releases.

Let's take a look at how this has changed in ASP.NET Core by installing Foundation 6, a responsive front-end framework that is a capable alternative to Bootstrap. We'll get an idea of why Foundation has its advantages in the hands of an experienced developer and how to achieve complete customization. We'll also look at an example of matching the look and feel of Foundation components with themes in Kendo UI.

Note: If you're not familiar with the new project structure in ASP.NET Core you can get up to speed by downloading the free white paper ASP.NET Core Changes Ever Developer Should Know

Install Foundation with Bower

To install Foundation on our project we'll use the Bower package manager. Bower will fetch and install all of the necessary files for using Foundation in our project. Installing packages with Bower can be done via GUI, bower.json file, or the command line. For this article, we'll be using the bower.json method. To access the bower.json file we'll need to show hidden files in the project.

Inside the bower.json file, we'll remove the dependency for bootstrap and replace it with foundation-sites. Saving this change will prompt Bower to remove Bootstrap and install Foundation and its dependencies. An optional plugin for Foundation called Motion-ui can be added as well by the same process of adding motion-ui to bower.json.

At this point we could begin using the CSS version of Foundation, however one of Foundation's biggest strengths is it's robust library of Sass mixins that allow granular control of the CSS output. Using Sass, we can choose to only use Foundation's grid and add additional components as they are needed. By using this approach we can greatly reduce the amount of CSS that is deployed with the application. In addition, we gain access to hundreds of Sass variables used to control all aspects of Foundation such as: theme color, grid type (flex box or floats), fonts, and much more. We'll discuss how Foundation's Sass mixins are used later in the process, but first we'll need to setup a Sass compiler.

To enable Sass compilation in ASP.NET Core we'll need to add the gulp-sass compiler. This version of Sass easily integrates with Gulp, which is already available to the project. We'll install gulp-sass by opening the package.json file and adding gulp-sass under devDependencies. Saving the package.json file will prompt npm to install the package.

With gulp-sass installed, we'll need to configure a compile task.

Create a Gulp task

Setting up task for Foundation requires just a few extra steps than a default gulp-sass task. First add a reference to gulp-sass (sass = require("gulp-sass")). We'll need to add a few extra parameters to tell gulp-sass where the Foundation Sass files are located. Using the includePaths option, we'll pass in the Sass file locations for Foundation and Motion-ui. This will ensure that when Foundation's mixins are referenced in Sass files, the compiler will be able to locate them.

// where to find sass code
paths.sassSource = "./Scss/*.scss";

// where to output compiled CSS code
paths.cssOutput = paths.webroot + "css";

// where to find bower resources
paths.bower_components =  paths.webroot + "lib/"

gulp.task('sass', function () {
    gulp.src(paths.sassSource)
        .pipe(sass({
            includePaths: [
                paths.bower_components + 'foundation-sites/scss',
                paths.bower_components + 'motion-ui/src'
            ]
        }).on('error', sass.logError))
        .pipe(gulp.dest(paths.cssOutput));
});

Before the CSS is ready to compile, we'll need to create a master stylesheet and import Foundation's mixins. It may seem like quite a bit of work to get a CSS framework setup, but the extra effort leads to better maintainability over the life of the project.

We'll add a new Sass folder to the project's src folder. Inside we'll create a new file, for this example we'll use app.scss. We'll also need to copy Foundation's _settings.scss file from the install folder ./lib/foundation-sites/scss to our Sass folder. Making a copy of the settings file will ensure that our settings are not overwritten by Bower when the package is updated.

In the app.scss file, we'll import foundation and settings. From here Foundation's mixins are used to customize which components are included in the compilation process. The entire Foundation framework can be included with a single mixin, foundation-everything, using this mixin we can also set the grid type (flexbox or float) by passing a $flex: true parameter.

@charset 'utf-8';
@import 'foundation';
@import "settings";

@include foundation-everything;
// @include foundation-everything($flex: true);

For a more advanced setup, we can omit foundation-everything and instead specify each framework component independently, producing a tailored version of the Foundation framework per our specifications.

All of the available mixins can be found in the foundation-sites-template project on GitHub. Using this method of configuration if we just want Foundation's grid we would only include foundation-grid and no additional CSS would be rendered by the compiler. Having an ad hoc configuration like this allows us to scale Foundation as we see fit, and reduces the "bloat" developers are typically concerned about when using a CSS framework.

Once the once the desired configurations are made, we can run the sass task using Gulp, which will create the app.css file. With the file created we'll need to setup a site template to utilize the CSS we created.

Template

The _Layout.cshtml included in ASP.NET Core only needs a few changes to use Foundation. First, we'll need to update the CSS references to use the app.css file containing our customized version of Foundation.

<environment names="Development">
    <link rel="stylesheet" href="~/css/app.css" />
</environment>
<environment names="Staging,Production">
    <link rel="stylesheet" href="~/css/app.min.css" asp-append-version="true" />
</environment>

Next, we'll update the scripts section to include foundation.js in place of the bootstrap.js.

<environment names="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/foundation-sites/dist/foundation.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery">
    </script>
    <script src="~/lib/foundation-sites/dist/foundation.js"></script>
    <script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>

A complete version of the _Layout.cshtml file can be downloaded here.

With the CSS and JavaScript references in place, Foundation is installed and ready for development. To further enhance the project, take time to fine tune which Foundation components are included in the project and take advantage of the robust settings file we copied to the project.

Using Settings

In Foundation the settings file is used to alter the overall look of the application. Variables such as fonts and colors are defined in the settings file and referenced throughout the application. This makes the settings file a single point of control for developing a visual theme.

Although Foundation has a very minimal appearance, adjusting just a few settings can transform the basic look to match third party themes or controls. In this example Kendo UI's responsive gantt control is used along with some UI elements from Foundaiton. The Nova theme for Kendo UI uses vibrant colors and flat UI components, which makes it a great candidate for pairing with Foundation. Let's use the settings file to match Foundation's UI components with the Kendo UI Nova theme.

$foundation-palette: (
  primary: #ff4350, // matched to Kendo UI's Nova theme primary color
  secondary: #24c6db, // matched to Kendo UI's Nova theme secondary color
  ...
);

$dark-gray: #32364c; // matched to Kendo UI's Nova theme dark color
$topbar-background: $dark-gray; // make the topbar component use the dark-gray color

Setting a single value such as primary creates a palette of color variables. This is done by lightening or darkening the specified color in intervals. Just a few changes to the color settings can completely transform all of the components.

Selecting theme colors is only a fraction of what the settings are capable of, application width, fonts, and even break points are included as settings.

But Wait There's More

The customization discussed thus far are only the tip of the iceberg with Foundation. The framework can be used with even greater granularity by working directly with Foundation's semantic mixins. Working with semantic mixins gives you the ability to create custom named components from the same Sass mixins used to build Foundation's components. To see examples of how semantic mixins work, visit the "Building Semantically" section of each component's page in the documentation. With semantic mixins you are 100% in control of the framework.

Conclusion

Getting Foundation installed and configured in ASP.NET Core may take a few additional steps compared to Bootstrap, but the trade offs are in having complete control over the CSS. Foundation's strong suit is it's robust customization via configuration, mixins, and settings. Foundation complements front-end development much like the flexibility of ASP.NET Core's server side architecture supports back-end development.

Related Resources

• [Whitepaper] The Anatomy of Responsive ASP.NET Apps
• [Blog Post] Why Bootstrap 4 Means Sass Has Won
• [Whitepaper] ASP.NET Core MVC Changes Every Developer Should Know
• [Blog Post] CSS Preprocessing with Visual Studio
• [Podcast] Is Sass Right for Your CSS?
• [Whitepaper] The Command Line: Reinvented for Modern Developers