Foundation CSS Pagination Sass Reference
Last Updated :
09 Sep, 2022
Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing and can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
Pagination is used to separate the content into discrete pages or simply it is the process of dividing the document into pages and providing them with numbers.
Variable Used:
| Variable-Name |
Description |
Type |
Default-Value |
| $pagination-font-size |
This variable is used to define the font size of pagination items. |
Number |
rem-calc(14) |
| $pagination-margin-bottom |
This variable is used to define the default bottom margin of the pagination object. |
Number |
$global-margin |
| $pagination-item-color |
This variable is used to define the text color of pagination items. |
Color |
$black
|
| $pagination-item-padding |
This variable is used to define the padding inside of pagination items. |
Number |
rem-calc(3 10)
|
| $pagination-item-spacing |
This variable is used to define the right margin to separate pagination items. |
Number |
rem-calc(1)
|
| $pagination-radius |
This variable is used to define the default radius for pagination items. |
Number |
$global-radius
|
| $pagination-item-background-hover |
This variable is used to define the background color of pagination items on hover. |
Color |
$light-gray |
| $pagination-item-background-current |
This variable is used to define the background color of the pagination item for the current page. |
Color |
$primary-color
|
| $pagination-item-color-current |
This variable is used to define the text color of the pagination item for the current page. |
Color |
$white
|
| $pagination-item-color-disabled |
This variable is used to define the text color of a disabled pagination item. |
Color |
$medium-gray
|
| $pagination-ellipsis-color |
This variable is used to define the color of the ellipsis in a pagination menu. |
Color |
$black
|
| $pagination-mobile-items |
If we set this variable to “false”, then they do not display page number links on mobile, only next/previous links and optionally current page numbers appear. |
Boolean |
false
|
| $pagination-mobile-current-item |
This variable is used to define the display of the current page number on mobile even if $pagination-mobile-items is set to “false”. |
Boolean |
false
|
| $pagination-arrows |
This variable is used to define the arrows added to the next and previous links of pagination. |
Boolean |
true
|
| $pagination-arrow-previous |
This variable is used to define the content for the previous arrow when $pagination-arrows is “true”. |
String |
‘\00AB’
|
| $pagination-arrow-next |
This variable is used to define the content for the next arrow when $pagination-arrows is “true”. |
string |
‘\00BB’ |
Example 1: In the below code, we will make use of the above variable to demonstrate the use of pagination.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title> Foundation CSS Pagination Basics</title>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>A computer science portal for geeks</h3>
</center>
<nav aria-label="Pagination">
<ul class="pagination">
<li class="pagination-previous disabled">Previous</li>
<li class="current">
<span class="show-for-sr">You're on page</span> 1
</li>
<li>
<a href="#" aria-label="Page 2">2</a>
</li>
<li>
<a href="#" aria-label="Page 3">3</a>
</li>
<li>
<a href="#" aria-label="Page 4">4</a>
</li>
<li class="ellipsis"></li>
<li>
<a href="#" aria-label="Page 12">12</a>
</li>
<li>
<a href="#" aria-label="Page 13">13</a>
</li>
<li class="pagination-next">
<a href="#" aria-label="Next page">Next</a>
</li>
</ul>
</nav>
</body>
</html>
|
SASS Code:
$pagination-item-background-hover: lightgrey;
nav:hover {
background-color:$pagination-item-background-hover;
}
Compiled CSS Code:
nav:hover {
background-color: lightgrey;
}
Output:
Example 2: In the below code, we will make use of the above variable to demonstrate the use of pagination.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title> Foundation CSS Pagination Basics</title>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>A computer science portal for geeks</h3>
</center>
<nav aria-label="Pagination">
<ul class="pagination">
<li class="pagination-previous disabled">Previous</li>
<li class="current">
<span class="show-for-sr">You're on page</span> 1
</li>
<li>
<a href="#" aria-label="Page 2">2</a>
</li>
<li>
<a href="#" aria-label="Page 3">3</a>
</li>
<li>
<a href="#" aria-label="Page 4">4</a>
</li>
<li class="ellipsis"></li>
<li>
<a href="#" aria-label="Page 12">12</a>
</li>
<li>
<a href="#" aria-label="Page 13">13</a>
</li>
<li class="pagination-next">
<a href="#" aria-label="Next page">Next</a>
</li>
</ul>
</nav>
</body>
</html>
|
SASS Code:
$pagination-item-color-current: white;
.current {
color:$pagination-item-color-current;
}
Compiled CSS Code:
.current {
color: white;
}
Output:
Reference: https://get.foundation/sites/docs/pagination.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...