Getting started
Ready-to-use layouts and separate components easy to combine and create your own design project.
Getting Started#
-
Unzip project folder
-
Open code editor
-
Navigate to the project
File structure
Motherboard
├── components.html
├── sidebar.html
├── widgets.html
├── css
│ └── library
└── (included 5 files)
│ ├── login.css
│ ├── style.css
│ └── style.css.map
├── Fonts
│ └── (included 14 files)
├── img
├── *.png
├── *.svg
└── *.jpg
├── js
│ └── libs
└── (included 17 files)
└── (included 11 files)
├── templates
│ └── (included 11 files)
In the templatesfolder for clarity, all blocks
are assembled into ready-made templates
Introduction
To build your template, you need components.html, sidebar.html and widgets.html files. You just need to copy the block you want. An example of one page in html:
<!--Sidebar -->
<aside id="sidebar" class="sidebar-wrapper">
<....>
</aside>
<!--Sidebar -End -->
<!--Header/ Topbar -->
<div id="navbar-wrapper">
<....>
</div>
<!--Header/ Topbar -End -->
<!--Main section -->
<section id="content-wrapper">
<....>
</section>
<!--Main section -End -->
Alerts
There are two types of alerts. First one is standart alert
with green background, other one is toast notification
alert.
To start to use alert you can import it from
components.html
<!--Green alert -->
<div class="profile__alert">
<....>
</div>
<!--Green alert -->
<!--Toast notification -->
<div class="toast-notification" id="openToast">
<....>
</div>
<!--Toast notification -->
Examples
Buttons
There are different types of buttons, with icon, without
icon, with icon and text etc.
To start to use button you can import it from
components.html
<!--Buttons / Controls -->
<!--Button / Light blue Bg / With icon -->
<a href="#" class="btn btn__blue btn__blue_40 btn__withIcon">
<svg>
<...>
</svg>
</a>
<!--Button / Light blue Bg / With icon -->
<!--Button / Light blue Bg -->
<a href="#" class="btn btn__blue btn__blue_40">
Button Text
</a>
<!--Button / Light blue Bg -->
<!--Buttons / Controls -->
etc
Examples
Charts
There are 16 types of charts with different sizes.
To start to use it you can import from widgets.html
<!--Bar chart -->
<div class="col-xl-3 col-md-6">
<div class="card">
<...>
</div>
</div>
<!--Bar chart -->
etc
Examples
Left to goal
Revenue
Active users
Visits
Visits
Today productivity
Avg. salary
Sales top
Daily visits
Revenue
Sales heatmap
Revenue
Funnel summary
Chart
Detailed documentation and examples of charts use you
can find by the following links:
1. Chart.js
2.
Zingchart.js
Below you can see the code of Bar chart
<!--HTML -->
<div class="col-xl-3 col-md-6">
<div class="card">
<...>
<div id="barChart"></div>
</div>
</div>
<!--HTML -->
To show the chart just put id name in html file to library in .js file
<!--JS -->
//Bar chart
var chartData = {
type: "bar",
gui:{
contextMenu:{
button:{
visible: false
}
}
},
scaleX: {
labels: [20.22, 21.22, 22.22, 23.22, 24.22, 25.22],
visible: false,
},
scaleY: {
visible: false,
},
legend: {
visible: false,
},
title: {
visible: false,
},
plotarea: {
margin: "25% 0 4% 0",
},
plot: {
tooltip: {
backgroundColor: "#000",
padding: "6 8 8 8",
borderColor: "#000",
borderWidth: 0,
borderRadius: 4,
lineHeight: 17,
fontFamily: "Inter",
text: "%v$ %kl",
shadow: false,
},
animation: {
effect: "4",
speed: "1000",
method: "4",
},
},
series: [
{
values: [3500, 4200, 1670, 2774, 3000, 1500],
backgroundColor: "rgba(32, 201, 51, .25)",
borderWidth: 0,
borderColor: "rgba(32, 201, 51, .25)",
borderRadius: 2,
},
{
values: [2800, 4000, 1390, 3600, 1000, 2500],
backgroundColor: "#20C933",
borderWidth: 0,
borderColor: "#20C933",
borderRadius: 2,
},
],
};
zingchart.render({
id: "barChart",
data: chartData,
height: 125,
width: "100%",
});
//Bar chart end
<!--JS -->
Controls
There are different types of controls like tabs,
pagination, checkbox, switchbox, links and breadcrumb.
To start to use it you can import from components.html
<!--Controls -->
<!--Tabs -->
<div class="refferal__tabs m-0">
<ul class="nav nav-pills mb-3 new-profile__tabs header-two_tab" id="pills-tab" role="tablist">
<...>
</ul>
<div class="custom-selectpicker" name="selValue">
<...>
</div>
</div>
<!--Tabs -->
<!--Controls -->
etc
Examples
Field
7 types of fields for your template.
To start to use it you can import from components.html
<!--Field / Standart -->
<div lass="form-group">
<input ...>
</div>
<!--Field / Standart -->
etc
Examples
Headers
You can choose one of the four ready headers
To start to use header you can import it from
components.html
<!--Header top bar -->
<div id="navbar-wrapper">
<....>
</div>
<!--Header top bar -->
<!--Header 1 -->
<!--Header top bar -->
<div id="navbar-wrapper">
<....>
</div>
<!--Header top bar -->
<div class="page-breadcrumb">
<....>
</div>
<div class="title_one d-flex justify-content-between">
<....>
</div>
<div class="section-line"></div >
<!--Header 1 -->
<!--Header 2 -->
<!--Header top bar -->
<div id="navbar-wrapper">
<....>
</div>
<!--Header top bar -->
<div class="title_two d-flex justify-content-between">
<ul class="nav nav-pills mb-3 new-profile__tabs header-two_tab" id="pills-tab" role="tablist">
<....>
</ul>
</div>
<div class="section-line mt-0"></div >
<!--Header 2 -->
<!--Header 3 -->
<!--Header top bar -->
<div id="navbar-wrapper">
<....>
</div>
<!--Header top bar -->
<div class="d-flex align-items-center justify-content-between header-three">
<....>
</div>
<div class="section-lineThin"></div >
<!--Header 3 -->
Examples
Workspace
Workspace
Inputs
4 types of fields for your template.
To start to use it you can import from components.html
<!--Input with dropdown -->
<div lass="form-group">
< ...>
</div>
<!--Input with dropdown -->
etc
Examples
Popovers
3 kinds of popovers
To start to use it you can import from components.html
<!--Search tooltip -->
<div class="search-tooltip myD-block" id="search-tooltip">
< ...>
</div>
<!--Search tooltip -->
etc
Examples
Sidebar
Sidebar with dark and light mode
To start to use it you can import from sidebar.html
<!--Sidebar -->
<aside id="sidebar" class="sidebar-wrapper">
< ...>
</aside>
<!--Sidebar -->
etc
Tables
Different type of tables for your template.
To start to use it you can import from components.html
<!--Table 1 -->
<table class="table-one first-table table_sort">
< ...>
</table>
<!--Table 1 -->
etc
Examples
|
|
Header title | Header title | Header title | Header title | Header title |
|---|---|---|---|---|---|
|
|
Cell text | Cell text | Cell text | Cell text | Cell text |