Menu

Foundation for ASP.NET MVC

Responsive HTML, CSS and JavaScript, neatly packaged for fast installation

About Foundation for MVC

Created by the design team at Zurb, Foundation is "The most advanced responsive front-end framework in the world.". Foundation jump starts front end development by providing a flexible grid and easy to style elements. Foundation's styles are ideal for rapid prototyping and are easily modified. A port of Foundation is available for ASP.NET MVC (3 - 5) via NuGet.

The grid

Foundation's fluid grid system makes short work of producing stellar layouts. The grid is flexible, nestable and include additional mobile layout classes. With Foundation, layout possiblities are endless.

UI Components

Foundation includes many common UI elemnts such as: tabs, buttons, pagnation, forms and more. Each element requires minimal effort to create a custom appearance.

JavaScripts

Included jQuery plugins power more advanced components like: image sliders, modal dialogs, and galleries. Each component is designed to work on any browser size.

Versions

Foundation 5

CSS

About Foundation 5

Foundation 5 is the next evolution in responsive design. Foundation 5 will promote building a mobile first experience.

Compatibility information

MVC: Version 4 and above

Browser support: This version is not recomended for IE8 and below. For a complete compatibility matrix please refer to the official Foundation website.

Getting started

This package will replace the default MVC layout, and styles.
  1. Install the NuGet package

    Run the following command from the Package manager console.

    PM> Install-Package Foundation5.MVC

    Note: This package is now a one click install, no additional setup is required.

  2. You are now ready to begin building your MVC project using Foundation.

Documentation

There is no MVC specific documentation available at this time.

For details on how to use Foundation please visit the official Foundation documentation website.

Learn more about Foundation from the resources section

Sass

About Foundation 5 with Sass

Foundation 5 is the next evolution in responsive design. Foundation 5 promotes a mobile first development experience.

Now with Sass

The Foundation 5 Sass NuGet Package was designed for developers who would like to utilize the Sass precompiler in their project. Take complete control over your projects style and layout using Foundations library of Sass mixins.

Note: This package requires Sass (Compass is optional) for integrating Sass in your MVC project. For Compass and Sass support in Visual Studio see: Web Workbench

Compatibility information

MVC: Version 4 and above

Browser support: This version is not recomended for IE8 and below. For a complete compatibility matrix please refer to the official Foundation website.

Getting started

  1. Install the NuGet package

    Run the following command from the Package manager console.

    PM> Install-Package Foundation5.MVC.Sass

    Note: The instructions below are included in the readme file that ships with the NuGet package.

  2. Configure your project

    Foundation can be used either with Sass or Sass with compass. The Foundation Nuget package installs Foundation to the ~/sass folder by default.

    1a. Configure your Sass output folder Open up the Web Workbench Settings for your project (select the project and use the right click context menu, or the Mindscape menu) you can set the Output Folder for your SCSS file and specify where the .css and/or .min.css will be generated.

    1b. Create a Compass project (Instructions using Web Workbench) http://www.mindscapehq.com/blog/index.php/2012/10/04/working-with-compass-web-workbench-to-create-button-sprites-within-visual-studio/ If you are using Web Workbench, you must create a Compass project, otherwise Web Workbench will not save the compiled CSS to the correct location.

    Open the /config.rb and change the output directory from stylesheets to Content #Match MVC conventions css_dir = "Content"

    If desired remove Compass default files ie.scss, screen.scss, print.scss

  3. Replace the Remove the Bootstrap theme

    Remove the default Bootstrap theme:

    From the package manager console run PM> Uninstall-Package Bootstrap

    Sass will replace the default style ~/Content/Site.css This WILL BE OVERWRITTEN each time Sass compiles

    Open and save ~/sass/Site.scss (SASS) to generate ~/Content/Site.css (CSS)

  4. You are now ready to begin building your MVC project using Foundation.

Documentation

There is no MVC specific documentation available at this time.

For details on how to use Foundation please visit the official Foundation documentation website.

Learn more about Foundation from the resources section

Foundation 4

CSS

About Foundation 4

Foundation 4 is the next evolution in responsive design. Foundation 4 will promote building a mobile first experience.

Compatibility information

MVC: Version 4 and above

Browser support: This version is not recomended for IE8 and below, however it can be adapted for IE8 by adding additional styles. For a complete compatibility matrix please refer to the official Foundation website.

