Kenold Beauplan kenold

Dashboards

Team Dashboard - http://fdietz.github.io/team_dashboard/
Geckoboard - http://www.geckoboard.com/ - Slick data dashboards.
Leftronic - https://www.leftronic.com/ - Similar, doesn't seem quite as organised looking
Dashing - http://shopify.github.io/dashing/ - Simple metric dashboards by Shopify. Widget list

HighCharts - http://www.highcharts.com/ Not very inspiring but very widely used & performant
Google Charts - https://developers.google.com/chart/ Again, not very inspiring but can be customised
Flot - http://www.flotcharts.org/ Gorgeous slick HTML5 graphs

	<!-- created by Kenold Beauplan // Twitter @kenoldb -->

	{{ $url := "/data/tutorials.json" }}
	{{ $data := getJSON $url}}
	<!-- "list-unstyled" is a Bootstrap calss that removes the bullet points -->
	<ul class="list-unstyled">
	{{ range $data.list }}
	{{ $item := . }}
	<li>---</li>
	<li>title:

	// Compares first value to the second one allowing entering IF clouse if true.
	// Otherwise entering ELSE clause if exist.
	Handlebars.registerHelper('ifEquals', function(a, b, options) {
	if (a === b) {
	return options.fn(this);
	}

	return options.inverse(this);
	});

	<div class="card">
	<a href="#">
	<figure class="card__media">
	<img src="image.jpg" alt="" class="card__image">
	</figure>
	<div class="card__body">
	<div class="card__category">Blog</div>
	<div class="card__title">Card Title</div>
	</div>
	<div class="card__footer">

	{
	"name": "site-name",
	"version": "1.0.0",
	"description": "Site Description",
	"main": "index.js",
	"scripts": {
	"watch:sass": "node-sass sass/main.scss css/style.css -w",
	"devserver": "live-server",
	"start": "npm-run-all --parallel devserver watch:sass",
	"compile:sass": "node-sass sass/main.scss css/style.comp.css",

	@mixin font-size($sizeValue: 16, $line: $sizeValue * 1.5) {
	font-size: ($sizeValue) + px;
	line-height: ($line) + px;
	font-size: ($sizeValue / 16) + rem;
	line-height: ($line / 16) + rem;
	}

	// credit https://coderwall.com/p/ml9zxg/sass-mixin-for-rem-font-sizing-line-height-with-px-fallback

	.navbar-menu {
	display: block;
	opacity: 0;

	position: absolute; /* or float: left; width: 100%;*/
	left: 0;
	right: 0;

	transform: translateY(-50%);
	transition: all .4s ease-in-out;