siftal
Version:
CSS Framework, not bad ;)
103 lines (88 loc) • 3.88 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>Breadcrumb</h2>
<p>Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.</p>
</div>
<div class="cbox">
<h3>Examples</h3>
<p>Separators are automatically added in CSS through ::before and content.</p>
<div class="example">
<nav class="breadcrumb">
<a href="http://siftal.ir" tabindex="-1"><span class="fa fa-home"></span> Home</a>
<a href="http://siftal.ir/examples" tabindex="-1">Control Panel</a>
<a href="http://siftal.ir/examples/breadcrumb" tabindex="-1">Sample</a>
<a>Breadcrumb</a>
</nav>
</div>
<div class="example">
<nav class="breadcrumb2">
<a href="http://siftal.ir" tabindex="-1"><span class="fa fa-home"></span> Home</a>
<a href="http://siftal.ir/examples" tabindex="-1">Control Panel</a>
<a href="http://siftal.ir/examples/breadcrumb" tabindex="-1">Sample</a>
<a>Breadcrumb</a>
</nav>
</div>
</div>
<div class="cbox">
<h3>Sizes</h3>
<p>A breadcrumb can vary in size</p>
<div class="example">
<nav class="breadcrumb xs">
<a href="http://siftal.ir" tabindex="-1"><span class="fa fa-home"></span> Home</a>
<a href="http://siftal.ir/examples" tabindex="-1">Control Panel</a>
<a href="http://siftal.ir/examples/breadcrumb" tabindex="-1">Sample</a>
<a>Breadcrumb</a>
</nav>
</div>
<div class="example">
<nav class="breadcrumb sm">
<a href="http://siftal.ir" tabindex="-1"><span class="fa fa-home"></span> Home</a>
<a href="http://siftal.ir/examples" tabindex="-1">Control Panel</a>
<a href="http://siftal.ir/examples/breadcrumb" tabindex="-1">Sample</a>
<a>Breadcrumb</a>
</nav>
</div>
<div class="example">
<nav class="breadcrumb">
<a href="http://siftal.ir" tabindex="-1"><span class="fa fa-home"></span> Home</a>
<a href="http://siftal.ir/examples" tabindex="-1">Control Panel</a>
<a href="http://siftal.ir/examples/breadcrumb" tabindex="-1">Sample</a>
<a>Breadcrumb</a>
</nav>
</div>
<div class="example">
<nav class="breadcrumb lg">
<a href="http://siftal.ir" tabindex="-1"><span class="fa fa-home"></span> Home</a>
<a href="http://siftal.ir/examples" tabindex="-1">Control Panel</a>
<a href="http://siftal.ir/examples/breadcrumb" tabindex="-1">Sample</a>
<a>Breadcrumb</a>
</nav>
</div>
<div class="example">
<nav class="breadcrumb xl">
<a href="http://siftal.ir" tabindex="-1"><span class="fa fa-home"></span> Home</a>
<a href="http://siftal.ir/examples" tabindex="-1">Control Panel</a>
<a href="http://siftal.ir/examples/breadcrumb" tabindex="-1">Sample</a>
<a>Breadcrumb</a>
</nav>
</div>
</div>
</div>
<script src="../dist/js/siftal.min.js"></script>
</body>
</html>