Creating the main cards
Taking a look at our layout, we must create three more cards. The first of them is the hardest one, so let's face it!
The following .card
is composed of an area chart with two series and some iOS-styled checkboxes. This screenshot reminds us of what the card must look like:
For the chart area, we will again use the highcharts library, while for the checkbox, we will use a plugin called switchery (https://github.com/abpetkov/switchery). After we've considered the documentation, let's create the following HTML:
<div class="card" id="ration-stock"> <div class="card-block"> <h2>Ration stock info</h2> <div class="stacked-area"></div> <div class="switch"> View main stocks <input type="checkbox" class="swithcery" checked /> <div class="clearfix"></div> </div> <div class=...