Stats

Stats

Clean and simple style to display a list of statistic, with or without a link

• 21 new
  accounts
• 15 referred new
  accounts
• 5 new
  items
• 235 new
  comments

<ul class="stats">

	<!-- With link -->
	<li><a href="#">
		<strong>21</strong> new <br>accounts
	</a></li>

	<!-- Without link -->
	<li>
		<strong>5</strong> new <br>items
	</li>

</ul>

You may also add the class split-on-mobile to the ul: this will cause the list to split in two columns on mobile screens.

Facts

This style is made to display a simple data by block, either a statistic, a value or anything else. This style is responsive, it will be more compact on smaller screens so two elements can fit side by side.

<div class="fact">
	<span class="fact-value">
		50 <span class="fact-unit">Min</span>
	</span>
	Average time per session<br>
	<span class="fact-progress red">-5% ▼</span>
</div>

If you want to display several facts in a row, use the wrapper element - inner facts will float to rearrange when the screen is too small:

<div class="facts clearfix">

	<div class="fact">
		...
	</div>

	<div class="fact">
		...
	</div>

</div>

Charts

The demo files of the template use the Google Charts API to generate charts. Head over to http://code.google.com/apis/chart/interactive/docs/ to learn more on how to use it, and check the many available styles!

The chart on the dashboard (index.html) also show how to asynchronously draw the chart and resize it on each resize:

// Chart drawing function
function drawChart()
{
	// Draw the chart here
};

// Load the Visualization API and the required packages.
google.load('visualization', '1', {
	'packages': ['corechart']
});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

// Watch for block resizing
$('#demo-chart').widthchange(drawChart);

// Respond.js hook (media query polyfill)
$(document).on('respond-ready', drawChart);