Docs v1.6.0  /  ASP.NET Core MVC HTML5 Angular Vue.js React Laravel Laravel + Vue.js Rails Rails + Turbolinks ASP.NET Core ASP.NET MVC ASP.NET MVC + Webpack
OTHER
Settings panel Layout helpers

Instructions can vary depending on whatever you use theme settings panel or not. Please select the appropriate version.

aspnet-core-mvc-starter directory structure

aspnet-core-mvc-starter
AspnetCoreMvcStarter
Controllers
Models
Properties
Views
Shared
Layouts
Partials
_LayoutFooter.cshtml
_LayoutNavbar.cshtml
_LayoutSidenav.cshtml
_Application.cshtml
Main layout
_Layout1.cshtml
_Layout1Flex.cshtml
...
...
_ViewStart.cshtml
...
wwwroot
css
Application stylesheets
site.scss
js
Application javascripts
site.js
vendor
Appwork's sources
css
CSS sources
_appwork
Appwork includes
_custom-variables
Custom variables
_theme
Theme includes
_uikit
UIKit includes
pages
Page styles
rtl
Styles with RTL support enabled
appwork.scss
appwork-material.scss
appwork-dark.scss
...
fonts
Iconic fonts
fontawesome.dist.css
ionicons.dist.css
...
js
Javascripts
bootstrap.js
dropdown-hover.js
...
libs
Third-party libraries
animate-css
autosize
block-ui
...
favicon.ico
Gulpfile.js
package.json
build-config.js
webpack.config.js
...

Assets compilation

ASP.NET Core project is integrated with Webpack and Gulp (see available tasks):

  • All .scss files within wwwroot/ directory are processed by node-sass. Output files will have the next filename format: {filename}.dist.css. Example: 

    wwwroot/css/site.scss
    body {
  background: #fff;
}
    AspnetCoreMvcStarter/Views/Shared/Layouts/_Application.cshtml
    <environment include="Development"><link rel="stylesheet" href="~/css/site.dist.css" /></environment>
<environment exclude="Development"><link rel="stylesheet" href="~/css/site.dist.css" asp-append-version="true" /></environment>

  • All .js files within wwwroot/ directory are processed by Webpack. Output files will have the next filename format: {filename}.dist.js. Example: 

    wwwroot/js/site.js
    $(() => {
  alert('Content loaded!')
})
    AspnetCoreMvcStarter/Views/Shared/Layouts/_Application.cshtml
    <environment include="Development"><script src="~/js/site.dist.js"></script></environment>
<environment exclude="Development"><script src="~/js/site.dist.js" asp-append-version="true"></script></environment>
If you don't want to process a file by node-sass or Webpack, add _ prefix to the file name. For example, _partial.scss, _partial.js

Third-party plugins

The starter project by default includes all third-party plugins.
Optionally you can remove unwanted plugins to reduce output assets size and compile time:

  1. Remove unwanted packages from the dependencies section in the AspnetCoreMvcStarter/package.json file.
  2. Remove related directories within the AspnetCoreMvcStarter/wwwroot/vendor/libs directory.
  3. Remove related @imports and @includes in the AspnetCoreMvcStarter/wwwroot/vendor/css/_theme/_libs.scss file.

For example, if you want to exclude plyr plugin, you will need to:

  1. Remove plyr dependency in the AspnetCoreMvcStarter/package.json file.
  2. Remove the AspnetCoreMvcStarter/wwwroot/vendor/libs/plyr directory.
  3. Remove @import "../../libs/plyr/mixins"; and @include plyr-theme($background, $color); lines in the AspnetCoreMvcStarter/wwwroot/vendor/css/_theme/_libs.scss file.

Installation

Windows
  1. Download and install latest Node.js LTS: https://nodejs.org/en/.
  2. Download and install Git: https://git-scm.com/downloads.
  3. Logout from the system and login again.
  4. Launch cmd.exe as an administrator and run command npm install --add-python-to-path='true' --global --production windows-build-tools.

  5. If you're using Visual Studio:

    1. Make your Node.js install prioritized. You can do it in two ways:

      • Open Tools -> Options -> Projects and solutions -> Web Package Management. Move $(PATH) string to the top of the list using the arrows.
      • Open Tools -> Options -> Projects and solutions -> Web Package Management. Click Add button and paste path to node.exe directory. Then move added path to the top of the list using the arrows.
    2. Open the solution.
    3. In the solution explorer window right click on package.json and select Restore Packages. Wait while packages restored.
    4. Open tasks window: View -> Other Windows -> Task Runner Explorer.
    5. Run watch task. After installing this task will be executed automatically after the project opened.
    6. Build -> Build AspnetCoreMvcStarter.

    If you're using Visual Studio Code:

    1. Install .NET Core SDK: https://dotnet.microsoft.com/download.
    2. Install C# and npm VS Code extensions.
    3. Open AspnetCoreMvcStarter folder in editor and wait while dependencies installed.
    4. Restore unresolved dependencies.
    5. Install required assets to build and debug.
    6. Right click on package.json and select Install Dependencies.
    7. Press Ctrl + Shift + p and select Tasks: Run Task -> Build.
    8. To recompile assets on save, press Ctrl + Shift + p and select npm: Run Script -> watch.
Ubuntu (Visual Studio Code)
  1. Update system: sudo apt-get update && sudo apt-get upgrade.
  2. Install curl: sudo apt-get install curl.
  3. Install latest Node.js LTS and build tools: https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions-enterprise-linux-fedora-and-snap-packages.
  4. Install Git: https://git-scm.com/download/linux.
  5. Install Gulp globally: sudo npm i -g gulp.
  6. Install .NET Core SDK: https://dotnet.microsoft.com/download.
  7. Install C# and npm VS Code extensions.
  8. Open AspnetCoreStarter folder in editor and wait while dependencies installed.
  9. Restore unresolved dependencies.
  10. Install required assets to build and debug.
  11. Right click on package.json and select Install Dependencies.
  12. Press Ctrl + Shift + p and select Tasks: Run Task -> Build.
  13. To recompile assets on save, press Ctrl + Shift + p and select npm: Run Script -> watch.
