Introduction
The main objective of this article is to design our admin template by ourselves. There are many experts that can do this in 2 to 3 hours.
But there are people struggling at the initial stage.
My aim is to give an idea to create the sample template without buying or without depending on others.
Background
When we design our application, initially, we choose the free template to start or we will buy one.
After developing some sites, I can think that is this the right choice? It could be if we do not need to face any issues.
But instead of buying the template, we could develop our own so that we can handle any issues without asking support from them and there is no need to waste our money either. If you are a client, you can ask a developer to create if they agree not to take more time. May be max 8 hrs :-p. If we are a provider, we can have some sample layout to show to the client.
How to Design?
When we buy some templates, we will see the following things from it:
- Will they give a template for ASP.NET MVC, PHP, Angular, React, or vuejs, etc.
- Will they provide support after we buy the template from them.
- Is the look and feel attractive to our client/customer.
- Will they give support for plugins like chartjs, datatable, highcharts, summernote, input masks, etc. (But this is so funny. Because the plugin like the above are free plugins and available on github. We won't get support from the css template provider for those plugins. The support must be received from them (chartjs, datatable, highcharts) not from the css template provider. Those are free plugins available on the internet. Whoever is interested, they can download and use.)
Is this all necessary to see when we buy the template? Conditionally not (except the look and feel).
The core heart of the template is LAYOUT.
What is a layout?
- Header
- Side bar if needed (could be a top bar)
- Footer if needed
- Content
If you have the above for the necessary device, then it is the easiest thing ever. The content part will take care of everything.
The things we need to worry about are:
- The color combo of the website. The primary, secondary colors of the components.
- The margin, padding, font size and the font family of the website.
Do you think it will be difficult?
If we are familiar with the saas, then bootstrap 4 provides the guidelines about what they have used for primary.
For bootstrap 3, they are providing the interface to customize and download the design.
The following things I am considering for my admin template layout are:
- Bootstrap
- Metis menu for the sidebar layout. - For the time being, I am using this plugin for my side menu. If you search on the internet, you can get the pure CSS for the side menu.
- If we don't want metis menu, then we can use Bootstrap collapse or accordion for the sidebar
- Site.css - Where we will apply the custom styles for the layout.
That's it, you are ready to create your layout.
Now I will guide you to create the layout using Bootstrap 4.
First, I will split the browser in two sections:
- Page header - I have used a fixed header. You can remove this fixed-top if you want.
- Page container
- Splitting the page container to two parts:
side-menupage-content-wrapper
The overall layout is in the body:
<body>
<!--
<div id="page-header" class="fixed-top"> </div>
<!--
<div id="page-container">
<!--
<aside id="side-menu"></aside>
<!--
<div id="page-content-wrapper" >
<div class="container-fluid"> </div>
</div>
</div>
</body>
We are ready for the layout. Now we have to set the sidebar height and the content height.
Here, I have used the container-fluid from the bootstrap. This will occupy the parent div width. So that every component of bootstrap will fit into the container without any issues.
Now I am going to copy the navigation bar from the bootstrap into the page header. This is the default navigation bar. If we want anything personally, without this, we can inject here.
Page Header
<!--
<nav class="navbar navbar-light bg-faded navbar-toggleable-md">
<!--
<button class="navbar-toggler navbar-toggler-right" type="button"
data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--
<a class="navbar-brand" href="#">
<img src="images/bootstrap-solid.svg" width="30" height="30"
class="d-inline-block align-top" alt="">
Bootstrap
</a>
<!--
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Institution</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Alumni</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Contact</a>
</li>
</ul>
</div>
<div class="logout-button">
<i class="fa fa-sign-out fa-lg"></i>
</form>
</nav>
Here, I have copied the navigation bar from the bootstrap. So I don't have to code separately on my own.
If you need, you can replace your own code.
navbar-toggler will be shown for the medium device.navbar-toggler is pointing to the navbarCollapse. So when the medium device is identified, the navbarCollapse will be hidden and the navbar-toggler will be used to show the navbarCollapse.logout-button has been moved out from the navbar-collapse. So that this will be always shown to the user to log out.- In
navbar, ml-auto (margin left auto) has been used to align the menu to the right. If you want to align left, we can use mr-auto (margin right auto)
I don't like the default style of bootstrap navigation bar. So I want to change the navigation bar style to look different.
Here, I have used the following CSS to change the style of the navigation bar (site.css).
#page-header .navbar{
background-color: #FFFFFF;
border: 1px solid #DDD;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2)
}
Positioning the Log Out Button for the Devices
If we see the log out button, that will not be positioned properly for the mobile devices.
So I am going to set for the mobile devices first and then I will leave the log out design as it is for the other devices.
In the Mobile First Design, we don't have to bother about the media queries we need to design. So apply your style without media queries for the mobile device.
.logout-button{
position: absolute;
right: 5rem;
padding: .25rem .75rem;
font-size: 1.25rem;
margin-top: 0!important;
}
So the above CSS will be applied and will position the log out button to the right of the bar.
But for me, it should be positioned with the toggler. So I have mentioned the right value based on the toggler.
I need to know when the toggler has been hidden. So that I can apply the normal design for the logout button for that media queries. I have used chrome debugger and detected the following media queries and applied the css.
@media (min-width: 992px)
{
.logout-button{
position: initial;
}
}
Hurray! We have completed the header part.
Content
Now we have to set the content part.
For the content part, we need to concentrate on two things.
- Side menu
- Main content part
<div id="page-container">
<!--
<aside id="side-menu">
<nav class="sidebar-nav">
<ul class="metismenu" id="menu1">
<li class="">
<a class="has-arrow" href="#" aria-expanded="false">
<span class="fa fa-fw fa-github fa-lg"></span>
metisMenu
</a>
<ul aria-expanded="false" class="collapse" style="height: 0px;">
<li>
<a href="https://github.com/onokumus/metisMenu">
<span class="fa fa-fw fa-code-fork"></span> Fork
</a>
</li>
<li>
<a href="https://github.com/onokumus/metisMenu">
<span class="fa fa-fw fa-star"></span> Star
</a>
</li>
<li>
<a href="https://github.com/onokumus/metisMenu/issues">
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
</a>
</li>
</ul>
</li>
<li>
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
<ul aria-expanded="false" class="collapse">
<li><a href="#">item 0.1</a></li>
<li><a href="#">item 0.2</a></li>
<li><a href="http://onokumus.com">onokumus</a></li>
<li><a href="#">item 0.4</a></li>
</ul>
</li>
<li id="removable">
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
<ul aria-expanded="false" class="collapse">
<li><a href="#">item 1.1</a></li>
<li><a href="#">item 1.2</a></li>
<li>
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.3</a>
<ul aria-expanded="false" class="collapse">
<li><a href="#">item 1.3.1</a></li>
<li><a href="#">item 1.3.2</a></li>
<li><a href="#">item 1.3.3</a></li>
<li><a href="#">item 1.3.4</a></li>
</ul>
</li>
<li><a href="#">item 1.4</a></li>
<li>
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
<ul aria-expanded="false" class="collapse">
<li><a href="#">item 1.5.1</a></li>
<li><a href="#">item 1.5.2</a></li>
<li><a href="#">item 1.5.3</a></li>
<li><a href="#">item 1.5.4</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
<ul aria-expanded="false" class="collapse">
<li><a href="#">item 2.1</a></li>
<li><a href="#">item 2.2</a></li>
<li><a href="#">item 2.3</a></li>
<li><a href="#">item 2.4</a></li>
</ul>
</li>
</ul>
</nav>
</aside>
<!--
<!--
<div id="page-content-wrapper" >
<div class="container-fluid">
<div class="hero-image-wrapper">
<div class="hero-image">
</div>
<div class="hero-text">
<h1 class="display-5">Welcome</h1>
<p>
Bootstrap is the most popular HTML, CSS,
and JS framework in the world for building responsive,
mobile-first projects on the web.
</p>
</div>
</div>
</div>
</div>
<!--
</div>
If we leave our application as it is and if we don't have the content, we may not get a proper design.
We need to do the following for the content set up.
- Set the position for the side bar and the page container. So that they will stand parallely.
- Set the margin for the page container based on the page header. So that the container will start exactly next to the page header
- Set the minimum height for the page container and the main page content wrapper. So that even if we don't have the content, it will look good in the design.
- Set the color for the HTML and the content. So that the side bar and the content will look a like parallel.
Content - Side menu - Set the position for the side bar and the page container
For the side menu, we can decide how much length should be there.
For the content wrapper:
To the medium device, the content will occupy full width and for the desktop device, the content width will be based on the side menu.
So here you can notice that I have used margin left and the width properly for the page content wrapper.
Page content margin left is side menu's width.
#side-menu {
width: 250px;
position: absolute;
min-height: 100%;
background-color: #212529;
top: 0;
left: 0;
}
#page-content-wrapper {
position: relative;
margin-left: 0;
padding-top: 0.9rem;
padding-bottom: 0.9rem;
}
@media (min-width: 992px) {
#page-content-wrapper {
margin-left: 250px;
width: calc(100% - 250px);
}
}
WE ARE NEAR TO COMPLETION.
We need to set the min-height of the page-content-wrapper. I have used the min-height instead of height. Because we may not know what will be the content for our application. So I have decided a minimum to be the browser height. Maximum, it can be expanded to any level based on the content. For this, we can get the help from jquery.
If you prefer JavaScript, that's fine.
$(document).ready(function () {
$('#side-menu').metisMenu();
function init() {
setPageProperties();
onWindowResize();
}
function setPageProperties() {
$('#page-container').css("margin-top", $('#page-header').height());
$('#side-menu').css("padding-top", $('#page-header').height() + 2);
setContentHeight();
}
function onWindowResize() {
$(window).on('resize', function () {
setContentHeight();
});
}
function setContentHeight() {
var windowHeight = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height);
var contentHeight = (windowHeight - ($('#page-header').height() + 20));
$('#page-container').css('min-height', (windowHeight - ($('#page-header').height() + 2)));
$('#page-content-wrapper').css('min-height', (windowHeight - ($('#page-header').height() + 2)));
}
init();
});
Here, I have used window resize event. To calculate whenever the window has been resized. Because in mobile device, we may use portrait or landscape. On that time, if the height has been set, then for another, the look of the content may defer if we have different color for the html, body and the content.
We can use any browser debugger to decide how much should be added to the page header.
The container height should be calculated based on the page header. So that we won't get the scroll bar even if we don't have content.
WE HAVE COMPLETED 1,2 AND 3 FOR THE SET UP.
Now we have to give the final touch on the color for the side bar and the content. So that the sidebar and the content will not look different.
The side bar and the body will have the same color.
The page content and the html will have the same color.
#side-menu, body {
background-color: #212529;
}
html, #page-content-wrapper {
background-color: #fff;
}
:-) Now Relax yourself. We have done everything except how the side bar should look in the medium devices and how to show and hide.
I have set the side menu index to 1 and by default set left to -250px (width of side bar) for the medium device.
Instead of displaying none, I have used left in negative values. For animation purposes, I have used.
By default, it will be hidden for the medium device. For the other device, we force the element to visible.
#side-menu { z-index:1; left: -250px; }
#side-menu.show{
display:block;
left:0;
transition: left .5s ease;
}
@media (min-width: 992px) {
#side-menu { display:block;z-index:0; left:0; }
}
Now I am going to introduce a separate toggle for the side bar (Side menu). This will be used to show and hide the side bar in the medium device. Based on our need, we can position anywhere near the brand icon. So I have added the side menu toggler to the nav-brand icon and added the necessary CSS to position and JS to show and hide.
- Add side bar toggler by the side of nav brand
- Add CSS to show to the medium device and hide to the other device
- On side bar toggle click, show and hide the side bar.
<!-- HTML WOULD BE LIKE THE FOLLOWING. - I have used the pure css hamburger.
You can use whatever you want-->
<div class="sidebar-toggler hamburger hamburger--arrowturn-r is-active"
data-toggle="collapse" data-showTarget="#side-menu">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<a class="navbar-brand" href="#">
<img src="images/bootstrap-solid.svg" width="30" height="30"
class="d-inline-block align-top" alt="">
Bootstrap
</a>
<!--CSS WOULD BE LIKE THE FOLLOWING-->
.sidebar-toggler{
display:block;
position: absolute;
left: 0;
top: 0;
}
@media (min-width: 992px) {
.sidebar-toggler{
display:none;
}
}
<!-- JS WOULD BE LIKE THE FOLLOWING -->
$('.sidebar-toggler').on('click',function(){
$(this).toggleClass('is-active');
debugger
$($(this).data().showtarget).toggleClass('show');
});
We have done everything. We can test our layout in all the devices.
Thanks to:
Points of Interest
In this article, we've discussed how to design the layout for admin template.
For the admin CSS template, we need to have only the good layout which will adopt to all the devices. The remaining is when we develop that will differ based on the application.
Second thing, the color combo of the compononents.
If we have the above two, then we do not need to worry about anything.
We don't need to waste our money or depend on another person for the design.
Note: Here, I have attached the design template. If you want to change color of the layout, you can do. If you don't have an idea, you can refer to some paid components color combo.
If anyone needs guidance for the CSS template using bootstrap 3 or other framework, please give your comments. I will update for that too.
