ASP.NET Core Starter Template Generator

Material ripple

PACE.js loader

RTL support

RTL mode

Theme settings panel

PAGE LAYOUT

LAYOUT OPTIONS

Fixed navbar

Fixed footer

Reversed

Collapsed sidenav

THEME

NAVBAR BG

SIDENAV BG

FOOTER BG

<!DOCTYPE html>
<html lang="en"{% if rtlMode %} dir="rtl"{% endif %} class="{{style}}-style{% if pageLayout != 'blank' and layoutPosition %} layout-{{layoutPosition}}{% endif %}{% if reversedLayout %} layout-reversed{% endif %}{% if collapsedSidenav %} layout-collapsed{% endif %}{% if fixedNavbar %} layout-navbar-fixed{% endif %}{% if fixedFooter %} layout-footer-fixed{% endif %}">
<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>

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

<environment include="Development">
        
        <link rel="stylesheet" href="~/vendor/fonts/ionicons.css" />
        
        
        
    </environment>
    <environment exclude="Development">
        
        <link rel="stylesheet" href="~/vendor/fonts/ionicons.css" asp-append-version="true" />
        
        
        
    </environment>

<environment include="Development">
        <link rel="stylesheet" href="~/vendor/css/{% if rtlSupport %}rtl/{% endif %}bootstrap{% if style == 'material' %}-material{% endif %}.css"{% if settingsPanel %} class="theme-settings-bootstrap-css"{% endif %} />
        <link rel="stylesheet" href="~/vendor/css/{% if rtlSupport %}rtl/{% endif %}appwork{% if style == 'material' %}-material{% endif %}.css"{% if settingsPanel %} class="theme-settings-appwork-css"{% endif %} />
        <link rel="stylesheet" href="~/vendor/css/{% if rtlSupport %}rtl/{% endif %}theme-{{theme}}{% if style == 'material' %}-material{% endif %}.css"{% if settingsPanel %} class="theme-settings-theme-css"{% endif %} />
        <link rel="stylesheet" href="~/vendor/css/{% if rtlSupport %}rtl/{% endif %}colors{% if style == 'material' %}-material{% endif %}.css"{% if settingsPanel %} class="theme-settings-colors-css"{% endif %} />
        <link rel="stylesheet" href="~/vendor/css/{% if rtlSupport %}rtl/{% endif %}uikit.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="~/vendor/css/{% if rtlSupport %}rtl/{% endif %}bootstrap{% if style == 'material' %}-material{% endif %}.min.css"{% if settingsPanel %} class="theme-settings-bootstrap-css"{% else %} asp-append-version="true"{% endif %} />
        <link rel="stylesheet" href="~/vendor/css/{% if rtlSupport %}rtl/{% endif %}appwork{% if style == 'material' %}-material{% endif %}.min.css"{% if settingsPanel %} class="theme-settings-appwork-css"{% else %} asp-append-version="true"{% endif %} />
        <link rel="stylesheet" href="~/vendor/css/{% if rtlSupport %}rtl/{% endif %}theme-{{theme}}{% if style == 'material' %}-material{% endif %}.min.css"{% if settingsPanel %} class="theme-settings-theme-css"{% else %} asp-append-version="true"{% endif %} />
        <link rel="stylesheet" href="~/vendor/css/{% if rtlSupport %}rtl/{% endif %}colors{% if style == 'material' %}-material{% endif %}.min.css"{% if settingsPanel %} class="theme-settings-colors-css"{% else %} asp-append-version="true"{% endif %} />
        <link rel="stylesheet" href="~/vendor/css/{% if rtlSupport %}rtl/{% endif %}uikit.min.css" asp-append-version="true" />
    </environment>

{% if materialRipple %}
    
    <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>
    {%- endif %}
    {% if materialRipple and not settingsPanel -%}
    <script>window.attachMaterialRippleOnLoad();</script>
    {% endif %}

{% if pageLayout != 'blank' or settingsPanel %}
    
    <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>
    {%- endif %}

{% if settingsPanel %}
    
    <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/{% if rtlSupport %}rtl/{% endif %}" + name + ".css")',
                            '@(name)-material.css': '@Url.Content("~/vendor/css/{% if rtlSupport %}rtl/{% endif %}" + name + "-material.css")',
                        </text>
                    }

// UI Kit
                    'uikit.css': '@Url.Content("~/vendor/css/{% if rtlSupport %}rtl/{% endif %}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/{% if rtlSupport %}rtl/{% endif %}theme-" + name + ".css")',
                            'theme-@(name)-material.css': '@Url.Content("~/vendor/css/{% if rtlSupport %}rtl/{% endif %}theme-" + name + "-material.css")',
                        </text>
                    }
                };

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

{% if paceLoader %}
    
    <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>
    {% endif %}

{% if pageLayout != 'blank' and pageLayout != 'without-sidenav' %}
    
    
    <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>
    {% endif %}

<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>
    {% if paceLoader %}
    
    <div class="page-loader"><div class="bg-primary"></div></div>
    {% endif %}

@RenderBody()

<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>
        {%- if pageLayout != 'blank' and pageLayout != 'without-sidenav' %}
        <script src="~/vendor/js/sidenav.js"></script>
        {%- endif %}

{% if pageLayout != 'blank' and pageLayout != 'without-sidenav' %}
        
        
        <script src="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
        {% endif %}

<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>
        {%- if pageLayout != 'blank' and pageLayout != 'without-sidenav' %}
        <script src="~/vendor/js/sidenav.js" asp-append-version="true"></script>
        {%- endif %}

<script src="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.js" asp-append-version="true"></script>

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

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

@{bool hideToggle = ViewData["LayoutNavbarHideToggle"] != null && ViewData["LayoutNavbarHideToggle"].ToString() == "True";}

<nav class="layout-navbar navbar navbar-expand-lg align-items-lg-center bg-{{navbarBg}} container-p-x" id="layout-navbar">
    
    <a asp-page="/Index" class="navbar-brand">Asp.Net Core Starter</a>

@if (!hideToggle)
    {
        
        <div class="layout-sidenav-toggle navbar-nav align-items-lg-center mr-auto mr-lg-4">
            <a class="nav-item nav-link px-0 ml-2" href="javascript:void(0)">
                <i class="ion ion-md-menu text-large align-middle"></i>
            </a>
        </div>
    }

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#layout-navbar-collapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="layout-navbar-collapse">
        <div class="navbar-nav align-items-lg-center">
            <div class="nav-item"><a class="nav-link" href="#">Link 1</a></div>
            <div class="nav-item"><a class="nav-link" href="#">Link 2</a></div>
        </div>
    </div>
</nav>