ASP.NET MVC Starter Template Generator

Material ripple

PACE.js loader

RTL support

RTL mode

Theme settings panel

Light style

Material style

Dark style

PAGE LAYOUT

LAYOUT OPTIONS

Fixed navbar

Fixed footer

Reversed

Collapsed sidenav

THEME

NAVBAR BG

SIDENAV BG

FOOTER BG

using System.Web.Optimization;
using System;
using System.Collections.Generic;
using System.IO;
using System.Text.RegularExpressions;
using GlobExpressions;
using BundleTransformer.Core.Bundles;
using BundleTransformer.Core.Orderers;
using BundleTransformer.Core.Resolvers;
using System.Web;

namespace AspnetMvcStarter
{
    public class CssRewriteUrlTransformWrapper : IItemTransform
    {
        public string Process(string includedVirtualPath, string input)
        {
            return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);
        }
    }

public class BundleConfig
    {
        // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            // bundles.UseCdn = true;
            // BundleTable.EnableOptimizations = true;

// Replace a default bundle resolver in order to the debugging HTTP handler
            // can use transformations of the corresponding bundle
            BundleResolver.Current = new CustomBundleResolver();

// ------------------------------------------------------------------------------------
            // Application assets
            //

bundles.Add(SassBundle("~/bundle/css/main").Include("~/Content/main.scss"));
            bundles.Add(new ScriptBundle("~/bundle/js/main").Include("~/Scripts/main.js"));

// Bundle jquery-validation-unobtrusive package
            bundles.Add(new ScriptBundle("~/bundle/vendor/js/validate-unobtrusive/validate-unobtrusive").Include(
                        "~/node_modules/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.js"));

// ------------------------------------------------------------------------------------
            // Core stylesheets
            //

{% if not settingsPanel -%}
            bundles.Add(SassBundle("~/bundle/vendor/css/bootstrap{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}").Include("~/Vendor/css{% if rtlSupport %}/rtl{% endif %}/bootstrap{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.scss"));
            bundles.Add(SassBundle("~/bundle/vendor/css/appwork{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}").Include("~/Vendor/css{% if rtlSupport %}/rtl{% endif %}/appwork{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.scss"));
            bundles.Add(SassBundle("~/bundle/vendor/css/theme-{{theme}}{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}").Include("~/Vendor/css{% if rtlSupport %}/rtl{% endif %}/theme-{{theme}}{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.scss"));
            bundles.Add(SassBundle("~/bundle/vendor/css/colors{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}").Include("~/Vendor/css{% if rtlSupport %}/rtl{% endif %}/colors{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.scss"));
            bundles.Add(SassBundle("~/bundle/vendor/css/uikit").Include("~/Vendor/css{% if rtlSupport %}/rtl{% endif %}/uikit.scss"));
            {%- else -%}
            {%- for fileName in ['appwork', 'bootstrap', 'colors'] -%}{% for styleName in styles %}
            bundles.Add(SassBundle("~/bundle/vendor/css/{{fileName}}{% if styleName == 'material' %}-material{% elif styleName == 'dark' %}-dark{% endif %}").Include("~/Vendor/css{% if rtlSupport %}/rtl{% endif %}/{{fileName}}{% if styleName == 'material' %}-material{% elif styleName == 'dark' %}-dark{% endif %}.scss"));
            {%- endfor %}{% endfor %}
            bundles.Add(SassBundle("~/bundle/vendor/css/uikit").Include("~/Vendor/css{% if rtlSupport %}/rtl{% endif %}/uikit.scss"));

// Themes
            {%- for themeName in ['air', 'corporate', 'cotton', 'gradient', 'paper', 'shadow', 'soft', 'sunrise', 'twitlight', 'vibrant'] -%}{% for styleName in styles %}
            bundles.Add(SassBundle("~/bundle/vendor/css/theme-{{themeName}}{% if styleName == 'material' %}-material{% elif styleName == 'dark' %}-dark{% endif %}").Include("~/Vendor/css{% if rtlSupport %}/rtl{% endif %}/theme-{{themeName}}{% if styleName == 'material' %}-material{% elif styleName == 'dark' %}-dark{% endif %}.scss"));
            {%- endfor %}{% endfor %}
            {%- endif %}

// ------------------------------------------------------------------------------------
            // Automatically bundle ~/Vendor/js directory
            //

// Bundle path: ~/bundle/vendor/js/{filename}
            foreach (string[] bundleFile in GetVendorBundles("js", "js", "**/*", "js"))
            {
                bundles.Add(new Bundle(bundleFile[0]).Include(bundleFile[1]));
            }

// ------------------------------------------------------------------------------------
            // Automatically bundle ~/Vendor/css/pages directory
            //

// Bundle path: ~/bundle/vendor/css/pages/{filename}
            foreach (string[] bundleFile in GetVendorBundles("css\\pages", "css/pages", "**/*", "scss"))
            {
                bundles.Add(SassBundle(bundleFile[0]).Include(bundleFile[1]));
            }

// ------------------------------------------------------------------------------------
            // Automatically bundle ~/Vendor/fonts directory
            //

// Bundle path: ~/bundle/vendor/fonts/{filename}
            foreach (string[] bundleFile in GetVendorBundles("fonts", "fonts", "*", "css"))
            {
                bundles.Add(new Bundle(bundleFile[0]).Include(bundleFile[1], new CssRewriteUrlTransformWrapper()));
            }

// ------------------------------------------------------------------------------------
            // Automatically bundle ~/Vendor/libs directory
            //

// Bundle path: ~/bundle/vendor/css/{libdir}/{filename}
            foreach (string[] bundleFile in GetVendorBundles("libs", "css", "**/*", "scss"))
            {
                if (bundleFile[2] == "true")
                {
                    bundles.Add(SassBundle(bundleFile[0]).Include(bundleFile[1], new CssRewriteUrlTransformWrapper()));
                }
                else
                {
                    bundles.Add(SassBundle(bundleFile[0]).Include(bundleFile[1]));
                }
            }

// Bundle path: ~/bundle/vendor/js/{libdir}/{filename}
            foreach (string[] bundleFile in GetVendorBundles("libs", "js", "**/*", "js"))
            {
                bundles.Add(new Bundle(bundleFile[0]).Include(bundleFile[1]));
            }

}

