Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler to make development faster.
Kitchen Sink has the elements to work in websites and applications. Kitchen Sink Pagination is the type of navigation to divide the content into a series of similar pages.
Kitchen Sink Pagination classes used:
- pagination: It is used to create a list of pages.
Syntax:
<ul class="pagination" role="navigation" > ........ </ul>
Example 1: Below is the example that illustrates the use of Kitchen Sink using simple pagination class.
<!DOCTYPE html> <html lang="en">
<head>
<link crossorigin="anonymous" rel="stylesheet" href=
<script crossorigin="anonymous" src=
</script>
<script src=
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Foundation CSS Kitchen Sink Pagination
</h3>
<ul class="pagination">
<li class="current">1</li>
<li><a href="#0">2</a></li>
<li><a href="#0">3</a></li>
<li><a href="#0">4</a></li>
<li><a href="#0">5</a></li>
<li><a href="#0">6</a></li>
</ul>
</body>
</html>
|
Output:
Example 2: Below is the example that illustrates the use of Kitchen Sink using pagination and ellipses class.
<!DOCTYPE html> <html lang="en">
<head>
<link crossorigin="anonymous" rel="stylesheet" href=
<script crossorigin="anonymous" src=
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Foundation CSS Kitchen Sink Pagination
</h3>
<ul class="pagination">
<li><a href="#0">Previous</a></li>
<li class="current">1</li>
<li><a href="#0">2</a></li>
<li><a href="#0">3</a></li>
<li><a href="#0">4</a></li>
<li><a href="#0">5</a></li>
<li class="ellipsis"></li>
<li><a href="#0">6</a></li>
<li><a href="#0">7</a></li>
<li><a href="#">Next</a></li>
</ul>
</body>
</html>
|
Output:
Reference link: https://get.foundation/sites/docs/kitchen-sink.html#pagination