Pagination

Furatto provides a super simple, sleek and beautiful pagination components to have a multi-page app. Great for large search results. Provides a nice transition when over.

Building the markup

Building the pagination is really simple, a list of detailed steps are provided below.

1. Add the pagination class to a ul element.
2. For the current page, add the active class name to the list item.
3. Add a disabled class name to the list items that are not available for clicking.
4. For arrows just add the previous or next class name to the list items accordingly.

      
   <ul class="pagination">
      <li class="previous"><a href="#">«</a></li>
      <li class="active"><a href="#">1</a></li>
      <li class="disabled"><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><span>6</span></li>
      <li><a href="#">7</a></li>
      <li><a href="#">8</a></li>
      <li><a href="#">9</a></li>
      <li class="next"><a href="#">»</a></li>
   </ul>
      
    

Pagination alignment

It is really easy to align the pagination add-on to the right or to the center, just by adding the correct class modifier name.

       
<ul class="pagination center">
  ....
</ul>
       
     

     
//Pagination Alignment
@if($include-pagination-alignment-center) {
  &.center {
    text-align: center;
  }
}
     
   

       
<ul class="pagination right">
  ....
</ul>
       
     

     
//Pagination Alignment
@if($include-pagination-alignment-right) {
  &.right {
    text-align: right;
  }
}
     
   

Available sass variables

Don't like the background for the pagination, nor the font size, just change the value of out variables to meet your needs.

  
$pagination-bg-color: #2980b9 !default;
$pagination-margin: 0 !default;
$pagination-color: #08c !default;
$pagination-font-size: px-to-rems(13) !default;
$pagination-list-items-padding: px-to-rems(2) px-to-rems(9) !default;
$pagination-border-radius: 0px !default;
$pagination-active-items-bg-color: $pagination-bg-color !default;
$pagination-active-items-color: #FFF !default;
$pagination-disabled-color: #FFF !default;
$pagination-disabled-cursor: not-allowed !default;

$include-pagination-transition-list-items: true !default;

//Pagination alignment
$include-pagination-alignment-center: true !default;
$include-pagination-alignment-right: true !default;