Docs v1.1.0  /  ASP.NET Core 2 HTML5 Angular Vue.js Laravel Laravel + Vue.js Rails ASP.NET MVC Settings panel Layout helpers

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

aspnet-core-starter directory structure

aspnet-core-starter
AspnetCoreStarter
Pages
Layouts
Partials
_LayoutFooter.cshtml
_LayoutNavbar.cshtml
_LayoutSidenav.cshtml
_Application.cshtml
Main layout
_Layout1.cshtml
_Layout1Flex.cshtml
...
_ViewStart.cshtml
...
Properties
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
...
fonts
Iconic fonts
fontawesome.css
ionicons.css
...
js
Javascripts
bootstrap.js
dropdown-hover.js
...
libs
Third-party libraries
animate-css
autosize
block-ui
...
favicon.ico
Gulpfile.js
package.json
...

Assets compilation

ASP.NET Core 2 project is integrated with the Gulp task manager (see available tasks):

  • All .scss files within wwwroot/css and wwwroot/vendor directories are processed by node-sass library. The output files will have the next filename format: {filename}.css. Example:

    wwwroot/css/site.scss
    body {
      background: #fff;
    }
    AspnetCoreStarter/Pages/Layouts/_Application.cshtml
    <environment include="Development"><link rel="stylesheet" href="~/css/site.css" /></environment>
    <environment exclude="Development"><link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" /></environment>
  • All .js files within wwwroot/js directory are processed by Babel compiler, so you can use all ES6 features in your code. The output files will have the next filename format: {filename}.es5.js. Example:

    wwwroot/js/site.js
    $(() => {
      alert('Content loaded!')
    })
    AspnetCoreStarter/Pages/Layouts/_Application.cshtml
    <environment include="Development"><script src="~/js/site.es5.js"></script></environment>
    <environment exclude="Development"><script src="~/js/site.es5.min.js" asp-append-version="true"></script></environment>

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 AspnetCoreStarter/package.json file.
  2. Remove related directories within the AspnetCoreStarter/wwwroot/vendor/libs directory.
  3. Remove related @imports and @includes in the AspnetCoreStarter/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 AspnetCoreStarter/package.json file.
  2. Remove the AspnetCoreStarter/wwwroot/vendor/libs/plyr directory.
  3. Remove @import "../../libs/plyr/mixins"; and @include plyr-theme($background, $color); lines in the AspnetCoreStarter/wwwroot/vendor/css/_theme/_libs.scss file.

Installation

Windows
  1. Download and install Node.js 8.x from https://nodejs.org/en/.
  2. Download and install Git from https://git-scm.com/downloads.
  3. Download and install Yarn from https://yarnpkg.com/en/docs/install.
  4. Logout from the system and login again.
  5. Launch cmd.exe as administrator and run command npm install --add-python-to-path='true' --global --production windows-build-tools.
  6. Logout from the system and login again.
  7. If you're using Visual Studio:

    1. Download and install Yarn Installer package from https://marketplace.visualstudio.com/items?itemName=MadsKristensen.YarnInstaller. Also disable npm restore and enable yarn restore (see package's page for instructions).
    2. Make your node.js install prioritized. You can do it in two ways:

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

    If you're using Visual Studio Code:

    1. Download and install .NET Core SDK from https://www.microsoft.com/net/download/windows.
    2. Install C#, yarn and Gulp Tasks extensions.
    3. Open AspnetCoreStarter 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 packages.
    7. Tasks -> Run Task -> Gulp: build:all.
    8. Tasks -> Run Build Task -> Build.
    9. To recompile assets on save, after project opened run Tasks -> Run Task -> Gulp: watch.
