Responsive Grid Dashboard

In this example below you will see how to do a Responsive Grid Dashboard with some HTML / CSS and Javascript

It's not responsive yet.Still working on this. :)Forked from Ritchie's Pen Responsive Grid Dashboard.

Thumbnail
This awesome code was written by balajinatarajan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright balajinatarajan ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Responsive Grid Dashboard</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

* {
  box-sizing: border-box;
}

html {
    height: 100%;
}

body {
  margin: 0px;
  height: 100%;
  --background:url('https://i.imgur.com/z7IKsdA.png') --repeat-y #cc0033;
background:#ccc;
  font: 16px/1 'Open Sans', sans-serif;
  color: #777;
  
 line-height: 55px;
font-size: 18px;
letter-spacing: 1px;
}

.wrapper {
  width: 100%;
  height: 100%;
}

aside {
  width: 212px;
  height: 100%;
  border-right: 2px solid #ffffff;
  background-color: #fff;
  padding: 20px 10px 0 10px;
  float: left;
  position: absolute;
  Z-index: 1;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 5px solid #819FF7 ;
  margin: 0px auto;
  overflow: hidden;
 
}

.navigation {
  border-top: 1px solid #819FF7 ;
  margin-top: 20px;
}

.navigation a {
  color: #666;
  text-decoration: none;
  line-height: 55px;
font-size: 18px;
letter-spacing: 1px;
  padding-left: 20px;
}

.navigation li:hover {
  text-decoration: none;
  padding-left: 10px;
  transition: padding 200ms;
  background: #eee;
}

.navigation li:active > a {
  opacity: 0.8;
}

.cover {
  width: 100%;
  height: 100%;
  margin-left: 2px;
  padding: 0px 10px 100px 220px;
  position: absolute;
}

ul, li{
  user-select: none;
  list-style-type: none;
  padding: 0px;
  line-height: 35px;
  color: #FFFFFF;
  transition: padding 200ms;
}

.modal {
  margin: 10px 0px 10px 0;
  	
}
.prodictname {
  padding:10px;
}
.productname h2 {
  text-align:center;
  position:relative;
    font-size: 40px;
  font-weight: 300;
}
.box h3{
  text-align:center;
	position:relative;
	--top:80px;
}