private static Bundle SassBundle(string path)
        {
            return new CustomStyleBundle(path)
            {
                Orderer = new NullOrderer()
            };
        }

private static string[][] GetVendorBundles(string sourcePath, string bundlePath, string globPattern, string ext)
        {
            // Application root directory path
            string APP_PATH = AppDomain.CurrentDomain.BaseDirectory;
            //

DirectoryInfo dirInfo = new DirectoryInfo(APP_PATH + "\\Vendor\\" + sourcePath);
            IEnumerable<FileInfo> contents = dirInfo.GlobFiles(globPattern + "." + ext);

List<string[]> bundles = new List<string[]>();

Regex normalizeRegex = new Regex("\\\\");

sourcePath = normalizeRegex.Replace(sourcePath, "/") + "/";

Regex pathRegex = new Regex(".*?" + Regex.Escape("/Vendor/" + sourcePath));
            Regex nameRegex = new Regex("\\." + Regex.Escape(ext) + "$");

Regex urlRewriteTestRegex = new Regex("/(" +
                    "minicolors/minicolors" + "|" +
                    "blueimp-gallery/gallery-video" + "|" +
                    "blueimp-gallery/gallery" + "|" +
                    "jstree/themes/default/style" + "|" +
                    "jstree/themes/default-dark/style" + "|" +
                    "photoswipe/photoswipe" +
                ")\\.scss$");

foreach (FileInfo file in contents)
            {
                string filePath = pathRegex.Replace(normalizeRegex.Replace(file.FullName, "/"), "");
                string relativeBundlePath = "~/bundle/vendor/" + bundlePath + "/" + nameRegex.Replace(filePath, "");
                string relativeSourcePath = "~/Vendor/" + sourcePath + filePath;
                bool urlRewrite = urlRewriteTestRegex.IsMatch(relativeSourcePath);

bundles.Add(new string[] { relativeBundlePath, relativeSourcePath, urlRewrite ? "true" : "false" });
            }

return bundles.ToArray();
        }

}
}

<!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>@ViewBag.Title - Asp.Net MVC Starter</title>

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

@Styles.Render("~/bundle/vendor/fonts/ionicons")

{% if settingsPanel -%}
    @Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-bootstrap-css"" />", "~/bundle/vendor/css/bootstrap{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}")
    @Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-appwork-css"" />", "~/bundle/vendor/css/appwork{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}")
    @Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-theme-css"" />", "~/bundle/vendor/css/theme-{{theme}}{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}")
    @Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-colors-css"" />", "~/bundle/vendor/css/colors{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}")
    {%- else -%}
    @Styles.Render("~/bundle/vendor/css/bootstrap{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}")
    @Styles.Render("~/bundle/vendor/css/appwork{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}")
    @Styles.Render("~/bundle/vendor/css/theme-{{theme}}{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}")
    @Styles.Render("~/bundle/vendor/css/colors{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}")
    {%- endif %}
    @Styles.Render("~/bundle/vendor/css/uikit")

@Scripts.Render("~/bundle/vendor/js/polyfills")
    <script>document['documentMode']===10&&document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=Intl.~locale.en"><\/script>')</script>

{% if materialRipple %}
    
    @Scripts.Render("~/bundle/vendor/js/material-ripple")
    {%- endif %}
    {% if materialRipple and not settingsPanel -%}
    <script>window.attachMaterialRippleOnLoad();</script>
    {% endif %}

{% if pageLayout != 'blank' or settingsPanel %}
    
    @Scripts.Render("~/bundle/vendor/js/layout-helpers")
    {%- endif %}