Mac OS X (Visual Studio Code)
  1. Install Xcode from App Store. After installing, launch the Xcode, accept the license agreement and wait while components installed.
  2. Download and install latest Node.js LTS: https://nodejs.org/en/.
  3. Download and install Git: https://git-scm.com/downloads.
  4. Install Gulp globally: sudo npm i -g gulp.
  5. Install .NET Core SDK: https://dotnet.microsoft.com/download.
  6. Install C# and npm VS Code extensions.
  7. Open AspnetCoreStarter folder in editor and wait while dependencies installed.
  8. Restore unresolved dependencies.
  9. Install required assets to build and debug.
  10. Right click on package.json and select Install Dependencies.
  11. Press Cmd + Shift + p and select Tasks: Run Task -> Build.
  12. To recompile assets on save, press Cmd + Shift + p and select npm: Run Script -> watch.

Page structure

Instead of configuring the layout manually, you can use the Starter template generator. It will dramatically simplify the initial setup.

Main layout

AspnetCoreMvcStarter/Views/Shared/Layouts/_Application.cshtml
<!DOCTYPE html>
<html lang="en" class="light-style">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

    <title>@ViewData["Title"] - Asp.Net Core MVC Starter</title>

    <!-- Main font -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet" crossorigin="anonymous" />

    <!-- Icons. Uncomment required icon fonts -->
    <environment include="Development">
        <!-- <link rel="stylesheet" href="~/vendor/fonts/fontawesome.dist.css" /> -->
        <link rel="stylesheet" href="~/vendor/fonts/ionicons.dist.css" />
        <!-- <link rel="stylesheet" href="~/vendor/fonts/linearicons.dist.css" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/open-iconic.dist.css" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/pe-icon-7-stroke.dist.css" /> -->
    </environment>
    <environment exclude="Development">
        <!-- <link rel="stylesheet" href="~/vendor/fonts/fontawesome.dist.css" asp-append-version="true" /> -->
        <link rel="stylesheet" href="~/vendor/fonts/ionicons.dist.css" asp-append-version="true" />
        <!-- <link rel="stylesheet" href="~/vendor/fonts/linearicons.dist.css" asp-append-version="true" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/open-iconic.dist.css" asp-append-version="true" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/pe-icon-7-stroke.dist.css" asp-append-version="true" /> -->
    </environment>

    <!-- Core stylesheets -->
    <environment include="Development">
        <link rel="stylesheet" href="~/vendor/css/bootstrap.dist.css" />
        <link rel="stylesheet" href="~/vendor/css/appwork.dist.css" />
        <link rel="stylesheet" href="~/vendor/css/theme-corporate.dist.css" />
        <link rel="stylesheet" href="~/vendor/css/colors.dist.css" />
        <link rel="stylesheet" href="~/vendor/css/uikit.dist.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="~/vendor/css/bootstrap.dist.css" asp-append-version="true" />
        <link rel="stylesheet" href="~/vendor/css/appwork.dist.css" asp-append-version="true" />
        <link rel="stylesheet" href="~/vendor/css/theme-corporate.dist.css" asp-append-version="true" />
        <link rel="stylesheet" href="~/vendor/css/colors.dist.css" asp-append-version="true" />
        <link rel="stylesheet" href="~/vendor/css/uikit.dist.css" asp-append-version="true" />
    </environment>

    <!-- Load polyfills -->
    <environment include="Development"><script src="~/vendor/js/polyfills.dist.js"></script></environment>
    <environment exclude="Development"><script src="~/vendor/js/polyfills.dist.js" asp-append-version="true"></script></environment>
    <script>document['documentMode']===10&&document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=Intl.~locale.en"><\/script>')</script>

    <!-- Layout helpers -->
    <environment include="Development"><script src="~/vendor/js/layout-helpers.dist.js"></script></environment>
    <environment exclude="Development"><script src="~/vendor/js/layout-helpers.dist.js" asp-append-version="true"></script></environment>

    <!-- Libs -->
    <!-- `perfect-scrollbar` library required by SideNav plugin -->
    <environment include="Development"><link rel="stylesheet" href="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.css" /></environment>
    <environment exclude="Development"><link rel="stylesheet" href="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.css" asp-append-version="true" /></environment>

    <!-- Application stylesheets -->
    <environment include="Development"><link rel="stylesheet" href="~/css/site.dist.css" /></environment>
    <environment exclude="Development"><link rel="stylesheet" href="~/css/site.dist.css" asp-append-version="true" /></environment>

    @RenderSection("Styles", required: false)
</head>
<body>

    @RenderBody()

    <!-- Core scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" crossorigin="anonymous"></script>

    <!-- Uncomment the following line to enable unobtrusive validation -->
    <!-- @await Html.PartialAsync("_ValidationScriptsPartial") -->

    <environment include="Development">
        <script src="~/vendor/libs/popper/popper.dist.js"></script>
        <script src="~/vendor/js/bootstrap.dist.js"></script>
        <script src="~/vendor/js/sidenav.dist.js"></script>

        <!-- Libs -->
        <!-- `perfect-scrollbar` library required by SideNav plugin -->
        <script src="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.js"></script>

        <!-- Application javascripts -->
        <script src="~/js/site.dist.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="~/vendor/libs/popper/popper.dist.js" asp-append-version="true"></script>
        <script src="~/vendor/js/bootstrap.dist.js" asp-append-version="true"></script>
        <script src="~/vendor/js/sidenav.dist.js" asp-append-version="true"></script>

        <!-- Libs -->
        <!-- `perfect-scrollbar` library required by SideNav plugin -->
        <script src="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.js" asp-append-version="true"></script>

        <!-- Application javascripts -->
        <script src="~/js/site.dist.js" asp-append-version="true"></script>
    </environment>

    @RenderSection("Scripts", required: false)
