The layout of a webpage often comes as an element to display the content through the CSS Selectors. Through CSS, you can determine text color, content display, and webpage background and image. When it comes to deploying the web page on the server, Heroku is often the common deployment platform. In the Heroku platform, it can host the website for free, manage several app folders, and easily work with the terminal. For this blog, we’ll walk through the CSS Selector of web layout, file structure, and web deployment to Heroku.
In this article, you will learn to create a basic dashboard and deployment on Heroku server:
(1) Introduction to CSS layout
(2) Folder Structure of HTML, Javascript, and CSS files
(3) Deployment to Heroku
Introduction to CSS layout
CSS is a stylesheet language to decorate the webpages. CSS enables the webpage to display customized presentations with layout on blocks, margin, padding, fonts, etc. In this tutorial, we’ll dive in on the layout of Chart.JS plots with navbar.
CSS Grid layout
CSS Grid is a two-dimensional element with horizontal and vertical lines — one set defining columns, and the other, rows.
First, we create a grid container
A grid container is created by declaring display: grid or display: inline-grid. All direct children of that element become grid items. From the example below, there are 4 separate charts created with canvas tags along with h3 as the plots’ description. These 4 plots are wrapped within
<div class="wrapper">
<div>
<h3>Bar Chart of COVID active cases count in June</h3>
<canvas id="myChart" width="500" height="300"></canvas>
</div>
<div>
<h3>Line Chart of COVID cumulative cases in Canada</h3>
<canvas id="myChart1" width="500" height="300"></canvas>
</div>
<div>
<h3>Doughnut Chart of cumulative COVID cases count in Canada</h3>
<canvas id="myChart2" width="500" height="300"></canvas>
</div>
<div>
<h3>Bar Line Chart of COVID cases in Canada</h3>
<canvas id="myChart3" width="500" height="300"></canvas>
</div>
</div>
The example below shows the creation of a wrapper’s selector for the grid container. Next, we define grid tracks which are the space of 2 lines shown within the grid. In grid container, grid-template-columns and grid-template-rows are used to define the rows and columns. Property of grid-template-columns can define the size of the column tracks. Grid-template-columns is set to be an 800-pixel-wide column track. Also, I created both a 50-pixel gap on rows and columns.
.wrapper {
display: grid;
grid-template-columns: 800px 800px;
column-gap: 50px;
row-gap: 50px;
}
Link CSS file and external resource
The example below shows the method of embedding on the CSS file. Both external and internal CSS source shall be included in element, and the element needs to be placed between the <head> and </head>tags. Therefore, the HTML webpage would be linked to the stylesheet from the element.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="../static/styles/style.css">
Folder Structure of HTML, Javascript, and CSS files
For the dashboard, there are several different files like the dataset CSV files, plots javascript files, stylesheets CSS files, and webpages HTML files. It’s better to store different files in each folder under the project main directory. Typically, there’s a static folder to store all sorts of files in the subdirectory. For example, all my datasets are stored in the file folder, js files in the js folder, CSS files in the styles folder, and the HTML files in the template folder.
Interaction of Javascript and HTML file
Below, it shows the ChartJS plots being created in the HTML file with the canvas id of “myChart”.
<div>
<h3>Bar Chart of COVID active cases count in June </h3>
<canvas id="myChart" width="500" height="300"></canvas>
</div>
In the Javascript file, we’ll render the plot by calling the “myChart” id by using document.getElementById() function call .
var ctx = document.getElementById("myChart");
In the html file, we can call the Javascript file by using the
#deployment #dashboard #web #heroku #css #php
