aspnet-core-starter
directory structureASP.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>
The starter project by default includes all third-party plugins.
Optionally you can remove unwanted plugins to reduce output assets size and compile time:
dependencies
section in the AspnetCoreStarter/package.json
file.AspnetCoreStarter/wwwroot/vendor/libs
directory.@import
s and @include
s in the AspnetCoreStarter/wwwroot/vendor/css/_theme/_libs.scss
file.For example, if you want to exclude plyr
plugin, you will need to:
plyr
dependency in the AspnetCoreStarter/package.json
file.AspnetCoreStarter/wwwroot/vendor/libs/plyr
directory.@import "../../libs/plyr/mixins";
and @include plyr-theme($background, $color);
lines in the AspnetCoreStarter/wwwroot/vendor/css/_theme/_libs.scss
file.
cmd.exe
as administrator and run command npm install --add-python-to-path='true' --global --production windows-build-tools
.If you're using Visual Studio:
Make your node.js install prioritized. You can do it in two ways:
Tools -> Options -> Projects and solutions
. Move $(PATH)
string to the top of the list using the arrows.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.package.json
and select Restore Packages (Yarn)
. Wait while packages restored.View -> Other Windows -> Task Runner Explorer
.watch
task. After installing this task will be executed automatically after the project opened.Build -> Build AspnetCoreStarter
.If you're using Visual Studio Code:
C#
, yarn
and Gulp Tasks
extensions.AspnetCoreStarter
folder in editor and wait while dependencies installed.package.json
and select Install packages
.Tasks -> Run Task -> Gulp: build:all
.Tasks -> Run Build Task -> Build
.Tasks -> Run Task -> Gulp: watch
.sudo apt-get update && sudo apt-get upgrade
.sudo apt-get install curl
.sudo npm i -g gulp
.C#
, yarn
and Gulp Tasks
extensions.AspnetCoreStarter
folder in editor and wait while dependencies installed.package.json
and select Install packages
.Tasks -> Run Task -> Gulp: build:all
.Tasks -> Run Build Task -> Build
.Tasks -> Run Task -> Gulp: watch
.sudo npm i -g gulp
.C#
, yarn
and Gulp Tasks
extensions.AspnetCoreStarter
folder in editor and wait while dependencies installed.package.json
and select Install packages
.Tasks -> Run Task -> Gulp: build:all
.Tasks -> Run Build Task -> Build
.Tasks -> Run Task -> Gulp: watch
.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>
You can set the layout in two ways:
layout
property in the AspnetCoreStarter/Pages/_ViewStart.cshtml
file.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/_LayoutBlank";
}
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>
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>
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">
You can configure the initial layout by setting control classes to the <html>
element.
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. |
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>
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.
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. |