.header {
  background-color:#FFF;
  padding: 10px 0px 2px 20px;
}
.header h2 {
   font-weight: 300;
  color:#013ADF;
}
.box {
  padding:10px;
	--width:70%;
	--height:200px;
	background:#FFF;
	--margin:40px auto;
  background:#FFF;
  --border-width: 1px;
  --border-style:solid;
}
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
.modal-head {
  width: 100%;
  padding: 15px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background: linear-gradient(to bottom, #454545 0%,#3e3e3e 100%);
}

.modal-title {
  color: #FFFFFF;
}

.modal-content {
  width: 100%;
  border: 1px solid #e6e6e6;
  padding: 10px;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;  
}

.modal-wrap {
  float: left;
  width: 100%;
}

.col-10-10{
  width: 100%;
}

.col-7-10{
  width: 75%;
}

.col-5-10{
  width: 50%;
}

.col-2-10{
  width: 25%;
}

[class*='col-'] {
  float: left;
  padding-right: 10px;
}

[class*='col-']:last-of-type {
  padding-right: -10px;
}

.menu-bar {
  width: 100%;
  background: #cc0033;
  display: none;
}

.menu-bar .title {
  text-align: center;
  display: block;
  color: #ffffff;
  font-size: 1.3em;
  font-weight: normal;
  user-select: none;
  padding: 10px;
}

@media only screen 
and (min-width : 768px) 
and (max-width : 1024px){

  ul, li{
    text-align: center;
  user-select: none;
  list-style-type: none;
  padding: 0px;
  line-height: 80px;
  color: #FFFFFF;
  font-size: 1.4em;
}
  
  .col-10-10{
    width: 100%;
  }
  
  .col-7-10{
    width: 100%;
  }

  .col-5-10{
    width: 100%;
  }

  .col-2-10{
    width: 100%;
  }
}

@media only screen 
and (max-width : 767px){
  .col-10-10{
    width: 100%;
  }
  
  .col-7-10{
    width: 100%;
  }  

  .col-5-10{
    width: 100%;
  }

  .col-2-10{
    width: 100%;
  }  
  
  body {
    background:#ccc;
  }
  
  aside {
    top: 0px;
    display: none;
  }
  .cover {
    padding: 10px 0 0 10px;
  }
  
 .menu-bar {
   width: 100%;
   height: 50px;
   background: #cc0033;
   display: block;
 }  
 
}
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <meta name="viewport" content="width=device-width, user-scalable=no" />
<div class="wrapper">
  
  <div class="menu-bar">
    <span class="title">Dashboard</span>
  </div>
  
  <aside>
    <div class="avatar">
      <img src="https://www.cs.umd.edu/sites/default/files/styles/40px_icon/public/default_images/user_icon.png" height="105%" width="95%">
    </div>
    <center>Balaji Natarajan</center>
    <div class="navigation">
      <ul>
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">My Profile</a></li>
        <li><a href="#">Sign Out</a></li>
        <li><a href="#">Help</a></li>        
      </ul>
    </div>
  </aside>
  
  <div class="cover">
     <!--div class="modal-wrap">
        <div class="modal col-10-10"-->

        <div class="header">
          
          <div>
            <h2>The Ultimate Dashboard</h2>
          </div>
          
          </div>
      <!--/div>

  
    </div-->   
    <!--div class="modal-wrap">
        <div class="modal col-10-10">
          <div class="productname">
        
            <h2>The Ultimate Dashboard</h2></div>
      </div>

  
    </div=-->    
<div class="modal-wrap">
        <div class="modal col-7-10">
          <div class="box effect2">
        <!--div class="modal-head">
          <span class="modal-title">75%</span>
        </div>
      
        <div class="modal-content">
          <p></p>
        </div-->
            <div id="canvas-holder" style="float:left;">
			<canvas id="chart-area" width="200" height="300"/>
		</div>
            <div id="canvas-holder" style="float:left;">
			<canvas id="chart-area-nut1" width="200" height="300"/>
		</div>
            <div id="canvas-holder" style="float:left;">
			<canvas id="chart-area2" width="200" height="300"/>
		</div>
            <div id="canvas-holder">
			<canvas id="chart-area-nut2" width="200" height="300"/>
		</div>
            
            </div>
      </div>

        <div class="modal col-2-10">
          <div class="box effect2">
          <div class='chart' id='p1'>
      <canvas id='c1' height="300"></canvas>
    </div>
          </div>
      </div>
  
    </div>    
    
    <div class="modal-wrap">
      <div class="modal col-5-10">
        <div class="box effect2">
           <div style="width:30%">
			<div>
				<canvas id="canvas-line" height="350" width="600"></canvas>
			</div>
		</div>
        </div>
      </div>
      
      <div class="modal col-5-10">
        <div class="box effect2">
       <div style="width: 50%">
			<canvas id="canvas-bar" height="350" width="600"></canvas>
		</div>
        </div>
      </div>      
    </div>
    
    <div class="modal-wrap">
      <div class="modal col-2-10">
        <div class="box effect2">
        <div id="canvas-holder" style="width:30%">
			<canvas id="chart-area-polar" width="250" height="300"/>
		</div>
        </div>
      </div>
      
      <div class="modal col-2-10">
        <div class="box effect2">
       
          <div id="canvas-holder">
			<canvas id="chart-area-nut" width="250" height="300"/>
		</div>
        </div>
      </div> 
      
      <div class="modal col-5-10">
        <div class="box effect2">
       
        <div style="width:30%">
			<canvas id="canvas" height="300" width="400"></canvas>
		</div>
        </div>
      </div> 
           
    </div>   
    
    <div class="modal-wrap">
      
      
      <div class="modal col-10-10">
        <div class="box effect2">
&copy; All Rights Reserved. Copyright 2014.
        </div>
      </div> 
           
    </div>   
    
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/balajinatarajan/responsive-grid-dashboard-Aadmk */

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

* {
  box-sizing: border-box;
}

html {
    height: 100%;
}

body {
  margin: 0px;
  height: 100%;
  --background:url('https://i.imgur.com/z7IKsdA.png') --repeat-y #cc0033;
background:#ccc;
  font: 16px/1 'Open Sans', sans-serif;
  color: #777;
  
 line-height: 55px;
font-size: 18px;
letter-spacing: 1px;
}

.wrapper {
  width: 100%;
  height: 100%;
}

aside {
  width: 212px;
  height: 100%;
  border-right: 2px solid #ffffff;
  background-color: #fff;
  padding: 20px 10px 0 10px;
  float: left;
  position: absolute;
  Z-index: 1;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 5px solid #819FF7 ;
  margin: 0px auto;
  overflow: hidden;
 
}

.navigation {
  border-top: 1px solid #819FF7 ;
  margin-top: 20px;
}

.navigation a {
  color: #666;
  text-decoration: none;
  line-height: 55px;
font-size: 18px;
letter-spacing: 1px;
  padding-left: 20px;
}

.navigation li:hover {
  text-decoration: none;
  padding-left: 10px;
  transition: padding 200ms;
  background: #eee;
}

.navigation li:active > a {
  opacity: 0.8;
}

.cover {
  width: 100%;
  height: 100%;
  margin-left: 2px;
  padding: 0px 10px 100px 220px;
  position: absolute;
}

ul, li{
  user-select: none;
  list-style-type: none;
  padding: 0px;
  line-height: 35px;
  color: #FFFFFF;
  transition: padding 200ms;
}

.modal {
  margin: 10px 0px 10px 0;
  	
}
.prodictname {
  padding:10px;
}
.productname h2 {
  text-align:center;
  position:relative;
    font-size: 40px;
  font-weight: 300;
}
.box h3{
  text-align:center;
	position:relative;
	--top:80px;
}

.header {
  background-color:#FFF;
  padding: 10px 0px 2px 20px;
}
.header h2 {
   font-weight: 300;
  color:#013ADF;
}
.box {
  padding:10px;
	--width:70%;
	--height:200px;
	background:#FFF;
	--margin:40px auto;
  background:#FFF;
  --border-width: 1px;
  --border-style:solid;
}
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
.modal-head {
  width: 100%;
  padding: 15px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background: linear-gradient(to bottom, #454545 0%,#3e3e3e 100%);
}

.modal-title {
  color: #FFFFFF;
}

.modal-content {
  width: 100%;
  border: 1px solid #e6e6e6;
  padding: 10px;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;  
}

.modal-wrap {
  float: left;
  width: 100%;
}

.col-10-10{
  width: 100%;
}

.col-7-10{
  width: 75%;
}

.col-5-10{
  width: 50%;
}

.col-2-10{
  width: 25%;
}

[class*='col-'] {
  float: left;
  padding-right: 10px;
}

[class*='col-']:last-of-type {
  padding-right: -10px;
}

.menu-bar {
  width: 100%;
  background: #cc0033;
  display: none;
}

.menu-bar .title {
  text-align: center;
  display: block;
  color: #ffffff;
  font-size: 1.3em;
  font-weight: normal;
  user-select: none;
  padding: 10px;
}

@media only screen 
and (min-width : 768px) 
and (max-width : 1024px){

  ul, li{
    text-align: center;
  user-select: none;
  list-style-type: none;
  padding: 0px;
  line-height: 80px;
  color: #FFFFFF;
  font-size: 1.4em;
}
  
  .col-10-10{
    width: 100%;
  }
  
  .col-7-10{
    width: 100%;
  }

  .col-5-10{
    width: 100%;
  }

  .col-2-10{
    width: 100%;
  }
}

@media only screen 
and (max-width : 767px){
  .col-10-10{
    width: 100%;
  }
  
  .col-7-10{
    width: 100%;
  }  

  .col-5-10{
    width: 100%;
  }

  .col-2-10{
    width: 100%;
  }  
  
  body {
    background:#ccc;
  }
  
  aside {
    top: 0px;
    display: none;
  }
  .cover {
    padding: 10px 0 0 10px;
  }
  
 .menu-bar {
   width: 100%;
   height: 50px;
   background: #cc0033;
   display: block;
 }  
 
}

/*Downloaded from https://www.codeseek.co/balajinatarajan/responsive-grid-dashboard-Aadmk */
$(document).ready(function() {
  $('.link').on('click', function() {
    $('.link').removeClass('active');
    $(this).toggleClass('active');
  });
});

var c1 = document.getElementById("c1");
var parent = document.getElementById("p1");
c1.width = parent.offsetWidth;
c1.height = parent.offsetHeight;

var data1 = {
  labels : ["00","10","20","30","40","50","60"],
  datasets : [
    {
      fillColor : "rgba(200,150,150,0.5)",
				strokeColor : "rgba(100,100,100,0.8)",
				pointColor : "#0af",
      pointStrokeColor : "rgba(255,255,255,1)",
      data : [150,200,235,290,300,350, 450]
    }
  ]
}

var options1 = {
  scaleFontColor : "rgba(100,100,100,1)",
  scaleLineColor : "rgba(120,120,120,1)",
  scaleGridLineColor : "transparent",
  bezierCurve : false,
  scaleOverride : true,
  scaleSteps : 5,
  scaleStepWidth : 100,
  scaleStartValue : 0
}

new Chart(c1.getContext("2d")).Line(data1,options1)


		var pieData = [
				{
					value: 300,
					color:"#F7464A",
					highlight: "#FF5A5E",
					label: "Red"
				},
				{
					value: 50,
					color: "#46BFBD",
					highlight: "#5AD3D1",
					label: "Green"
				},
				{
					value: 100,
					color: "#FDB45C",
					highlight: "#FFC870",
					label: "Yellow"
				},
				{
					value: 40,
					color: "#949FB1",
					highlight: "#A8B3C5",
					label: "Grey"
				},
				{
					value: 120,
					color: "#4D5360",
					highlight: "#616774",
					label: "Dark Grey"
				}

			];



var radarChartData = {
		labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
		datasets: [
			{
				label: "My First dataset",
				fillColor: "rgba(220,220,220,0.2)",
				strokeColor: "rgba(220,220,220,1)",
				pointColor: "rgba(220,220,220,1)",
				pointStrokeColor: "#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "rgba(220,220,220,1)",
				data: [65,59,90,81,56,55,40]
			},
			{
				label: "My Second dataset",
				fillColor: "rgba(151,187,205,0.2)",
				strokeColor: "rgba(151,187,205,1)",
				pointColor: "rgba(151,187,205,1)",
				pointStrokeColor: "#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "rgba(151,187,205,1)",
				data: [28,48,40,19,96,27,100]
			}
		]
	};
var polarData = [
				{
					value: 300,
					color:"#F7464A",
					highlight: "#FF5A5E",
					label: "Red"
				},
				{
					value: 50,
					color: "#46BFBD",
					highlight: "#5AD3D1",
					label: "Green"
				},
				{
					value: 100,
					color: "#FDB45C",
					highlight: "#FFC870",
					label: "Yellow"
				},
				{
					value: 40,
					color: "#949FB1",
					highlight: "#A8B3C5",
					label: "Grey"
				},
				{
					value: 120,
					color: "#4D5360",
					highlight: "#616774",
					label: "Dark Grey"
				}

			];
// Colour variables
	var red = "#bf616a",
		blue = "#5B90BF",
		orange = "#d08770",
		yellow = "#ebcb8b",
		green = "#a3be8c",
		teal = "#96b5b4",
		pale_blue = "#8fa1b3",
		purple = "#b48ead",
		brown = "#ab7967";
var colours = {
				"Core": blue,
				"Line": orange,
				"Bar": teal,
				"Polar Area": purple,
				"Radar": brown,
				"Doughnut": green
			};
function Colour(col, amt) {

		var usePound = false;

		if (col[0] == "#") {
			col = col.slice(1);
			usePound = true;
		}

		var num = parseInt(col,16);

		var r = (num >> 16) + amt;

		if (r > 255) r = 255;
		else if  (r < 0) r = 0;

		var b = ((num >> 8) & 0x00FF) + amt;

		if (b > 255) b = 255;
		else if  (b < 0) b = 0;

		var g = (num & 0x0000FF) + amt;

		if (g > 255) g = 255;
		else if (g < 0) g = 0;

		return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);

	}
var doughnutData = [
				{
				value: 7.57,
				color: colours["Core"],
				highlight: Colour(colours["Core"], 10),
				label: "Core"
			},
		
			{
				value: 1.63,
				color: colours["Bar"],
				highlight: Colour(colours["Bar"], 10),
				label: "Bar"
			},
		
			{
				value: 1.09,
				color: colours["Doughnut"],
				highlight: Colour(colours["Doughnut"], 10),
				label: "Doughnut"
			},
		
			{
				value: 1.71,
				color: colours["Radar"],
				highlight: Colour(colours["Radar"], 10),
				label: "Radar"
			},
		
			{
				value: 1.64,
				color: colours["Line"],
				highlight: Colour(colours["Line"], 10),
				label: "Line"
			},
		
			{
				value: 1.37,
				color: colours["Polar Area"],
				highlight: Colour(colours["Polar Area"], 10),
				label: "Polar Area"
			}
			];
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

	var barChartData = {
		labels : ["January","February","March","April","May","June","July"],
		datasets : [
			{
				fillColor : "rgba(220,220,220,0.5)",
				strokeColor : "rgba(220,220,220,0.8)",
				highlightFill: "rgba(220,220,220,0.75)",
				highlightStroke: "rgba(220,220,220,1)",
				data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
			},
			{
				fillColor : "rgba(151,187,205,0.5)",
				strokeColor : "rgba(151,187,205,0.8)",
				highlightFill : "rgba(151,187,205,0.75)",
				highlightStroke : "rgba(151,187,205,1)",
				data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
			}
		]

	}
  var lineChartData = {
			labels : ["January","February","March","April","May","June","July"],
			datasets : [
				{
					label: "My First dataset",
					fillColor : "rgba(220,220,220,0.2)",
					strokeColor : "rgba(220,220,220,1)",
					pointColor : "rgba(220,220,220,1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(220,220,220,1)",
					data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
				},
				{
					label: "My Second dataset",
					fillColor : "rgba(151,187,205,0.2)",
					strokeColor : "rgba(151,187,205,1)",
					pointColor : "rgba(151,187,205,1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(151,187,205,1)",
					data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
				}
			]

		}

	window.onload = function(){
		var ctx = document.getElementById("canvas-line").getContext("2d");
		window.myLine = new Chart(ctx).Line(lineChartData, {
			responsive: true
		});
	
		var ctx = document.getElementById("canvas-bar").getContext("2d");
		window.myBar = new Chart(ctx).Bar(barChartData, {
			responsive : true
		});

				var ctx = document.getElementById("chart-area-nut").getContext("2d");
				window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
    
    var ctx = document.getElementById("chart-area-nut1").getContext("2d");
				window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
    
       var ctx = document.getElementById("chart-area-nut2").getContext("2d");
				window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
		
				var ctx = document.getElementById("chart-area-polar").getContext("2d");
				window.myPolarArea = new Chart(ctx).PolarArea(polarData, {
					responsive:true
				});

		window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
			responsive: true
		});
var ctx = document.getElementById("chart-area2").getContext("2d");
				window.myPie = new Chart(ctx).Pie(pieData);
				var ctx = document.getElementById("chart-area").getContext("2d");
				window.myPie = new Chart(ctx).Pie(pieData);
			};

Comments