siftal
Version:
CSS Framework, not bad ;)
181 lines (157 loc) • 5.64 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>Pagination</h2>
<p>Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.</p>
</div>
<div class="cbox">
<h3>Overview</h3>
<p>We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping </p><nav> element to identify it as a navigation section to screen readers and other assistive technologies.<p></p>
<div class="example">
<nav class="pagination">
<a href="#" class="prev disabled">Previous</a>
<a>...</a>
<a href="#">6</a>
<a class="active">7</a>
<a href="#">8</a>
<a>...</a>
<a href="#" class="next">Next</a>
</nav>
</div>
</nav></div>
<div class="cbox">
<h3>Colored</h3>
<p>A pagination can use in many colors</p>
<div class="example">
<nav class="pagination primary">
<a href="#" class="prev disabled">Previous</a>
<a>...</a>
<a href="#">6</a>
<a class="active">7</a>
<a href="#">8</a>
<a>...</a>
<a href="#" class="next">Next</a>
</nav>
</div>
<div class="example">
<nav class="pagination secondary">
<a href="#" class="prev disabled">Previous</a>
<a>...</a>
<a href="#">6</a>
<a class="active">7</a>
<a href="#">8</a>
<a>...</a>
<a href="#" class="next">Next</a>
</nav>
</div>
<div class="example">
<nav class="pagination success">
<a href="#" class="prev disabled">Previous</a>
<a>...</a>
<a href="#">6</a>
<a class="active">7</a>
<a href="#">8</a>
<a>...</a>
<a href="#" class="next">Next</a>
</nav>
</div>
<div class="example">
<nav class="pagination warn">
<a href="#" class="prev disabled">Previous</a>
<a>...</a>
<a href="#">6</a>
<a class="active">7</a>
<a href="#">8</a>
<a>...</a>
<a href="#" class="next">Next</a>
</nav>
</div>
<div class="example">
<nav class="pagination info">
<a href="#" class="prev disabled">Previous</a>
<a>...</a>
<a href="#">6</a>
<a class="active">7</a>
<a href="#">8</a>
<a>...</a>
<a href="#" class="next">Next</a>
</nav>
</div>
</div>
<div class="cbox">
<h3>Sizes</h3>
<p>A pagination can vary in size</p>
<div class="example">
<nav class="pagination xs">
<a href="#" class="prev disabled">Previous</a>
<a>...</a>
<a href="#">6</a>
<a class="active">7</a>
<a href="#">8</a>
<a>...</a>
<a href="#" class="next">Next</a>
</nav>
</div>
<div class="example">
<nav class="pagination sm">
<a href="#" class="prev disabled">Previous</a>
<a>...</a>
<a href="#">6</a>
<a class="active">7</a>
<a href="#">8</a>
<a>...</a>
<a href="#" class="next">Next</a>
</nav>
</div>
<div class="example">
<nav class="pagination">
<a href="#" class="prev disabled">Previous</a>
<a>...</a>
<a href="#">6</a>
<a class="active">7</a>
<a href="#">8</a>
<a>...</a>
<a href="#" class="next">Next</a>
</nav>
</div>
<div class="example">
<nav class="pagination lg">
<a href="#" class="prev disabled">Previous</a>
<a>...</a>
<a href="#">6</a>
<a class="active">7</a>
<a href="#">8</a>
<a>...</a>
<a href="#" class="next">Next</a>
</nav>
</div>
<div class="example">
<nav class="pagination xl">
<a href="#" class="prev disabled">Previous</a>
<a>...</a>
<a href="#">6</a>
<a class="active">7</a>
<a href="#">8</a>
<a>...</a>
<a href="#" class="next">Next</a>
</nav>
</div>
</div>
</div>
<script src="../dist/js/siftal.min.js"></script>
</body>
</html>