</body>
</html>
<!DOCTYPE html>
<html lang="en" class="light-style">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

    <title>@ViewData["Title"] - Asp.Net Core MVC Starter</title>

    <!-- Main font -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet" crossorigin="anonymous" />

    <!-- Icons. Uncomment required icon fonts -->
    <environment include="Development">
        <!-- <link rel="stylesheet" href="~/vendor/fonts/fontawesome.dist.css" /> -->
        <link rel="stylesheet" href="~/vendor/fonts/ionicons.dist.css" />
        <!-- <link rel="stylesheet" href="~/vendor/fonts/linearicons.dist.css" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/open-iconic.dist.css" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/pe-icon-7-stroke.dist.css" /> -->
    </environment>
    <environment exclude="Development">
        <!-- <link rel="stylesheet" href="~/vendor/fonts/fontawesome.dist.css" asp-append-version="true" /> -->
        <link rel="stylesheet" href="~/vendor/fonts/ionicons.dist.css" asp-append-version="true" />
        <!-- <link rel="stylesheet" href="~/vendor/fonts/linearicons.dist.css" asp-append-version="true" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/open-iconic.dist.css" asp-append-version="true" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/pe-icon-7-stroke.dist.css" asp-append-version="true" /> -->
    </environment>

    <!-- Core stylesheets -->
    <environment include="Development">
        <link rel="stylesheet" href="~/vendor/css/bootstrap.dist.css" class="theme-settings-bootstrap-css" />
        <link rel="stylesheet" href="~/vendor/css/appwork.dist.css" class="theme-settings-appwork-css" />
        <link rel="stylesheet" href="~/vendor/css/theme-corporate.dist.css" class="theme-settings-theme-css" />
        <link rel="stylesheet" href="~/vendor/css/colors.dist.css" class="theme-settings-colors-css" />
        <link rel="stylesheet" href="~/vendor/css/uikit.dist.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="~/vendor/css/bootstrap.dist.css" class="theme-settings-bootstrap-css" />
        <link rel="stylesheet" href="~/vendor/css/appwork.dist.css" class="theme-settings-appwork-css" />
        <link rel="stylesheet" href="~/vendor/css/theme-corporate.dist.css" class="theme-settings-theme-css" />
        <link rel="stylesheet" href="~/vendor/css/colors.dist.css" class="theme-settings-colors-css" />
        <link rel="stylesheet" href="~/vendor/css/uikit.dist.css" asp-append-version="true" />
    </environment>

    <!-- Load polyfills -->
    <environment include="Development"><script src="~/vendor/js/polyfills.dist.js"></script></environment>
    <environment exclude="Development"><script src="~/vendor/js/polyfills.dist.js" asp-append-version="true"></script></environment>
    <script>document['documentMode']===10&&document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=Intl.~locale.en"><\/script>')</script>

    <!-- Layout helpers -->
    <environment include="Development"><script src="~/vendor/js/layout-helpers.dist.js"></script></environment>
    <environment exclude="Development"><script src="~/vendor/js/layout-helpers.dist.js" asp-append-version="true"></script></environment>

    <!-- Theme settings -->
    <environment include="Development"><script src="~/vendor/js/theme-settings.dist.js"></script></environment>
    <environment exclude="Development"><script src="~/vendor/js/theme-settings.dist.js" asp-append-version="true"></script></environment>
    <script>
        // Use settings panel generator to configure the plugin
        window.themeSettings = new ThemeSettings({
            cssPath: '',
            themesPath: '',
            pathResolver: function (path) {
                var resolvedPaths = {
                    @foreach (string name in new string[] { "bootstrap", "appwork", "colors" })
                    {
                        <text>
                            '@(name).css': '@Url.Content("~/vendor/css/" + name + ".dist.css")',
                            '@(name)-material.css': '@Url.Content("~/vendor/css/" + name + "-material.dist.css")',
                            '@(name)-dark.css': '@Url.Content("~/vendor/css/" + name + "-dark.dist.css")',
                        </text>
                    }

                    // UI Kit
                    'uikit.css': '@Url.Content("~/vendor/css/uikit.dist.css"))',

                    @foreach (string name in new string[] { "air", "corporate", "cotton", "gradient", "paper", "shadow", "soft", "sunrise", "twitlight", "vibrant" })
                    {
                        <text>
                            'theme-@(name).css': '@Url.Content("~/vendor/css/theme-" + name + ".dist.css")',
                            'theme-@(name)-material.css': '@Url.Content("~/vendor/css/theme-" + name + "-material.dist.css")',
                            'theme-@(name)-dark.css': '@Url.Content("~/vendor/css/theme-" + name + "-dark.dist.css")',
                        </text>
                    }
                };

                return resolvedPaths[path] || path;
            }
        });
    </script>

    <!-- Libs -->
    <!-- `perfect-scrollbar` library required by SideNav plugin -->
    <environment include="Development"><link rel="stylesheet" href="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.css" /></environment>
    <environment exclude="Development"><link rel="stylesheet" href="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.css" asp-append-version="true" /></environment>

    <!-- Application stylesheets -->
    <environment include="Development"><link rel="stylesheet" href="~/css/site.dist.css" /></environment>
    <environment exclude="Development"><link rel="stylesheet" href="~/css/site.dist.css" asp-append-version="true" /></environment>

    @RenderSection("Styles", required: false)