{% if settingsPanel %}
    
    @Scripts.Render("~/bundle/vendor/js/theme-settings")
    <script>
        // Use settings panel generator to configure the plugin
        window.themeSettings = new ThemeSettings({
            cssPath: '',
            themesPath: '',
            {%- if styles.length < 3 %}
            styles: ['{{ styles.join("', '")|safe }}'],
            {%- endif %}
            pathResolver: function (path) {
                var resolvedPaths = {
                    @foreach (string name in new string[] { "bootstrap", "appwork", "colors" })
                    {
                        <text>
                            {%- for styleName in styles %}
                            '@(name){% if styleName == 'material' %}-material{% elif styleName == 'dark' %}-dark{% endif %}.css': '@Styles.Url("~/bundle/vendor/css/" + name{% if styleName == 'material' %} + "-material"{% elif styleName == 'dark' %} + "-dark"{% endif %})',
                            {%- endfor %}
                        </text>
                    }

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

@foreach (string name in new string[] { "air", "corporate", "cotton", "gradient", "paper", "shadow", "soft", "sunrise", "twitlight", "vibrant" })
                    {
                        <text>
                            {%- for styleName in styles %}
                            'theme-@(name){% if styleName == 'material' %}-material{% elif styleName == 'dark' %}-dark{% endif %}.css': '@Styles.Url("~/bundle/vendor/css/theme-" + name{% if styleName == 'material' %} + "-material"{% elif styleName == 'dark' %} + "-dark"{% endif %})',
                            {%- endfor %}
                        </text>
                    }
                };

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

{% if paceLoader %}
    
    @Scripts.Render("~/bundle/vendor/js/pace")
    {% endif %}

{% if pageLayout != 'blank' and pageLayout != 'without-sidenav' %}
    
    
    @Styles.Render("~/bundle/vendor/css/perfect-scrollbar/perfect-scrollbar")
    {% endif %}

@Styles.Render("~/bundle/css/main")

@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>

@Scripts.Render("~/bundle/vendor/js/popper/popper")
    @Scripts.Render("~/bundle/vendor/js/bootstrap")
    {%- if pageLayout != 'blank' and pageLayout != 'without-sidenav' %}
    @Scripts.Render("~/bundle/vendor/js/sidenav")
    {%- endif %}

{% if pageLayout != 'blank' and pageLayout != 'without-sidenav' %}
    
    
    @Scripts.Render("~/bundle/vendor/js/perfect-scrollbar/perfect-scrollbar")
    {% endif %}

@Scripts.Render("~/bundle/js/main")

@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">
    
    @Html.ActionLink("Asp.Net MVC Starter", "Index", "Home", null, new { @class = "navbar-brand" })

@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>

@{bool isHorizontal = ViewData["LayoutSidenavHorizontal"] != null && ViewData["LayoutSidenavHorizontal"].ToString() == "True";}
@{string currentPage = ViewContext.RouteData.Values["Controller"].ToString() + "/" + ViewContext.RouteData.Values["Action"].ToString();}

<div id="layout-sidenav" class="@(isHorizontal ? "layout-sidenav-horizontal sidenav-horizontal container-p-x flex-grow-0" : "layout-sidenav sidenav-vertical") sidenav bg-{{sidenavBg}}">
    
    <ul class="sidenav-inner@(!isHorizontal ? " py-1" : "")">
        <li class="sidenav-item@(currentPage == "Home/Index" ? " active" : "")">
            <a href="@Url.Action("Index", "Home")" class="sidenav-link"><i class="sidenav-icon ion ion-ios-contact"></i><div>Home</div></a>
        </li>
        <li class="sidenav-item@(currentPage == "Page2/Index" ? " active" : "")">
            <a href="@Url.Action("Index", "Page2")" class="sidenav-link"><i class="sidenav-icon ion ion-md-desktop"></i><div>Page 2</div></a>
        </li>
    </ul>
</div>

$enable-rtl-support: {% if rtlSupport %}true{% else %}false{% endif %};
$enable-light-style: {% if (not settingsPanel and style == 'light') or (settingsPanel and styles.indexOf('light') !== -1) %}true{% else %}false{% endif %};
$enable-material-style: {% if (not settingsPanel and style == 'material') or (settingsPanel and styles.indexOf('material') !== -1) %}true{% else %}false{% endif %};
$enable-dark-style: {% if (not settingsPanel and style == 'dark') or (settingsPanel and styles.indexOf('dark') !== -1) %}true{% else %}false{% endif %};

@mixin feature-ltr($as-child: true) {
  @if $enable-rtl-support {
    @if $as-child {
      html:not([dir=rtl]) & { @content; }
    } @else {
      html:not([dir=rtl]) { @content; }
    }
  } @else {
    @content;
  }
}

@mixin feature-ltr-style() {
  @if $enable-rtl-support {
    &:not([dir=rtl]) { @content; }
  } @else {
    @content;
  }
}

@mixin feature-rtl($as-child: true) {
  @if $enable-rtl-support {
    @if $as-child {
      [dir=rtl] & { @content; }
    } @else {
      [dir=rtl] { @content; }
    }
  }
}

@mixin feature-rtl-style() {
  @if $enable-rtl-support {
    &[dir=rtl] { @content; }
  }
}