Ubuntu (Visual Studio Code)
  1. Upgrade system: sudo apt-get update && sudo apt-get upgrade.
  2. Install curl: sudo apt-get install curl.
  3. Install Node.js 8.x and build tools following instructions on https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions.
  4. Install Git following instructions on https://git-scm.com/download/linux.
  5. Install Yarn following instructions on https://yarnpkg.com/en/docs/install#debian-stable.
  6. Install Gulp globally sudo npm i -g gulp.
  7. Install .NET Core SDK following instructions on https://www.microsoft.com/net/download/linux/build.
  8. Install C#, yarn and Gulp Tasks extensions.
  9. Open AspnetCoreStarter folder in editor and wait while dependencies installed.
  10. Restore unresolved dependencies.
  11. Install required assets to build and debug.
  12. Right click on package.json and select Install packages.
  13. Tasks -> Run Task -> Gulp: build:all.
  14. Tasks -> Run Build Task -> Build.
  15. To recompile assets on save, after project opened run Tasks -> Run Task -> Gulp: 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. Install Homebrew following instructions on https://brew.sh.
  3. Download and install Node.js 8.x from https://nodejs.org/en/.
  4. Download and install Git from https://git-scm.com/downloads.
  5. Install Yarn following instructions on https://yarnpkg.com/en/docs/install.
  6. Install Gulp globally sudo npm i -g gulp.
  7. Install .NET Core SDK following instructions on https://www.microsoft.com/net/download/macos/build.
  8. Install C#, yarn and Gulp Tasks extensions.
  9. Open AspnetCoreStarter folder in editor and wait while dependencies installed.
  10. Restore unresolved dependencies.
  11. Install required assets to build and debug.
  12. Right click on package.json and select Install packages.
  13. Tasks -> Run Task -> Gulp: build:all.
  14. Tasks -> Run Build Task -> Build.
  15. To recompile assets on save, after project opened run Tasks -> Run Task -> Gulp: 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

AspnetCoreStarter/Pages/Layouts/_Application.cshtml
<!DOCTYPE html>
<html lang="en" class="default-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 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.css" /> -->
        <link rel="stylesheet" href="~/vendor/fonts/ionicons.css" />
        <!-- <link rel="stylesheet" href="~/vendor/fonts/linearicons.css" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/open-iconic.css" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/pe-icon-7-stroke.css" /> -->
    </environment>
    <environment exclude="Development">
        <!-- <link rel="stylesheet" href="~/vendor/fonts/fontawesome.css" asp-append-version="true" /> -->
        <link rel="stylesheet" href="~/vendor/fonts/ionicons.css" asp-append-version="true" />
        <!-- <link rel="stylesheet" href="~/vendor/fonts/linearicons.css" asp-append-version="true" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/open-iconic.css" asp-append-version="true" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/pe-icon-7-stroke.css" asp-append-version="true" /> -->
    </environment>

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

    <!-- Layout helpers -->
    <environment include="Development"><script src="~/vendor/js/layout-helpers.js"></script></environment>
    <environment exclude="Development"><script src="~/vendor/js/layout-helpers.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.css" /></environment>
    <environment exclude="Development"><link rel="stylesheet" href="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.min.css" asp-append-version="true" /></environment>

    <!-- Application stylesheets -->
    <environment include="Development"><link rel="stylesheet" href="~/css/site.css" /></environment>
    <environment exclude="Development"><link rel="stylesheet" href="~/css/site.min.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>
    <environment include="Development">
        <script src="~/vendor/libs/popper/popper.js"></script>
        <script src="~/vendor/js/bootstrap.js"></script>
        <script src="~/vendor/js/sidenav.js"></script>

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

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

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

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

    @RenderSection("Scripts", required: false)
</body>
</html>
<!DOCTYPE html>
<html lang="en" class="default-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 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.css" /> -->
        <link rel="stylesheet" href="~/vendor/fonts/ionicons.css" />
        <!-- <link rel="stylesheet" href="~/vendor/fonts/linearicons.css" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/open-iconic.css" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/pe-icon-7-stroke.css" /> -->
    </environment>
    <environment exclude="Development">
        <!-- <link rel="stylesheet" href="~/vendor/fonts/fontawesome.css" asp-append-version="true" /> -->
        <link rel="stylesheet" href="~/vendor/fonts/ionicons.css" asp-append-version="true" />
        <!-- <link rel="stylesheet" href="~/vendor/fonts/linearicons.css" asp-append-version="true" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/open-iconic.css" asp-append-version="true" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/pe-icon-7-stroke.css" asp-append-version="true" /> -->
    </environment>

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

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

    <!-- Theme settings -->
    <environment include="Development"><script src="~/vendor/js/theme-settings.js"></script></environment>
    <environment exclude="Development"><script src="~/vendor/js/theme-settings.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 + ".css")',
                            '@(name)-material.css': '@Url.Content("~/vendor/css/" + name + "-material.css")',
                        </text>
                    }

                    // UI Kit
                    'uikit.css': '@Url.Content("~/vendor/css/uikit.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 + ".css")',
                            'theme-@(name)-material.css': '@Url.Content("~/vendor/css/theme-" + name + "-material.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.css" /></environment>
    <environment exclude="Development"><link rel="stylesheet" href="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.min.css" asp-append-version="true" /></environment>

    <!-- Application stylesheets -->
    <environment include="Development"><link rel="stylesheet" href="~/css/site.css" /></environment>
    <environment exclude="Development"><link rel="stylesheet" href="~/css/site.min.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>
    <environment include="Development">
        <script src="~/vendor/libs/popper/popper.js"></script>
        <script src="~/vendor/js/bootstrap.js"></script>
        <script src="~/vendor/js/sidenav.js"></script>

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

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

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

        <!-- Application javascripts -->
        <script src="~/js/site.es5.min.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 AspnetCoreStarter/Pages/_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 AspnetCoreStarter/Pages/Layouts/Partials directory.

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