Getting started

  1. Install the NuGet package

    Run the following command from the Package manager console.

    PM> Install-Package Foundation4.MVC4

    Note: The instructions below are included in the readme file that ships with the NuGet package.

  2. Update the Layout

    Open the /Views/_ViewStart.cshtml Change the Layout to _Foundation.cshtml like the example below:

    @{
    //This is the default MVC template
    //Layout = "~/Views/Shared/_Layout.cshtml";

    //This is the Foundation MVC template
    Layout = "~/Views/Shared/_Foundation.cshtml";
    }
  3. Remove the default theme

    Once the ViewStart has been updated. Replace the default Index.cshtml:

    Rename ~/Views/Home/Index.cshtml to Index.cshtml.exclude (or delete the file)
    Rename ~/Views/Home/Foundation_Index.cshtml to Index.cshtml

    Replace the default style:

    Rename ~/Content/Site.css to Site.css.exclude (or delete the file)

  4. Automatic Bundling and Minification

    Open the /App_Start/BundleConfig.cs

    Add the following bundles:

    #region Foundation Bundles
    //If your project requires jQuery, you may remove the zepto bundle
    bundles.Add(new ScriptBundle("~/bundles/zepto").Include(
    "~/Scripts/zepto.js"));

    bundles.Add(new StyleBundle("~/Content/foundation/css").Include(
    "~/Content/foundation/foundation.css",
    "~/Content/foundation/foundation.mvc.css",
    "~/Content/foundation/app.css"));

    bundles.Add(new ScriptBundle("~/bundles/foundation").Include(
    "~/Scripts/foundation/foundation.js",
    "~/Scripts/foundation/foundation.*",
    "~/Scripts/foundation/app.js"));
    #endregion
  5. You are now ready to begin building your MVC project using Foundation.

Documentation

There is no MVC specific documentation available at this time.

For details on how to use Foundation please visit the official Foundation documentation website.

Learn more about Foundation from the resources section

Sass

About Foundation 4 with Sass

Foundation 4 is the next evolution in responsive design. Foundation 4 will promote building a mobile first experience.

Now with Sass

The Foundation 4 Sass NuGet Package was designed for developers who would like to utilize the Sass precompiler in their project. Take complete control over your projects style and layout using Foundations library of Sass mixins.

Note: This package requires Sass (Compass is optional) for integrating Sass in your MVC project. For Compass and Sass support in Visual Studio see: Web Workbench

Compatibility information

MVC: Version 4 and above

Browser support: This version is not recomended for IE8 and below, however it can be adapted for IE8 by adding additional styles. For a complete compatibility matrix please refer to the official Foundation website.

Getting started

  1. Install the NuGet package

    Run the following command from the Package manager console.

    PM> Install-Package Foundation4.MVC4.Sass

    Note: The instructions below are included in the readme file that ships with the NuGet package.

  2. Configure your project

    Foundation can be used either with Sass or Sass with compass. The Foundation Nuget package installs Foundation to the ~/sass folder by default.

    1a. Configure your Sass output folder

    Open up the Web Workbench Settings for your project (select the project and use the right click context menu, or the Mindscape menu) you can set the Output Folder for your SCSS file and specify where the .css and/or .min.css will be generated.

    1b. Create a Compass project

    (Instructions using Web Workbench) http://www.mindscapehq.com/blog/index.php/2012/10/04/working-with-compass-web-workbench-to-create-button-sprites-within-visual-studio/ **If you are using Web Workbench, you must create a Compass project, otherwise Web Workbench will not save the compiled CSS to the correct location.

    Open the /config.rb and change the output directory from "stylesheets" to "Content"
    #Match MVC conventions
    css_dir = "Content"

    If desired remove Compass default files ie.scss, screen.scss, print.scss

  3. Update the Layout

    Open the /Views/_ViewStart.cshtml Change the Layout to _Foundation.cshtml like the example below:

    @{
    //This is the default MVC template
    //Layout = "~/Views/Shared/_Layout.cshtml";

    //This is the Foundation MVC template
    Layout = "~/Views/Shared/_Foundation.cshtml";
    }
  4. Remove the default theme

    Once the ViewStart has been updated. Replace the default Index.cshtml:

    Rename ~/Views/Home/Index.cshtml to Index.cshtml.exclude (or delete the file)
    Rename ~/Views/Home/Foundation_Index.cshtml to Index.cshtml

    Replace the default style:

    Rename ~/Content/Site.css to Site.css.exclude (or delete the file)

  5. Automatic Bundling and Minification

    Open the /App_Start/BundleConfig.cs

    Add the following bundles:

    #region Foundation Bundles
    //If your project requires jQuery, you may remove the zepto bundle
    bundles.Add(new ScriptBundle("~/bundles/zepto").Include(
    "~/Scripts/zepto.js"));

    bundles.Add(new StyleBundle("~/Content/foundation/css").Include(
    "~/Content/foundation/foundation.css",
    "~/Content/foundation/foundation.mvc.css",
    "~/Content/foundation/app.css"));

    bundles.Add(new ScriptBundle("~/bundles/foundation").Include(
    "~/Scripts/foundation/foundation.js",
    "~/Scripts/foundation/foundation.*",
    "~/Scripts/foundation/app.js"));

    #endregion
  6. You are now ready to begin building your MVC project using Foundation.

