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">
<meta name="keywords" content="app, responsive, jquery, bootstrap, dashboard, admin">
<title>Angle - Bootstrap Admin Template</title>
<!-- =============== VENDOR STYLES ===============-->
<link href="@Styles.Url("~/Vendor/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css")" rel="stylesheet" />
<link href="@Styles.Url("~/Vendor/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css")" rel="stylesheet" />
<link href="@Styles.Url("~/Vendor/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css")" rel="stylesheet" />
<link href="@Styles.Url("~/Vendor/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css")" rel="stylesheet" />
<link href="@Styles.Url("~/Vendor/simple-line-icons/css/simple-line-icons.css")" rel="stylesheet" />
<link href="@Styles.Url("~/Vendor/animate.css/animate.css")" rel="stylesheet" />
<link href="@Styles.Url("~/Vendor/whirl/dist/whirl.css")" rel="stylesheet" />
<!-- =============== PAGE VENDOR STYLES =============== -->
@if (IsSectionDefined("Styles"))
{@RenderSection("Styles", required: false)}
<!-- =============== BOOTSTRAP STYLES ===============-->
<link href="@Styles.Url("~/Content/css/bootstrap.css")" rel="stylesheet" type="text/css" id="bscss" />
<!-- =============== APP STYLES ===============-->
<link href="@Styles.Url("~/Content/css/app.css")" rel="stylesheet" type="text/css" id="maincss" />
<link href="@Styles.Url("~/Content/mvc-override.css")" rel="stylesheet" type="text/css" />
</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)}
<!-- =============== VENDOR SCRIPTS ===============-->
<script src="@Scripts.Url("~/Vendor/modernizr/modernizr.custom.js")"></script>
<script src="@Scripts.Url("~/Vendor/jquery/dist/jquery.js")"></script>
<script src="@Scripts.Url("~/vendor/popper.js/dist/umd/popper.js")"></script>
<script src="@Scripts.Url("~/Vendor/bootstrap/dist/js/bootstrap.js")"></script>
<script src="@Scripts.Url("~/Vendor/js-storage/js.storage.js")"></script>
<script src="@Scripts.Url("~/Vendor/jquery.easing/jquery.easing.js")"></script>
<script src="@Scripts.Url("~/Vendor/animo/animo.js")"></script>
<script src="@Scripts.Url("~/Vendor/screenfull/dist/screenfull.js")"></script>
<script src="@Scripts.Url("~/Vendor/jquery-localize/dist/jquery.localize.js")"></script>
<!-- =============== PAGE VENDOR SCRIPTS ===============-->
@RenderSection("scripts", required: false)
<!-- =============== APP SCRIPTS ===============-->
<script src="@Scripts.Url("~/Scripts/app.js")"></script>
</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 not, we haven't used Bundles to includes application or vendor assets in the template. There's no Bundles declared in BundleConfig.cs and this is due to this project handles environment compilation using Gulp.
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 Bundles that are optimized for production releases, instead Gulp will automatically build assets depending on the environment.
This approach is more suitable for integrating modern web technologies and also provides a quick and easy method to stay compatible with latest web features. Said that, Bundles are still available and can be used as usual within this project.
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" />
}
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.
