Starter-kit
Overview
You can use the Starter-kit if you are creating a new project. It will be time-consuming to use the full admin version for a new project as Judia have more than 110 pages.
We have provided all layouts, authentication, error and blank
pages in the Starter-kit with all the packages.
Note
To change the theme of the project, make the necessary modifications in the SCSS (Sass) files.
After making the changes, go to the terminal and run the commands "yarn" and "gulp" to apply the changes.
Views file structure
@{
ViewBag.Title = "Starter";
ViewBag.pTitle = "Dashboard";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-md-5">
<partial name="~/Views/Shared/PageTitle.cshtml"/>
</div><!--end col-->
<div class="col-md-auto ms-auto">
<partial name="~/Views/Shared/Customizer.cshtml"/>
</div><!--end col-->
</div><!--end row-->
</div>
@section scripts{
<!-- App js -->
<script src="~/assets/js/app.js"></script>
}
Layout setup
You can set the default layout in the Views/Shared/_Layout.cshtml
file in
the html tag.
<html data-topbar="light" data-layout-width="fluid" data-card-layout="borderless">
data-layout-width="fluid" | To set fluid layout width. |
---|---|
data-layout-width="boxed" | To set boxed layout width. |
data-card-layout="borderless" | To set borderless card layouts. |
data-card-layout="border" | To set border card layouts. |
data-layout-mode="light" | To set Light layout mode. |
data-layout-mode="dark" | To set Dark layout mode. |
data-layout-mode="brand" | To set Brand layout mode. |
data-layout-position="fixed" | To set layout position Fixed. |
data-layout-position="scrollable" | To set layout position Scrollable. |
data-topbar="light" | To set the Light color of Topbar. |
data-topbar="dark" | To set the dark color of Topbar. |
data-topbar="brand" | To set the brand color of Topbar. |
data-topbar-image="pattern-1" | To set the pattern One of Topbar. |
data-topbar-image="pattern-2" | To set the pattern Two of Topbar. |
data-topbar-image="pattern-3" | To set the pattern Three of Topbar. |
data-preloader="enable" | To enable the preloader on the Page. |
data-preloader="disable" | To disable the preloader on the Page. |