Documentation

There is no MVC specific documentation available at this time.

For details on how to use Foundation please visit the official Foundation documentation website.

Learn more about Foundation from the resources section

Foundation 3

About Foundation 3

Foundation 3 provides a desktop first approach to mobile responsive design. This is a stable and feature complete version build of the framework.

Compatibility information

MVC: The MVC package for Foundation 3 was designed to work with MVC 4.

Browser support: This version is not recomended for IE7 and below. For a complete compatibility matrix please refer to the official Foundation website.

Getting started

  1. Install the NuGet package

    Run the following command from the Package manager console.

    PM> Install-Package Foundation3_MVC4

    Note: The instructions below are included in the readme file that ships with the NuGet package.

  2. Update the Layout

    Open the /Views/_ViewStart.cshtml Change the Layout to _Foundation.cshtml like the example below:

    @{
    //This is the default MVC template
    //Layout = "~/Views/Shared/_Layout.cshtml";

    //This is the Foundation MVC template
    Layout = "~/Views/Shared/_Foundation.cshtml";
    }
  3. Once the ViewStart has been updated. Replace the default Index.cshtml:

    Rename ~/Views/Home/Index.cshtml to Index.cshtml.exclude (or delete the file)
    Rename ~/Views/Home/Foundation_Index.cshtml to Index.cshtml

    Replace the default style:

    Rename ~/Content/Site.css to Site.css.exclude (or delete the file)

  4. Automatic Bundling and Minification

    Open the /App_Start/BundleConfig.cs

    Add the following bundles:

    #region Foundation Bundles
    bundles.Add(new StyleBundle("~/Content/foundation/css").Include(
    "~/Content/foundation/foundation.css",
    "~/Content/foundation/app.css"));
    bundles.Add(new ScriptBundle("~/bundles/foundation").Include(
    "~/Scripts/foundation/jquery.*",
    "~/Scripts/foundation/app.js"));
    #endregion
  5. You are now ready to begin building your MVC project using Foundation.

Documentation

There is no MVC specific documentation available at this time.

For details on how to use Foundation please visit the official Foundation documentation website.

Learn more about Foundation from the resources section

Foundation 2

About Foundation 2

Foundation 2 is the previous build of the framework. Foundation 2 is best for projects that require compatibility with older browsers.

Compatibility information

MVC: The MVC package for Foundation 2 was designed to work with MVC 3. It includes buidling and minification, which was not part of MVC3's core functionality.

Browser support: This version is not recomended for IE6 and below. For a complete compatibility matrix please refer to the official Foundation website.

Getting started

  1. Install the NuGet package

    Run the following command from the Package manager console.

    PM> Install-Package Zurb_Foundation_MVC3

    Note: The instructions below are included in the readme file that ships with the NuGet package.

  2. Update the Layout

    Open the /Views/_ViewStart.cshtml

    Change the Layout to _Foundation.cshtml like the example below:

    @{
    //This is the default MVC template
    //Layout = "~/Views/Shared/_Layout.cshtml";

    //This is the Foundation MVC template
    Layout = "~/Views/Shared/_Foundation.cshtml";
    }
  3. Remove the default theme

    Once the ViewStart has been updated. Replace the default Index.cshtml.

    Rename ~/Views/Home/Index.cshtml to Index.cshtml.exclude (or delete the file)
    Rename ~/Views/Home/Foundation_Index.cshtml to Index.cshtml
    Rename ~/Content/Site.css to Site.css.exclude (or delete the file)

  4. Automatic Bundling and Minification

    Bundling and minification is automatically set up for you. The App_Start folder a contains pre-configured bundling and minification bootstrapper.

  5. You are now ready to begin building your MVC project using Foundation.