</head>
<body>

    @RenderBody()

    <!-- Core scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" crossorigin="anonymous"></script>

    <!-- Uncomment the following line to enable unobtrusive validation -->
    <!-- @await Html.PartialAsync("_ValidationScriptsPartial") -->

    <environment include="Development">
        <script src="~/vendor/libs/popper/popper.dist.js"></script>
        <script src="~/vendor/js/bootstrap.dist.js"></script>
        <script src="~/vendor/js/sidenav.dist.js"></script>

        <!-- Libs -->
        <!-- `perfect-scrollbar` library required by SideNav plugin -->
        <script src="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.js"></script>

        <!-- Application javascripts -->
        <script src="~/js/site.dist.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="~/vendor/libs/popper/popper.dist.js" asp-append-version="true"></script>
        <script src="~/vendor/js/bootstrap.dist.js" asp-append-version="true"></script>
        <script src="~/vendor/js/sidenav.dist.js" asp-append-version="true"></script>

        <!-- Libs -->
        <!-- `perfect-scrollbar` library required by SideNav plugin -->
        <script src="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.js" asp-append-version="true"></script>

        <!-- Application javascripts -->
        <script src="~/js/site.dist.js" asp-append-version="true"></script>
    </environment>

    @RenderSection("Scripts", required: false)
</body>
</html>

Layouts

You can set the layout in two ways:

  1. Layout for the entire app - set layout property in the AspnetCoreMvcStarter/Views/_ViewStart.cshtml file.
  2. Layout for the specified view - set layout property in the view's .cshtml file.

You can find navbar, sidenav and footer templates in the AspnetCoreMvcStarter/Views/Shared/Layouts/Partials directory. 

AspnetCoreMvcStarter/Views/_ViewStart.cshtml
@{
    Layout = "Layouts/_Layout1";
}
AspnetCoreMvcStarter/Views/_ViewStart.cshtml
@{
    Layout = "Layouts/_Layout1Flex";
}
AspnetCoreMvcStarter/Views/_ViewStart.cshtml
@{
    Layout = "Layouts/_Layout2";
}
AspnetCoreMvcStarter/Views/_ViewStart.cshtml
@{
    Layout = "Layouts/_Layout2Flex";
}
AspnetCoreMvcStarter/Views/_ViewStart.cshtml
@{
    Layout = "Layouts/_LayoutWithoutNavbar";
}
AspnetCoreMvcStarter/Views/_ViewStart.cshtml
@{
    Layout = "Layouts/_LayoutWithoutNavbarFlex";
}
AspnetCoreMvcStarter/Views/_ViewStart.cshtml
@{
    Layout = "Layouts/_LayoutWithoutSidenav";
}
AspnetCoreMvcStarter/Views/_ViewStart.cshtml
@{
    Layout = "Layouts/_LayoutHorizontalSidenav";
}
AspnetCoreMvcStarter/Views/_ViewStart.cshtml
@{
    Layout = "Layouts/_LayoutBlank";
}

Theming

To enable a theme just include the required theme stylesheet from the ~/vendor/css/ path. 

AspnetCoreMvcStarter/Views/Shared/Layouts/_Application.cshtml
<!-- Core stylesheets -->
<environment include="Development">
    ...
    <link rel="stylesheet" href="~/vendor/css/theme-air.dist.css" />
    ...
</environment>
<environment exclude="Development">
    ...
    <link rel="stylesheet" href="~/vendor/css/theme-air.dist.css" asp-append-version="true" />
    ...
</environment>
<!-- Core stylesheets -->
<environment include="Development">
    ...
    <link rel="stylesheet" href="~/vendor/css/theme-air.dist.css" class="theme-settings-theme-css" />
    ...
</environment>
<environment exclude="Development">
    ...
    <link rel="stylesheet" href="~/vendor/css/theme-air.dist.css" class="theme-settings-theme-css" />
    ...
</environment>

Material styling

To enable material styling you need to:

  1. Set $enable-material-style variable to true.

    AspnetCoreMvcStarter/wwwroot/vendor/css/_custom-variables/_features.scss
    ...
$enable-material-style: true;
...

  2. Set material-style class on the <html> element instead of light-style.

    AspnetCoreMvcStarter/Views/Shared/Layouts/_Application.cshtml
    <html class="material-style">

  3. Add -material suffix to bootstrap.dist.css, appwork.dist.css, theme-*.dist.css and colors.dist.css stylesheets.

    AspnetCoreMvcStarter/Views/Shared/Layouts/_Application.cshtml
    <!-- Core stylesheets -->
<environment include="Development">
    <link rel="stylesheet" href="~/vendor/css/bootstrap-material.dist.css" />
    <link rel="stylesheet" href="~/vendor/css/appwork-material.dist.css" />
    <link rel="stylesheet" href="~/vendor/css/theme-corporate-material.dist.css" />
    <link rel="stylesheet" href="~/vendor/css/colors-material.dist.css" />
    ...
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="~/vendor/css/bootstrap-material.dist.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/vendor/css/appwork-material.dist.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/vendor/css/theme-corporate-material.dist.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/vendor/css/colors-material.dist.css" asp-append-version="true" />
    ...
</environment>
    <!-- Core stylesheets -->
<environment include="Development">
    <link rel="stylesheet" href="~/vendor/css/bootstrap-material.dist.css" class="theme-settings-bootstrap-css" />
    <link rel="stylesheet" href="~/vendor/css/appwork-material.dist.css" class="theme-settings-appwork-css" />
    <link rel="stylesheet" href="~/vendor/css/theme-corporate-material.dist.css" class="theme-settings-theme-css" />
    <link rel="stylesheet" href="~/vendor/css/colors-material.dist.css" class="theme-settings-colors-css" />
    ...
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="~/vendor/css/bootstrap-material.dist.css" class="theme-settings-bootstrap-css" />
    <link rel="stylesheet" href="~/vendor/css/appwork-material.dist.css" class="theme-settings-appwork-css" />
    <link rel="stylesheet" href="~/vendor/css/theme-corporate-material.dist.css" class="theme-settings-theme-css" />
    <link rel="stylesheet" href="~/vendor/css/colors-material.dist.css" class="theme-settings-colors-css" />
    ...
