siftal
Version:
CSS Framework, not bad ;)
215 lines (189 loc) • 6.39 kB
HTML
<html lang="en" dir="ltr">
<head>
<title>Siftal</title>
<meta charset="utf-8">
<meta name="description" content="Siftal, a simple CSS framework with usefull tools for Ermile projects">
<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0 maximum-scale=1.2, minimal-ui"/>
<link rel="shortcut icon" href="../dist/images/siftal/siftal.ico">
<link rel="icon" href="../dist/images/siftal/siftal.png" type="image/png">
<link rel="stylesheet" href="../dist/css/siftal.css">
<style>
body{background-color:#eee;}
</style>
</head>
<body class="ltr">
<div class="cn">
<div class="tbox">
<h2>Statistic</h2>
<p>A statistic emphasizes the current value of an attribute. A statistic can display a value with a label above or below it.</p>
</div>
<div class="cbox">
<h3>Example</h3>
<div class="example">
<div class="statistic">
<div class="value">7,450</div>
<div class="label">Downloads</div>
</div>
</div>
<div class="example">
<div class="statistic">
<div class="label">Views</div>
<div class="value">9,064</div>
</div>
</div>
</div>
<div class="cbox">
<h3>A group of statistics</h3>
<div class="example">
<div class="statistics">
<div class="statistic">
<div class="value">22</div>
<div class="label">Faves</div>
</div>
<div class="statistic">
<div class="value">31,200</div>
<div class="label">Views</div>
</div>
<div class="statistic">
<div class="value">22</div>
<div class="label">Members</div>
</div>
</div>
</div>
</div>
<div class="cbox">
<h3>A statistic can contain a numeric, icon, image, or text value</h3>
<div class="example">
<div class="statistics">
<div class="statistic">
<div class="value">22</div>
<div class="label">Saves</div>
</div>
<div class="statistic">
<div class="text value">Three<br>Thousand</div>
<div class="label">Signups</div>
</div>
<div class="statistic">
<div class="value"><i class="sf-plane"></i>5</div>
<div class="label">Flights</div>
</div>
<div class="statistic">
<div class="value"><img src="../dist/images/avatar/1.png" class="circular inline image"> 42</div>
<div class="label">Team Members</div>
</div>
</div>
</div>
</div>
<div class="cbox">
<div class="example">
<div class="statistic">
<div class="value">2,204</div>
<div class="label">Views</div>
</div>
</div>
<div class="example">
<div class="horizontal statistic">
<div class="value">2,204</div>
<div class="label">Views</div>
</div>
</div>
<div class="example">
<div class="horizontal statistics">
<div class="statistic">
<div class="value">2,204</div>
<div class="label">Views</div>
</div>
<div class="statistic">
<div class="value">3,322</div>
<div class="label">Downloads</div>
</div>
<div class="statistic">
<div class="value">22</div>
<div class="label">Tasks</div>
</div>
</div>
</div>
</div>
<div class="cbox">
<div class="example">
<div class="statistics">
<div class="red statistic">
<div class="value">27</div>
<div class="label">Red</div>
</div>
<div class="orange statistic">
<div class="value">8</div>
<div class="label">Orange</div>
</div>
<div class="yellow statistic">
<div class="value">28</div>
<div class="label">Yellow</div>
</div>
<div class="olive statistic">
<div class="value">7</div>
<div class="label">Olive</div>
</div>
<div class="green statistic">
<div class="value">14</div>
<div class="label">Green</div>
</div>
<div class="teal statistic">
<div class="value">82</div>
<div class="label">Teal</div>
</div>
<div class="blue statistic">
<div class="value">1</div>
<div class="label">Blue</div>
</div>
<div class="violet statistic">
<div class="value">22</div>
<div class="label">Violet</div>
</div>
<div class="purple statistic">
<div class="value">23</div>
<div class="label">Purple</div>
</div>
<div class="pink statistic">
<div class="value">15</div>
<div class="label">Pink</div>
</div>
<div class="brown statistic">
<div class="value">36</div>
<div class="label">Brown</div>
</div>
<div class="grey statistic">
<div class="value">49</div>
<div class="label">Grey</div>
</div>
</div>
</div>
</div>
<div class="cbox">
<div class="example">
<div class="statistic sm">
<div class="value">2,360</div>
<div class="label">Views</div>
</div>
<div class="statistic md">
<div class="value">2,360</div>
<div class="label">Views</div>
</div>
<div class="statistic">
<div class="value">2,360</div>
<div class="label">Views</div>
</div>
<div class="statistic lg">
<div class="value">2,360</div>
<div class="label">Views</div>
</div>
<div class="statistic xl">
<div class="value">2,360</div>
<div class="label">Views</div>
</div>
</div>
</div>
</div>
<script src="../dist/js/siftal.min.js"></script>
</body>
</html>