ASP.NET Core 2 - Appwork v1.1.0 Docs

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

Without settings panel
With settings panel

`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

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

...

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:

Remove unwanted packages from the dependencies section in the AspnetCoreStarter/package.json file.
Remove related directories within the AspnetCoreStarter/wwwroot/vendor/libs directory.
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:

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

Installation

Windows

Download and install Node.js 8.x from https://nodejs.org/en/.
Download and install Git from https://git-scm.com/downloads.
Download and install Yarn from https://yarnpkg.com/en/docs/install.
Logout from the system and login again.
Launch cmd.exe as administrator and run command npm install --add-python-to-path='true' --global --production windows-build-tools.
Logout from the system and login again.
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)

Upgrade system: sudo apt-get update && sudo apt-get upgrade.
Install curl: sudo apt-get install curl.
Install Node.js 8.x and build tools following instructions on https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions.
Install Git following instructions on https://git-scm.com/download/linux.
Install Yarn following instructions on https://yarnpkg.com/en/docs/install#debian-stable.
Install Gulp globally sudo npm i -g gulp.
Install .NET Core SDK following instructions on https://www.microsoft.com/net/download/linux/build.
Install C#, yarn and Gulp Tasks extensions.
Open AspnetCoreStarter folder in editor and wait while dependencies installed.
Restore unresolved dependencies.
Install required assets to build and debug.
Right click on package.json and select Install packages.
Tasks -> Run Task -> Gulp: build:all.
Tasks -> Run Build Task -> Build.
To recompile assets on save, after project opened run Tasks -> Run Task -> Gulp: watch.

Mac OS X (Visual Studio Code)

Install Xcode from App Store. After installing, launch the Xcode, accept the license agreement and wait while components installed.
Install Homebrew following instructions on https://brew.sh.
Download and install Node.js 8.x from https://nodejs.org/en/.
Download and install Git from https://git-scm.com/downloads.
Install Yarn following instructions on https://yarnpkg.com/en/docs/install.
Install Gulp globally sudo npm i -g gulp.
Install .NET Core SDK following instructions on https://www.microsoft.com/net/download/macos/build.
Install C#, yarn and Gulp Tasks extensions.
Open AspnetCoreStarter folder in editor and wait while dependencies installed.
Restore unresolved dependencies.
Install required assets to build and debug.
Right click on package.json and select Install packages.
Tasks -> Run Task -> Gulp: build:all.
Tasks -> Run Build Task -> Build.
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:

Layout for the entire app - set layout property in the AspnetCoreStarter/Pages/_ViewStart.cshtml file.
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:

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

AspnetCoreStarter/Pages/Layouts/_Application.cshtml

<html class="material-style">

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>

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>

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:

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>

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.

Open in new tab

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.

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

OTHER

Windows

Ubuntu (Visual Studio Code)

Mac OS X (Visual Studio Code)

Page structure

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

OTHER
Settings panel Layout helpers