</environment>

  4. Optionally you can enable material ripple. Just append material-ripple.js script to the <head> section and call attachMaterialRippleOnLoad() function. 

    AspnetCoreMvcStarter/Views/Shared/Layouts/_Application.cshtml
    <environment include="Development"><script src="~/vendor/js/material-ripple.dist.js"></script></environment>
<environment exclude="Development"><script src="~/vendor/js/material-ripple.dist.js" asp-append-version="true"></script></environment>
<script>
  window.attachMaterialRippleOnLoad();
</script>

  5. Optionally you can enable material ripple. Just append material-ripple.dist.js script to the <head> section. 

    AspnetCoreMvcStarter/Views/Shared/Layouts/_Application.cshtml
    <environment include="Development"><script src="~/vendor/js/material-ripple.dist.js"></script></environment>
<environment exclude="Development"><script src="~/vendor/js/material-ripple.dist.js" asp-append-version="true"></script></environment>

Dark styling

To enable dark styling you need to:

  1. Set $enable-dark-style variable to true.

    AspnetCoreMvcStarter/wwwroot/vendor/css/_custom-variables/_features.scss
    ...
$enable-dark-style: true;
...

  2. Set dark-style class on the <html> element instead of light-style.

    AspnetCoreMvcStarter/Views/Shared/Layouts/_Application.cshtml
    <html class="dark-style">

  3. Add -dark suffix to bootstrap.dist.css, appwork.dist.css, theme-*.dist.css and colors.dist.css stylesheets.

    AspnetCoreMvcStarter/Views/Shared/Layouts/_Application.cshtml
    <!-- Core stylesheets -->
<environment include="Development">
    <link rel="stylesheet" href="~/vendor/css/bootstrap-dark.dist.css" />
    <link rel="stylesheet" href="~/vendor/css/appwork-dark.dist.css" />
    <link rel="stylesheet" href="~/vendor/css/theme-corporate-dark.dist.css" />
    <link rel="stylesheet" href="~/vendor/css/colors-dark.dist.css" />
    ...
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="~/vendor/css/bootstrap-dark.dist.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/vendor/css/appwork-dark.dist.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/vendor/css/theme-corporate-dark.dist.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/vendor/css/colors-dark.dist.css" asp-append-version="true" />
    ...
</environment>
    <!-- Core stylesheets -->
<environment include="Development">
    <link rel="stylesheet" href="~/vendor/css/bootstrap-dark.dist.css" class="theme-settings-bootstrap-css" />
    <link rel="stylesheet" href="~/vendor/css/appwork-dark.dist.css" class="theme-settings-appwork-css" />
    <link rel="stylesheet" href="~/vendor/css/theme-corporate-dark.dist.css" class="theme-settings-theme-css" />
    <link rel="stylesheet" href="~/vendor/css/colors-dark.dist.css" class="theme-settings-colors-css" />
    ...
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="~/vendor/css/bootstrap-dark.dist.css" class="theme-settings-bootstrap-css" />
    <link rel="stylesheet" href="~/vendor/css/appwork-dark.dist.css" class="theme-settings-appwork-css" />
    <link rel="stylesheet" href="~/vendor/css/theme-corporate-dark.dist.css" class="theme-settings-theme-css" />
    <link rel="stylesheet" href="~/vendor/css/colors-dark.dist.css" class="theme-settings-colors-css" />
    ...
</environment>

RTL support

To enable RTL direction support, first of all, you need to set $enable-rtl-support variable to true.

AspnetCoreMvcStarter/wwwroot/vendor/css/_custom-variables/_features.scss
$enable-rtl-support: true;
...

Then load Appwork's stylesheets from the ~/vendor/css/rtl/ path instead of ~/vendor/css/.

AspnetCoreMvcStarter/Views/Shared/Layouts/_Application.cshtml
<!-- Core stylesheets -->
<environment include="Development">
    <link rel="stylesheet" href="~/vendor/css/rtl/bootstrap.dist.css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/appwork.dist.css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/theme-corporate.dist.css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/colors.dist.css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/uikit.dist.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="~/vendor/css/rtl/bootstrap.dist.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/vendor/css/rtl/appwork.dist.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/vendor/css/rtl/theme-corporate.dist.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/vendor/css/rtl/colors.dist.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/vendor/css/rtl/uikit.dist.css" asp-append-version="true" />
</environment>
<!-- Core stylesheets -->
<environment include="Development">
    <link rel="stylesheet" href="~/vendor/css/rtl/bootstrap.dist.css" class="theme-settings-bootstrap-css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/appwork.dist.css" class="theme-settings-appwork-css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/theme-corporate.dist.css" class="theme-settings-theme-css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/colors.dist.css" class="theme-settings-colors-css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/uikit.dist.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="~/vendor/css/rtl/bootstrap.dist.css" class="theme-settings-bootstrap-css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/appwork.dist.css" class="theme-settings-appwork-css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/theme-corporate.dist.css" class="theme-settings-theme-css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/colors.dist.css" class="theme-settings-colors-css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/uikit.dist.css" asp-append-version="true" />
</environment>

To enable RTL direction, add dir="rtl" attribute to the <html> element.

AspnetCoreMvcStarter/Views/Shared/Layouts/_Application.cshtml
<html dir="rtl">

Layout options

You can configure the initial layout by setting control classes to the <html> element.

