siftal
Version:
CSS Framework, not bad ;)
126 lines (105 loc) • 5.32 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"/>
<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>Badges</h2>
<p>Documentation and examples for badges, our small count and labeling component.</p>
</div>
<div class="cbox">
<h3>Examples</h3>
<p>Badges scale to match the size of the immediate parent element by using relative font sizing and <code class="code1">em</code> units.</p>
<div class="example">
<h1>Example heading <span class="badge primary">New</span></h1>
<h2>Example heading <span class="badge primary">New</span></h2>
<h3>Example heading <span class="badge primary">New</span></h3>
<h4>Example heading <span class="badge primary">New</span></h4>
<h5>Example heading <span class="badge primary">New</span></h5>
<h6>Example heading <span class="badge primary">New</span></h6>
</div>
<p>Badges can be used as part of links or buttons to provide a counter.</p>
<div class="example">
<button class="mA5 btn xl">Notification <span class="badge">7</span></button>
<button class="mA5 btn primary">Notification <span class="badge">7</span></button>
<button class="mA5 btn sm">Notification <span class="badge">5</span></button>
</div>
</div>
<div class="cbox">
<h3>Contextual variations</h3>
<p>Add any of the below mentioned modifier classes to change the appearance of a badge.</p>
<div class="example">
<span class="mA3 badge primary">Primary</span>
<span class="mA3 badge secondary">Secondary</span>
<span class="mA3 badge success">Success</span>
<span class="mA3 badge danger">Danger</span>
<span class="mA3 badge warn">Warning</span>
<span class="mA3 badge info">Info</span>
<span class="mA3 badge light">Light</span>
<span class="mA3 badge dark">Dark</span>
</div>
<div class="example bg-black">
<span class="mA3 badge primary">Primary</span>
<span class="mA3 badge secondary">Secondary</span>
<span class="mA3 badge success">Success</span>
<span class="mA3 badge danger">Danger</span>
<span class="mA3 badge warn">Warning</span>
<span class="mA3 badge info">Info</span>
<span class="mA3 badge light">Light</span>
<span class="mA3 badge dark">Dark</span>
</div>
</div>
<div class="cbox">
<h3>Rounded badge</h3>
<p>Use the <code class="code1">.rounded</code> modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding).</p>
<div class="example">
<span class="mA3 badge rounded primary">Primary</span>
<span class="mA3 badge rounded secondary">Secondary</span>
<span class="mA3 badge rounded success">Success</span>
<span class="mA3 badge rounded danger">Danger</span>
<span class="mA3 badge rounded warning">Warning</span>
<span class="mA3 badge rounded info">Info</span>
<span class="mA3 badge rounded light">Light</span>
<span class="mA3 badge rounded dark">Dark</span>
</div>
<div class="example">
<span class="mA3 badge circle primary">Primary</span>
<span class="mA3 badge circle secondary">Secondary</span>
<span class="mA3 badge circle success">Success</span>
<span class="mA3 badge circle danger">Danger</span>
<span class="mA3 badge circle warning">Warning</span>
<span class="mA3 badge circle info">Info</span>
<span class="mA3 badge circle light">Light</span>
<span class="mA3 badge circle dark">Dark</span>
</div>
</div>
<div class="cbox">
<h3>Links</h3>
<p>Using the <code class="code1">.badge</code> classes with the <code class="code1"><a></code> element quickly provide actionable badges with hover and focus states.</p>
<div class="example">
<a href="#" class="badge primary">Primary</a>
<a href="#" class="badge secondary">Secondary</a>
<a href="#" class="badge success">Success</a>
<a href="#" class="badge danger">Danger</a>
<a href="#" class="badge warn">Warning</a>
<a href="#" class="badge info">Info</a>
<a href="#" class="badge light">Light</a>
<a href="#" class="badge dark">Dark</a>
</div>
</div>
</div>
<script src="../dist/js/siftal.min.js"></script>
</body>
</html>