.......
Smart - Bootstrap 4 Material Admin Template For School, College & University
version 1.5
Thank You
Thank you for buying Smart and supporting Redstartheme. Feel free to contact me if you have any questions.
Also, email me if you have any feature requests or advices, I'll happy to help you.
Our promise is that Pleasure will be constantly kept up to date.
Thank You.
Overview
- Item Name : Smart University - Bootstrap Admin Template with Material Design Components
- Item Version : v 1.5
- created: 23/01/2018
- latest update: 27/10/2018
- by: RedStarTheme
- email: redstartheme@gmail.com
Introduction #back to top
The Smart University - Bootstrap 4 Admin Templatehas been designed to reflect the values of beauty and simplicity. Smart have also Material Design components, which you can use in your application.
Smart is a lightweight and easy to use, clean and polished, resourceful and reliable, responsive HTML5 and Bootstrap 4 admin template.It works natively on mobile devices, making it an accessible way of managing your own website from wherever you are.
Folder Structure #back to top
Smart/
Documentation/ ├── css/ ├── Fonts/ └── Images/ └── Js/ └── index.html/ Source/ └── assets/ └── css/ └── img/ └── js/ └── plugins/ └── dark/ └── css/ └── fonts/ └── .html/ └── light/ └── css/ └── fonts/ └── .html/
Installation #back to top
Smart comes with 8 different layouts like default, RTL, dark, boxed, collapse, full width, right sidebar, hover sidebar, you can choose as per your choice.
You just need to chose your desire layout folder with assets folder and paste in your location.
Custom Theme #back to top
The Smart comes with 21 different combinations themes, User can select any theme as per her/his choice.
You need to change classes for sidebar, header & logo header in body tag.
Key point in Smart is the custom theme, You cam set ANY COLOR theme of your choice.
You need to change in theme-color.css file in css folder. You can set color for --sidebar-color
--sidebar-font-color --logo-color --header-color value as per your choice, and add classes in body tag
.custom-sidebar-color for sidebar, .logo-custom for logo header color & .header-custom for header color. Thats it !!!
Template Structure#back to top
Template Structure
This template is fully responsive and fluid layout. Following are the general structures.
Page Head
Below code is used at the beginning of all HTML pages
<!DOCTYPE html> <html lang="en"> <head>Smart University | Bootstrap Responsive Admin Template <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" type="text/css" /> <link href="../assets/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" /> <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"/> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="../assets/plugins/material/material.min.css"> <link rel="stylesheet" href="../assets/css/material_style.css"> <link href="../assets/css/theme/light/theme_style.css" rel="stylesheet" id="rt_style_components" type="text/css" /> <link href="../assets/css/theme/light/style.css" rel="stylesheet" type="text/css" /> <link href="../assets/css/plugins.min.css" rel="stylesheet" type="text/css" /> <link href="../assets/css/responsive.css" rel="stylesheet" type="text/css" /> <link href="../assets/css/theme/light/theme-color.css" rel="stylesheet" type="text/css" /> </head>
Main Structure
Following are the markup of main structure.
Left Side
Following are the markup of left side. Which contains logo and side bar navigation.
- ............Sidebar Menu ........
............
Left Navigation Menu
Following are the markup of left navigation. All Pages can be navigate using Left Navigation Sidebar.
-
............
....................
.............. Sidebar Menu ..............
Quick Sidebar
In Quick sidebar chat & setting tab are available, using that you can chat with user and setting tab is used for layout related setting in application.
Online
- ............
John Deo
Spine SurgeonOffline
- ........Offline contact.........
4
Jennifer Maklen
NurseLast seen 01:20 AM..........chat conversation........
Header
Header section structure are as follows. Which contains toggle button, Language sections, and notifications.
English
Activate parent
To activate Parent Menu have to add class "active".
Activate parent & sub menu
To activate Parent Menu with Sub Menu have to add "active" class and "selected" in span.
Material Design Template#back to top
Require Plugins
For use material design component you just required to add plugins in template. Followings are require plugins for material design template
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/> <link rel="stylesheet" href="../assets/plugins/material/material.min.css"/> <link rel="stylesheet" href="../assets/css/material_style.css"/> <link rel="stylesheet" href="../assets/plugins/material-datetimepicker/bootstrap-material-datetimepicker.css" /> <script src="../assets/plugins/material/material.min.js"></script/> <script src="../assets/js/pages/material-select/getmdl-select.js" type="text/javascript"></script> <script type="text/javascript" src="../assets/plugins/material-datetimepicker/moment-with-locales.min.js"></script> <script type="text/javascript" src="../assets/plugins/material-datetimepicker/bootstrap-material-datetimepicker.js"></script> <script type="text/javascript" src="../assets/plugins/material-datetimepicker/datetimepicker.js"></script>
Layouts#back to top
You can visible the top header, left side and footer fixed to its position.You can also change this from setting tab of chat panel.
Boxed Layout
To enable boxed layout please add class .page-boxed to body tag.
Sidebar Collapse Layout
To enable collapsed layout please add class .sidemenu-closed to body tag.
Dark Theme
To enable dark layout please add class .dark-theme to body tag.
Horizontal Layout
To enable horizontal layout please add class .page-full-width to body tag.
Hover Sidebar Layout
To enable hover sidebar layout please add class .sidemenu-hover-submenu in ui tag in sidebar .
Right Sidebar Layout
To enable right sidebar layout please add class .sidemenu-container-reversed in body tag.
Fixed Header
To enable fixed header please add class navbar-fixed-top in page-header div tag.
<body class="navbar-fixed-top">
Fixed Footer
To enable fixed footer please add class page-footer-fixed to body tag.
CSS #back to top
CSS files are in the css/ folder in asset folder. Smart built on Twitter Bootstrap 4 framework.
The below code should be included in every pages in the <head> tag
<link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="../assets/plugins/material/material.min.css"> <link rel="stylesheet" href="../assets/css/material_style.css"> <link href="../assets/css/theme/light/theme_style.css" rel="stylesheet" id="rt_style_components" type="text/css" /> <link href="../assets/css/theme/light/style.css" rel="stylesheet" type="text/css" /> <link href="../assets/css/plugins.min.css" rel="stylesheet" type="text/css" /> <link href="../assets/css/responsive.css" rel="stylesheet" type="text/css" /> <link href="../assets/css/theme/light/theme-color.css" rel="stylesheet" type="text/css" />
JavaScript#back to top
All javascript files are in the js/ folder in assets folder.
Following js code should be included in every page before the <body> tags.
<script src="../assets/plugins/jquery/jquery.min.js" ></script> <script src="../assets/plugins/popper/popper.js" ></script> <script src="../assets/plugins/jquery-blockui/jquery.blockui.min.js" ></script> <script src="../assets/plugins/jquery-slimscroll/jquery.slimscroll.js"></script> <script src="../assets/plugins/bootstrap/js/bootstrap.min.js" ></script> <script src="../assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js" ></script> <script src="../assets/js/app.js" ></script> <script src="../assets/js/layout.js" ></script> <script src="../assets/js/theme-color.js" ></script> <script src="../assets/plugins/material/material.min.js"></script>
New Page #back to top
To create a new page, you can use blank_page.html And For Material Design page you can use material_blank.html which provides basic page layout which you can extend and modify further.
Fonts #back to top
Smart uses Poppins font from google fonts.
<https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" type="text/css" />
Credits #back to top
Below is the list of all plugins and external resources used to power this template.
- Bootstrap
- jquery
- jQuery UI
- Material Design Lite
- bootstrap-datepicker
- bootstrap-colorpicker
- bootstrap-timepicker
- bootstrap-daterangepicker
- bootstrap-datetimepicker
- bootstrap-treeview
- X-editable
- bootstrap-switch
- bootstrap-tabdrop
- twitter-bootstrap-wizard
- bootstrap-wysihtml5
- chartjs
- Material Select Item
- Counter-Up
- datatables
- dropzonejs
- echarts
- fullcalendar
- gmaps
- jQuery-File-Upload
- morris
- flotcharts
- jqueryui
- jquery-tags-input
- jquery-validation
- jqvmap
- Moment.js
- owl-carousel
- select2
- fontawesome
- simplelineicons
- jQuery Sparklines
- Summernote
- jquery Slimscroll
Version History (Changelog) #back to top
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme.
Changelog
-----------------------------------------------------------------------------------------
Version 1.5 - October 27th, 2018
-----------------------------------------------------------------------------------------
-- Add RTL Full Version Template
-- Add Export Data Table Page
-- Add Child Row Data Table Page
-- Minor Bug Solve
-----------------------------------------------------------------------------------------
Version 1.4 - September 18th, 2018
-----------------------------------------------------------------------------------------
-- Update bootstrap 4.1.3
-- Change full layout menu options
-- Date time picker bug solve
-- Form elements bug solve
-- Offline simple line icons
-----------------------------------------------------------------------------------------
Version 1.3 - June 16th, 2018
-----------------------------------------------------------------------------------------
-- Update Bootstrap Version 4.0 to Bootstrap 4.1.1.
-- Update Jquery version 3.2.1 to 3.3.1.
-- Add Left Menu Scrollbar.
-- Data Table Width Bug Solve.
-- Full Screen Scroll Bug Solve.
-- Add new pages sign_up.html & forgot_password.html and change extra page design.
-----------------------------------------------------------------------------------------
Version 1.2 - March 24rd, 2018
-----------------------------------------------------------------------------------------
-- Update Bootstrap Version 4 Beta to Stable Bootstrap 4.
-- Add new page toast notification.
-- Add Full Screen Window Button In Header.
-- Add Offline Fonts.
-- Chat sidebar close on esc key and focus lost.
-- Card Refresh Button Bug Solve.
-- Calendar Button Changes.
-- Material Date Picker Alignment Bug Solve.
-----------------------------------------------------------------------------------------
Version 1.0 - Jan 23rd, 2018
-----------------------------------------------------------------------------------------
-- Initial Release