After the initial layout setup the recommended way to control layout options is layout helpers, because the helpers do some extra work, such as: setting container paddings (when navbar is fixed), performing layout animations, setting correct sidenav state classes depending on screen size etc. 
AspnetCoreMvcStarter/Views/Shared/Layouts/_Application.cshtml
<html class="layout-fixed layout-collapsed">
Control class Description
.layout-reversed Reverse layout direction without markup change.
.layout-expanded Expand layout sidenav on small screens (< 992px).
.layout-collapsed Collapse layout sidenav on large screens (>= 992px).
.layout-offcanvas Make layout sidenav offcanvas.
.layout-fixed Set layout position to fixed.
.layout-fixed-offcanvas Set layout position to fixed with offcanvas sidenav.
.layout-navbar-fixed Set layout navbar position to fixed.
.layout-footer-fixed Set layout footer position to fixed.

PACE.js progress

Optionally you can enable PACE.js progress bar:

  1. Append pace.js script to the <head> section.

    AspnetCoreMvcStarter/Views/Shared/Layouts/_Application.cshtml
    <environment include="Development"><script src="~/vendor/js/pace.dist.js"></script></environment>
<environment exclude="Development"><script src="~/vendor/js/pace.dist.js" asp-append-version="true"></script></environment>

  2. Append .page-loader element to the <body>.

    AspnetCoreMvcStarter/Views/Shared/Layouts/_Application.cshtml
    <div class="page-loader"><div class="bg-primary"></div></div>

Generator

Use starter template generator to simplify the initial setup. Just replace a content of appropriate files with the generated code within the aspnet-core-mvc-starter directory.

Open in new tab

Available tasks

If you're using Visual Studio, then you can run tasks in the Task Runner Explorer window: View -> Other Windows -> Task Runner Explorer.
If you're using Visual Studio Code, then you can run tasks using command: npm: Run Script.

Task Description
build Compile assets.
build:js Compile .js files within the AspnetCoreMvcStarter/wwwroot directory.
build:css Compile .scss files within the AspnetCoreMvcStarter/wwwroot directory.
build:prod Compile assets in production mode with minification.
build:prod:js Compile .js files within the AspnetCoreMvcStarter/wwwroot directory in production mode with minification.
build:prod:css Compile .scss files within the AspnetCoreMvcStarter/wwwroot directory in production mode with minification.
watch Watch files for changes and automatically recompile when changed.

Troubleshooting

  • Build process is too slow

    By default, assets compilation is performed before each build of the project. To disable this behaviour open *.csproj file and remove the following lines:

    <Target Name="DebugPreCompileTarget" BeforeTargets="Build" Condition="'$(Configuration)'!='Release'">
  <Exec Command="npm run build" />
</Target>
    If you disable asset precompilation, you will have to compile them manually using Gulp tasks. See Available tasks.

Migration guide

