energylink/public/app/features/styleguide/styleguide.html

<navbar model="ctrl.navModel"></navbar>

<div class="page-container">
	<div class="page-header">
		<h1>Style Guide</h1>

		<a class="btn btn-success" ng-click="ctrl.switchTheme()">
			<i class="fa fa-random"></i>
			Switch theme
		</a>

		<div class="page-header-tabs">
			<ul class="gf-tabs">
				<li class="gf-tabs-item" ng-repeat="page in ctrl.pages">
					<a class="gf-tabs-link" href="styleguide/{{page}}" ng-class="{active: ctrl.page[page]}">{{page}}</a>
				</li>
			</ul>
		</div>

	</div>

	<div class="tab-pane" ng-if="ctrl.page.colors">
		<ul>
			<li class="style-guide-color-card" ng-repeat="color in ctrl.colors" style="background-color: {{color.value}}">
				<strong>${{color.name}}</strong>
				<em>{{color.value}}</em>
			</li>
		</ul>
	</div>

	<div class="tab-pane" ng-if="ctrl.page.buttons">
		<div ng-repeat="variant in ctrl.buttonVariants" class="row">
			<div ng-repeat="btnSize in ctrl.buttonSizes" class="style-guide-button-list p-a-2 col-md-4">
				<button ng-repeat="buttonName in ctrl.buttonNames" class="btn btn{{variant}}{{buttonName}} {{btnSize}}">
					btn{{variant}}{{buttonName}}
				</button>
			</div>
		</div>
	</div>

	<div class="tab-pane style-guide-icon-list" ng-if="ctrl.page.icons">
		<div class="row">
			<div ng-repeat="icon in ctrl.icons" class="col-md-2 col-sm-3 col-xs-4">
				<i class="icon-gf icon-gf-{{icon}}" bs-tooltip="'icon-gf icon-gf-{{icon}}'"></i>
			</div>
		</div>
	</div>

	<div class="tab-pane style-guide-plugin-authoring" ng-if="ctrl.page.plugins">
		<p>From grafana 3.0 it's very easy to develop your own plugins and share them with other grafana users.</p>
		<p>More information about plugin development can be found at <a href="http://docs.grafana.org/plugins/developing/development/" target="_blank">docs.grafana.org</a></p>
	</div>

	<div class="tab-pane" ng-if="ctrl.page.forms">
		forms
	</div>

</div>