Author: Michal Szymanski
Step 1 - sections
First, let's begin with a bit of theory.
There are plenty of different ways of keeping order in a project.
I prefer to keep it strictly structured. That means:
1. We divide the document into 3 main parts:
header (for navigation),
main (for content) and
footer (for additional information and links).
2. The content within the main we divide into
sections, which we use for big blocks of code.
3. Within a
section, we use
divs to divide a code into smaller blocks of code.
The schema looks like this:
core layout (
header,
main,
footer) >
section >
div
Now let's divide
main into 4 sections:
<!--Main layout-->
<main>
<div class="container-fluid">
<!--Section: Modals-->
<section>
</section>
<!--Section: Modals-->
<!--Section: Main panel-->
<section class="mb-5">
</section>
<!--Section: Main panel-->
<!--Section: Table-->
<section class="mb-5">
</section>
<!--Section: Table-->
<!--Section: Accordion-->
<section class="mb-5">
</section>
<!--Section: Accordion-->
</div>
</main>
<!--Main layout-->
Note: We've also added
container-fluid to provide a proper construction for any grids we'll use in the further steps.
Step 2 - main panel
The main panel is an element dedicated for charts and their settings.
However, before we use any specific components, we have to prepare the panel itself.
We'll change the main panel section into a card. Add these classes to the element:
<!--Section: Main panel-->
<section class="card card-cascade narrower mb-5">
Then add a grid with a single row and two columns within:
<!--Section: Main panel-->
<section class="card card-cascade narrower mb-5">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-5">
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-7">
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Main panel-->
Within the first column we'll add a cascading header and body with another grid inside:
<!--Grid column-->
<div class="col-md-5">
<!--Panel Header-->
<div class="view view-cascade py-3 gradient-card-header info-color-dark">
<h5 class="mb-0">Sales</h5>
</div>
<!--/Panel Header-->
<!--Panel content-->
<div class="card-body">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6 mb-4">
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6 mb-4 text-center">
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!--Panel content-->
</div>
<!--Grid column-->
Step 3 - select
To the first column of card-body add the following code:
<!--Date select-->
<p class="lead">
<span class="badge info-color-dark p-2">Date range</span>
</p>
<select class="mdb-select colorful-select dropdown-info">
<option value="" disabled>Choose time period</option>
<option value="1">Today</option>
<option value="2">Yesterday</option>
<option value="3">Last 7 days</option>
<option value="3">Last 30 days</option>
<option value="3">Last week</option>
<option value="3">Last month</option>
</select>
After saving the file you will notice nothing has happened. That's because we have to initialize the select.
In the script section, below the SideNav initialization, paste the code ( it is similar to the SideNav initialization):
// Material Select Initialization
$(document).ready(function () {
$('.mdb-select').material_select();
});
Now it works!
To learn more about MDB Select have a look at our Select documentation.
Step 4 - datepicker
Select allows the user to choose a predefined date range.
We'll use Datepickers to let the user choose completely custom dates (which is useful if predefined ranges don't suit him).
Below the Select place the following code:
<!--Date pickers-->
<p class="lead my-4">
<span class="badge info-color-dark p-2">Custom date</span>
</p>
<div class="md-form">
<input placeholder="Selected date" type="text" id="from" class="form-control datepicker">
<label for="date-picker-example">From</label>
</div>
<div class="md-form">
<input placeholder="Selected date" type="text" id="to" class="form-control datepicker">
<label for="date-picker-example">To</label>
</div>
Datepickers have to be initialized as well. Below Select initialization, paste this code:
// Data Picker Initialization
$('.datepicker').pickadate();
Save the file and you will notice datepickers work as expected.
Datepicker is a component with plenty of options. To learn more have a look at ouur Datepicker documentation.
You can also check its twin component - Timepicker .
Previous lesson Live preview Next lesson
Spread the word:
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.Note: We can help you build your project.
learn more