Do not forget to commit changes or clone the project before performing migration steps.

  1. Upgrade .NET Core to .Net 5:

    Official upgrade guide: https://docs.microsoft.com/en-us/aspnet/core/migration/31-to-50?view=aspnetcore-5.0&tabs=visual-studio

  2. Upgrade Node.js to the latest LTS release (https://nodejs.org/en/)

  3. Remove the next files and directories:

    wwwroot/vendor/libs/vegas/

  4. Since some extensions were removed from the bootstrap-table package, remove wwwroot/vendor/libs/bootstrap-table/ directory and copy new appwork-v1_6_0/aspnet-core-mvc-starter/AspnetCoreMvcStarter/wwwroot/vendor/libs/bootstrap-table/

  5. Copy with replace all SCSS files within wwwroot/vendor/css/ and wwwroot/vendor/css/rtl/ directories:

    wwwroot/vendor/css/*.scss
wwwroot/vendor/css/rtl/*.scss

  6. Copy with replace changed files and directories:

    wwwroot/vendor/fonts/
wwwroot/vendor/css/_appwork/
wwwroot/vendor/css/_uikit/
wwwroot/vendor/libs/blueimp-gallery/
wwwroot/vendor/libs/bootstrap-slider/
wwwroot/vendor/libs/dropzone/
wwwroot/vendor/libs/fullcalendar/
wwwroot/vendor/libs/nouislider/
wwwroot/vendor/libs/minicolors/
wwwroot/vendor/libs/photoswipe/
wwwroot/vendor/libs/plyr/
wwwroot/vendor/libs/select2/
wwwroot/vendor/libs/smartwizard/
wwwroot/vendor/libs/sortablejs/
wwwroot/vendor/libs/swiper/
wwwroot/vendor/libs/timepicker/
wwwroot/vendor/libs/typeahead-js/

  7. Update:

    appsettings.Development.json. Diff

    {PROJECT_NAME}.csproj. Diff

    package.json. Diff

    Properties/launchSettings.json. Diff

  8. Reload the project and restore NuGet packages.

  9. Remove node_modules directory and package-lock.json. Then restore NPM packages.

  10. Rebuild assets:

    • Visual Studio: Task Runner Explorer → Double click on "build" task
    • VS Code: Ctrl/Cmd + Shift + P → Tasks: Run task → gulp: build

  11. Rebuild the project

Changes in third-party components:

  • vegas plugin was excluded from the package.

  • fullcalendar changed its API and configuration object:

    Before
    var eventList = [{
  ...
  className: 'fc-event-warning'
}, {
  ...
  rendering: 'background'
}];

new Calendar($('#id')[0], {
  ...
  defaultDate: ...,
  eventLimit: ...,
  defaultView: '...',
  dir: 'rtl',
  header: {
    ...
    left: '...',
    right: '...'
  },
  views: {
    dayGrid: {
      eventLimit: ...
    }
  },
});
    After
    var eventList = [{
  ...
  classNames: 'fc-event-warning'
}, {
  ...
  display: 'background'
}];

new Calendar($('#id')[0], {
  ...
  initialDate: ...,
  dayMaxEventRows: ...,
  initialView: '...',
  direction: 'rtl',
  headerToolbar: {
    ...
    start: '...',
    end: '...'
  },
  views: {
    dayGrid: {
      dayMaxEventRows: ...
    }
  },
});

    For more info see https://fullcalendar.io/docs/upgrading-from-v4

  • dropzone configuration is changed.

    Before
    $('#id').dropzone();
    After
    var previewTemplate =
  '<div class="dz-preview dz-file-preview">' +
  '  <div class="dz-details">' +
  '    <div class="dz-thumbnail">' +
  '      <img data-dz-thumbnail>' +
  '      <span class="dz-nopreview">No preview</span>' +
  '      <div class="dz-success-mark"></div>' +
  '      <div class="dz-error-mark"></div>' +
  '      <div class="dz-error-message"><span data-dz-errormessage></span></div>' +
  '      <div class="progress"><div class="progress-bar progress-bar-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div></div>' +
  '    </div>' +
  '    <div class="dz-filename" data-dz-name></div>' +
  '    <div class="dz-size" data-dz-size></div>' +
  '  </div>' +
  '</div>';
            
$('#id').dropzone({
  previewTemplate: previewTemplate
});

  • smartwizard markup and API are changed.

    Before
    <ul>
  <li><a href="#" class="mb-3">...</a></li>
  ...
</ul>

<div class="mb-3">
  <div id="smartwizard-1-step-1" class="card animated fadeIn">
    ...
  </div>
</div>
    After
    <ul class="nav">
  <li><a href="#" class="nav-link mb-3">...</a></li>
  ...
</ul>

<div class="tab-content mb-3">
  <div id="#" class="tab-pane card" role="tabpanel">
    ...
  </div>
</div>
    Before
    $el.smartWizard({
  useURLhash: false,
  showStepURLhash: false,
  ...
})
.on('leaveStep', function(e, anchorObject, stepNumber, stepDirection) {
  if (stepDirection === 'forward'){ return $el.valid(); }
  return true;
})
.on('showStep', function(e, anchorObject, stepNumber, stepDirection) {
  var $btn = $el.find('.btn-finish');

  if (stepNumber === 3) {
    $btn.removeClass('hidden');
  } else {
    $btn.addClass('hidden');
  }
});
    After
    $el.smartWizard({
  enableURLhash: false,
  ...
})
.on('leaveStep', function(e, anchorObject, currentStepIndex, nextStepIndex, stepDirection) {
  var $finishBtn = $el.find('.btn-finish');

  if (stepDirection === 'forward'){
    var isValid = $el.valid();

    if (!isValid) {
      anchorObject.addClass('danger');
    } else {
      anchorObject.removeClass('danger');

      if (nextStepIndex === 3) {
        $finishBtn.removeClass('d-none');
      }
    }

    return isValid;
  } else {
    $finishBtn.addClass('d-none');
  }

  return true;
})
.find('> .toolbar .btn:not(.btn-primary)').addClass('btn-secondary');

    For more info see http://techlaboratory.net/jquery-smartwizard

  • Copy with replace the next files and directories:

    wwwroot/vendor/css/_appwork/_functions.scss
wwwroot/vendor/libs/bootstrap-datepicker/
wwwroot/vendor/libs/bootstrap-daterangepicker/
wwwroot/vendor/libs/bootstrap-material-datetimepicker/
wwwroot/vendor/libs/bootstrap-select/
wwwroot/vendor/libs/flatpickr/
wwwroot/vendor/libs/growl/
wwwroot/vendor/libs/plyr/
wwwroot/vendor/libs/select2/
wwwroot/vendor/libs/sweetalert2/
wwwroot/vendor/libs/timepicker/
wwwroot/vendor/libs/typeahead-js/

  • Copy with replace the next file:

    wwwroot/vendor/libs/flatpickr/flatpickr.scss

  1. Upgrade .NET Core to 3.1:

    Official upgrade guide: https://docs.microsoft.com/en-us/aspnet/core/migration/30-to-31?view=aspnetcore-3.1&tabs=visual-studio

  2. Upgrade Node.js to the latest LTS release (https://nodejs.org/en/)

    Note: Yarn package manager is not reqired anymore.

  3. Remove the next files and directories:

    wwwroot/vendor/css/migrate/

  4. Copy new files and directories:

    wwwroot/vendor/css/_custom-variables/_appwork-dark.scss
wwwroot/vendor/css/_custom-variables/_features.scss

  5. Since some extensions were removed from the bootstrap-table package, remove wwwroot/vendor/libs/bootstrap-table/ directory and copy new appwork-v1_5_0/aspnet-core-mvc-starter/AspnetCoreMvcStarter/wwwroot/vendor/libs/bootstrap-table/

  6. Copy with replace all SCSS files within wwwroot/vendor/css/ and wwwroot/vendor/css/rtl/ directories:

    wwwroot/vendor/css/*.scss
wwwroot/vendor/css/rtl/*.scss

  7. Copy with replace changed files and directories:

    wwwroot/vendor/fonts/fontawesome/
wwwroot/vendor/fonts/fontawesome.dist.css
wwwroot/vendor/js/bootstrap.js
wwwroot/vendor/js/layout-helpers.js
wwwroot/vendor/js/polyfills.js
wwwroot/vendor/js/sidenav.js
wwwroot/vendor/js/theme-settings.js
wwwroot/vendor/js/_theme-settings/
wwwroot/vendor/css/_appwork/
wwwroot/vendor/css/_theme/
wwwroot/vendor/css/_uikit/
wwwroot/vendor/css/pages/
wwwroot/vendor/libs/autosize/
wwwroot/vendor/libs/block-ui/
wwwroot/vendor/libs/blueimp-gallery/
wwwroot/vendor/libs/bootbox/
wwwroot/vendor/libs/bootstrap-datepicker/
wwwroot/vendor/libs/bootstrap-daterangepicker/
wwwroot/vendor/libs/bootstrap-duallistbox/
wwwroot/vendor/libs/bootstrap-markdown/
wwwroot/vendor/libs/bootstrap-material-datetimepicker/
wwwroot/vendor/libs/bootstrap-maxlength/
wwwroot/vendor/libs/bootstrap-menu/
wwwroot/vendor/libs/bootstrap-select/
wwwroot/vendor/libs/bootstrap-slider/
wwwroot/vendor/libs/bootstrap-sortable/
wwwroot/vendor/libs/bootstrap-tagsinput/
wwwroot/vendor/libs/c3/
wwwroot/vendor/libs/chartist/
wwwroot/vendor/libs/chartjs/
wwwroot/vendor/libs/clipboard/
wwwroot/vendor/libs/cropper/
wwwroot/vendor/libs/d3/
wwwroot/vendor/libs/datatables/
wwwroot/vendor/libs/dragula/
wwwroot/vendor/libs/dropzone/
wwwroot/vendor/libs/eve/
wwwroot/vendor/libs/flatpickr/
wwwroot/vendor/libs/flot/
wwwroot/vendor/libs/flow-js/
wwwroot/vendor/libs/fullcalendar/
wwwroot/vendor/libs/gmaps/
wwwroot/vendor/libs/growl/
wwwroot/vendor/libs/jstree/
wwwroot/vendor/libs/knob/
wwwroot/vendor/libs/ladda/
wwwroot/vendor/libs/mapael/
wwwroot/vendor/libs/markdown/
wwwroot/vendor/libs/masonry/
wwwroot/vendor/libs/minicolors/
wwwroot/vendor/libs/moment/
wwwroot/vendor/libs/morris/
wwwroot/vendor/libs/nestable/
wwwroot/vendor/libs/nouislider/
wwwroot/vendor/libs/numeral/
wwwroot/vendor/libs/perfect-scrollbar/
wwwroot/vendor/libs/photoswipe/
wwwroot/vendor/libs/plyr/
wwwroot/vendor/libs/popper/
wwwroot/vendor/libs/pwstrength-bootstrap/
wwwroot/vendor/libs/quill/
wwwroot/vendor/libs/raphael/
wwwroot/vendor/libs/select2/
wwwroot/vendor/libs/shepherd/
wwwroot/vendor/libs/smartwizard/
wwwroot/vendor/libs/sortablejs/
wwwroot/vendor/libs/sparkline/
wwwroot/vendor/libs/spin/
wwwroot/vendor/libs/spinkit/
wwwroot/vendor/libs/sweetalert2/
wwwroot/vendor/libs/swiper/
wwwroot/vendor/libs/tableexport/
wwwroot/vendor/libs/timepicker/
wwwroot/vendor/libs/toastr/
wwwroot/vendor/libs/typeahead-js/
wwwroot/vendor/libs/validate/
wwwroot/vendor/libs/vanilla-text-mask/
wwwroot/vendor/libs/vegas/

  8. Update:

    {PROJECT_NAME}.csproj. Diff

    Gulpfile.js. Diff

    package.json. Diff

    webpack.config.js. Diff

    wwwroot/vendor/css/_custom-variables/_libs.scss. Diff

    wwwroot/vendor/css/_custom-variables/_pages.scss. Diff

    wwwroot/vendor/css/_custom-variables/_uikit.scss. Diff

  9. Edit variables in the wwwroot/vendor/css/_custom-variables/_features.scss file according your setup.

    Variable Feature
    $enable-rtl-support Set to true to enable RTL mode support, otherwise set to false.
    $enable-light-style Set to true to enable light (previously default) style support, otherwise set to false.
    $enable-material-style Set to true to enable material style support, otherwise set to false.
    $enable-dark-style Set to true to enable dark style support, otherwise set to false.

  10. Reload the project and restore NuGet packages.

  11. Remove node_modules directory and then restore NPM packages.

  12. Rebuild assets:

    • Visual Studio: Task Runner Explorer → Double click on "build" task
    • VS Code: Ctrl/Cmd + Shift + P → Tasks: Run task → gulp: build

  13. Rebuild the project

  • theme-default class is renamed to theme-light.

    [Before] Views/Shared/Layouts/_Application.cshtml
    <html lang="en" class="default-style">
    [After] Views/Shared/Layouts/_Application.cshtml
    <html lang="en" class="light-style">

  • ThemeSettings plugin settings are changed. Use Settings Panel Generator to get updated settings.

  • ThemeSettings.setMaterial() method is removed.
    Added ThemeSettings.setStyle(), ThemeSettings.isLightStyle(), ThemeSettings.isMaterialStyle(), ThemeSettings.isDarkStyle() methods.
    See Settings panel docs.

  • New style-dependent utility classes, which change its color depending on the current active style:

    • .theme-text-white - White (light or material style) / dark (dark style) text.
    • .theme-text-dark - Dark (light or material style) / white (dark style) text.
    • .theme-bg-white - White (light or material style) / dark (dark style) background.
    • .theme-bg-dark - Dark (light or material style) / white (dark style) background.
    • .theme-border-white - White (light or material style) / dark (dark style) border.
    • .theme-border-dark - Dark (light or material style) / white (dark style) border.

Changes in third-party components:

  • plyr changed its initialization method:

    Before
    plyr.setup('#selector', options);
    After
    new Plyr('#selector', options);

  • spinkit classes are changed. See https://github.com/tobiasahlin/SpinKit

  • SweetAlert's type option is renamed to icon.

    Before
    Swal.fire({
  ...,
  type: 'warning',
});
    After
    Swal.fire({
  ...,
  icon: 'warning',
});