Theming

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

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

Material styling

To enable material styling you need to:

  1. Set material-style class on the <html> element instead of default-style.

    AspnetCoreStarter/Pages/Layouts/_Application.cshtml
    <html class="material-style">
  2. Add -material suffix to bootstrap.css, appwork.css, theme-*.css and colors.css stylesheets.

    AspnetCoreStarter/Pages/Layouts/_Application.cshtml
    <!-- Core stylesheets -->
    <environment include="Development">
        <link rel="stylesheet" href="~/vendor/css/bootstrap-material.css" />
        <link rel="stylesheet" href="~/vendor/css/appwork-material.css" />
        <link rel="stylesheet" href="~/vendor/css/theme-corporate-material.css" />
        <link rel="stylesheet" href="~/vendor/css/colors-material.css" />
        ...
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="~/vendor/css/bootstrap-material.min.css" asp-append-version="true" />
        <link rel="stylesheet" href="~/vendor/css/appwork-material.min.css" asp-append-version="true" />
        <link rel="stylesheet" href="~/vendor/css/theme-corporate-material.min.css" asp-append-version="true" />
        <link rel="stylesheet" href="~/vendor/css/colors-material.min.css" asp-append-version="true" />
        ...
    </environment>
    <!-- Core stylesheets -->
    <environment include="Development">
        <link rel="stylesheet" href="~/vendor/css/bootstrap-material.css" class="theme-settings-bootstrap-css" />
        <link rel="stylesheet" href="~/vendor/css/appwork-material.css" class="theme-settings-appwork-css" />
        <link rel="stylesheet" href="~/vendor/css/theme-corporate-material.css" class="theme-settings-theme-css" />
        <link rel="stylesheet" href="~/vendor/css/colors-material.css" class="theme-settings-colors-css" />
        ...
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="~/vendor/css/bootstrap-material.min.css" class="theme-settings-bootstrap-css" />
        <link rel="stylesheet" href="~/vendor/css/appwork-material.min.css" class="theme-settings-appwork-css" />
        <link rel="stylesheet" href="~/vendor/css/theme-corporate-material.min.css" class="theme-settings-theme-css" />
        <link rel="stylesheet" href="~/vendor/css/colors-material.min.css" class="theme-settings-colors-css" />
        ...
    </environment>
  3. Optionally you can enable material ripple. Just append material-ripple.js script to the <head> section and call attachMaterialRippleOnLoad() function.

    AspnetCoreStarter/Pages/Layouts/_Application.cshtml
    <environment include="Development"><script src="~/vendor/js/material-ripple.js"></script></environment>
    <environment exclude="Development"><script src="~/vendor/js/material-ripple.js" asp-append-version="true"></script></environment>
    <script>
      window.attachMaterialRippleOnLoad();
    </script>
  4. Optionally you can enable material ripple. Just append material-ripple.js script to the <head> section.

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

RTL support

To enable RTL direction support just load Appwork's stylesheets from the ~/vendor/css/rtl/ path instead of ~/vendor/css/.

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

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

AspnetCoreStarter/Pages/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.
AspnetCoreStarter/Pages/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.

    AspnetCoreStarter/Pages/Layouts/_Application.cshtml
    <environment include="Development"><script src="~/vendor/js/pace.js"></script></environment>
    <environment exclude="Development"><script src="~/vendor/js/pace.js" asp-append-version="true"></script></environment>
  2. Append .page-loader element to the <body>.

    AspnetCoreStarter/Pages/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-starter directory.

Available tasks

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

Task Description
build:all Run all build:* tasks.
build:js Compile .js files within the AspnetCoreStarter/wwwroot directory (except vendor/ directory).
build:sass Compile .scss files within the AspnetCoreStarter/wwwroot directory (except vendor/ directory).
build:vendor:sass Compile .scss files within the AspnetCoreStarter/wwwroot/vendor/css directory.
build:vendor:libs Compile .scss files within the AspnetCoreStarter/wwwroot/vendor/libs directory.
watch Watch files for changes and automatically recompile it when changed.