Layout
The theme uses a main layout to set the main elements, like Sidebar, Offsidebar, Header, etc. and it's the entry point of the presented structure.
Each partial file used is present in the same folder.
Views/Shared/_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Bootstrap Admin App + jQuery">
<meta name="keywords" content="app, responsive, jquery, bootstrap, dashboard, admin">
<title>@ViewData["Title"] - Bootstrap Admin Template</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Place styles for plugins -->
@if (IsSectionDefined("Styles"))
{@RenderSection("Styles", required: false)}
<environment names="Development">
<!-- =============== VENDOR STYLES ===============-->
<link href='~/vendor/@@fortawesome/fontawesome-free-webfonts/css/fa-brands.css' rel="stylesheet" />
<link href='~/vendor/@@fortawesome/fontawesome-free-webfonts/css/fa-regular.css' rel="stylesheet" />
<link href='~/vendor/@@fortawesome/fontawesome-free-webfonts/css/fa-solid.css' rel="stylesheet" />
<link href='~/vendor/@@fortawesome/fontawesome-free-webfonts/css/fontawesome.css' rel="stylesheet" />
<link href="~/vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" />
<link href="~/vendor/animate.css/animate.css" rel="stylesheet" />
<link href="~/vendor/whirl/dist/whirl.css" rel="stylesheet" />
<!-- =============== BOOTSTRAP STYLES ===============-->
<link href="~/css/bootstrap.css" rel="stylesheet" id="bscss" />
<!-- =============== APP STYLES ===============-->
<link href="~/css/app.css" rel="stylesheet" asp-append-version="true" id="maincss" />
</environment>
<environment names="Staging,Production">
<!-- =============== VENDOR STYLES ===============-->
<link href='~/vendor/@@fortawesome/fontawesome-free-webfonts/css/fa-brands.css' rel="stylesheet" />
<link href='~/vendor/@@fortawesome/fontawesome-free-webfonts/css/fa-regular.css' rel="stylesheet" />
<link href='~/vendor/@@fortawesome/fontawesome-free-webfonts/css/fa-solid.css' rel="stylesheet" />
<link href='~/vendor/@@fortawesome/fontawesome-free-webfonts/css/fontawesome.css' rel="stylesheet" />
<link href="~/vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" />
<link href="~/vendor/animate.css/animate.min.css" rel="stylesheet" />
<link href="~/vendor/whirl/dist/whirl.css" rel="stylesheet" />
<!-- =============== BOOTSTRAP STYLES ===============-->
<link href="~/css/bootstrap.css" rel="stylesheet" id="bscss" />
<!-- =============== APP STYLES ===============-->
<link href="~/css/app.css" rel="stylesheet" asp-append-version="true" id="maincss" />
</environment>
</head>
<body>
<div class="wrapper">
<!-- top navbar-->
<header class="topnavbar-wrapper">
@Html.Partial("_TopNavbar")
</header>
<!-- sidebar-->
<aside class="aside-container">
@Html.Partial("_Sidebar")
</aside>
<!-- offsidebar-->
<aside class="offsidebar d-none">
@Html.Partial("_Offsidebar")
</aside>
<!-- Main section-->
<section class="section-container">
<!-- Page content-->
<div class="content-wrapper">
@RenderBody()
</div>
</section>
<!-- Page footer-->
<footer class="footer-container">
@Html.Partial("_Footer")
</footer>
</div>
@if (IsSectionDefined("BodyArea")) {
@RenderSection("BodyArea", required: false)
}
<environment names="Development">
<!-- =============== VENDOR SCRIPTS ===============-->
<script src="~/vendor/modernizr/modernizr.custom.js"></script>
<script src="~/vendor/jquery/dist/jquery.js"></script>
<script src="~/vendor/popper.js/dist/umd/popper.js"></script>
<script src="~/vendor/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/vendor/js-storage/js.storage.js"></script>
<script src="~/vendor/jquery.easing/jquery.easing.js"></script>
<script src="~/vendor/animo/animo.js"></script>
<script src="~/vendor/jquery-slimscroll/jquery.slimscroll.js"></script>
<script src="~/vendor/screenfull/dist/screenfull.js"></script>
<script src="~/vendor/jquery-localize/dist/jquery.localize.js"></script>
<!-- =============== PAGE VENDOR SCRIPTS ===============-->
@RenderSection("scripts", required: false)
<!-- =============== APP SCRIPTS ===============-->
<!-- App init -->
<script src="~/master/js/app.init.js"></script>
<!-- Modules -->
<script src="~/master/js/modules/charts/chart-knob.js"></script>
<script src="~/master/js/modules/charts/chart.js"></script>
# ... APPLICATION SCRIPTS BY FILE
</environment>
<environment names="Staging,Production">
<!-- =============== VENDOR SCRIPTS ===============-->
<script src="~/vendor/modernizr/modernizr.custom.js"></script>
<script src="~/vendor/jquery/dist/jquery.js"></script>
<script src="~/vendor/popper.js/dist/umd/popper.js"></script>
<script src="~/vendor/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/vendor/js-storage/js.storage.js"></script>
<script src="~/vendor/jquery.easing/jquery.easing.js"></script>
<script src="~/vendor/animo/animo.js"></script>
<script src="~/vendor/jquery-slimscroll/jquery.slimscroll.js"></script>
<script src="~/vendor/screenfull/dist/screenfull.js"></script>
<script src="~/vendor/jquery-localize/dist/jquery.localize.js"></script>
<!-- =============== PAGE VENDOR SCRIPTS ===============-->
@RenderSection("scripts", required: false)
<!-- =============== APP SCRIPTS ===============-->
<script src="~/js/app.js"></script>
</environment>
</body>
</html>
This file app.js is generated by a concat task in the gulpfile.
Similarly, the file app.css is generating by compiling SASS style-sheets with gulp.
The "BodyArea" section can be used to add code directly as a body child, like for example with modasl which needs to be placed outside the layout structure in order to overlap content with the backdrop.
Finally, the @RenderBody() section is where each of the rest of the Views content is placed once the template is served.
Environments
As you can note, VS2017 incorporates a different technique to include assets, there's no more bundles but instead you have to use tags to includes files for different environments
To change environments, please check this official post
The example above is resumed, but you can see that for development we have included each script file for the application and for the Staging/Production there only the app.js
Gulp Environments
Since we use Gulp to compile assets based on the environment, it will automatically compress for production, which means that on a production release the files served will be automatically optimized.
In other words, with this setup it's not required to use the environment tag to include a "normal" and "min" version of the same file for different environments.
Other layouts
The page layout. uses the @RenderBody() to include the page content within the main wrapper, using different layout files you can change how each View is presented, for example for user pages, like login, register, etc, and variants like the horizontal layout.
Angle/Views/Shared/_LayoutPage.cshtml
To enable this layout, you can check the file under the folder VIews/Pages. Basically, they redeclare the layout option with
@{ Layout = "~/Views/Shared/_LayoutPage.cshtml";}
Layout horizontal
This layout is placed in file Angle/Views/Shared/_LayoutHorizontal.cshtml and can be used adding the following at the top of the view
@{ Layout = "~/Views/Shared/_LayoutHorizontal.cshtml";}
The horizontal layout use a different version of the topnavbar because is doesn't have a sidebar and instead it shows the menu entries in the header area.
New vendor assets
To add new third party assets, you can install using npm and the reference in the vendor.json file
npm install something -S
- Flag "-S" is to save the dependency in package.json
Edit vendor.json and add the paths of files you want to use
"node_modules/something/some/file.js",
"node_modules/something/some/file.css",
"node_modules/something/some/**/*",
Note that you can use wild-cards when you need for example copy a set of images or fonts files.
Finally, reference the new files in the template. For example,
@section Scripts {
<script src="~/vendor/something/some/file.js"></script>
}
@section Styles {
<link href="~/vendor/something/some/file.css" rel="stylesheet" />
}
You can also use the the environment tags to separate files included for different environments.
Modernizr
Modernizr build is generated after the command npm install ends. Specifically, using the postinstall script in package.json which at the same time executes the "modernizr" responsible for generating the file modernizr.custom.js under folder node_modules/modernizr. This way we can use modernizr script as if it was a standard package from npm.
The configuration of the Modernizr build can be found in file modernizr-config.json
jQuery and Wrapper script
Starting from version 4.1, this template doesn't need jQuery as a mandatory dependency for core files, this means it is only required when using jQuery based plugins for some features included.
Seed project versions no more include jQuery by default..
The wrapper.js (~ 7k minified) is a new script introduced to emulate some specific jQuery functions used in the template. This made possible to significantly cut the refactoring changes in the code, keeping it readable in a jQuery way and avoiding extra bytes, mainly when loops are repeatedly used to work with multiple elements.
Important The Wrapper script is NOT a replacement for jQuery. All methods were designed for an adequate and specific use and they don't do a deep validation on the arguments provided. It's suggested NOT to use this library extensively. Instead, use pure JS or you might even need jQuery.