Главная

Пагинация [CSS + Sass]

2015-02-20 в 12:06, admin, рубрики: css, css3, html, sass

Компонент пагинации, дружественный к мобильным телефонам, который легко можно настроить при помощи CSS и Sass.

Пагинация — простой способ перемещения пользователя между контентом на вашим сайте. Другая альтернатива — бесконечная прокрутка, которая имеет как сильные так и слабые стороны. Я знаю что фреймворки, такие как Bootstrap, позволяют Вам создавать пагинацию в секундах, однако, 1) не все используют фреймворки или не могут использовать для каждого проекта и 2) я создал сниппет с предварительной установкой классов CSS, который немного легче настроить, при этом Вы экономите свое время.

Создание структуры

Структура HTML — одинакова для каждого элемента пагинации: элемента <nav>, который оборачивает неупорядоченный список (.cd-pagination). Элементы списка, содержащие предыдущие и следующие ссылки имеют класс .button. Дополнительные, готовые к использованию классы должны быть применены к элементу <ul> (в примере ниже — это класс .no-space).

<nav role="navigation">
     <ul class="cd-pagination no-space">
          <li class="button"><a href="#0">Назад</a></li>
          <li><a href="#0">1</a></li>
          <li><a href="#0">2</a></li>
          <li><a class="current" href="#0">3</a></li>
          <li><a href="#0">4</a></li>
          <li><span>...</span></li>
          <li><a href="#0">20</a></li>
          <li class="button"><a href="#0">Вперед</a></li>
     </ul>
</nav> <!-- cd-pagination-wrapper -->

Добавление стилей

Самый простой способ изменить «тему» через Sass, где Вы можете воспользоваться переменными. Вот часть файла _variables.scss:

// colors
 
$color-1: #2E4057; // Pickled Bluewood
$color-2: #64a281; // Aqua Forest
$color-3: #ffffff; // White
 
// fonts
 
$primary-font: 'PT Sans', sans-serif;
 
// border-radius
 
$border-radius: .25em;

Изменяя цвета переменных, Вы можете создать бесконечные вариации темы. Если же Sass вам чужд, просто откройте свой style.css и обновите цвета там.

Сниппет включает дополнительные классы, которые изменяют стиль пагинации. Все эти классы применяются к <ul> элементам. Класс .cd-pagination является базовым классом, поэтому не может быть удален.

Самый простой способ проверить как работают эти классы, состоит в том, чтобы просмотреть исходный файл и демонстрационный пример, который прилагается. Вот пример из файла style.css класс (.custom-icons).

/* --------------------------------
 
custom icons - customize the small arrow inside the next and prev buttons
 
-------------------------------- */
 
.cd-pagination.custom-icons .button a {
  position: relative;
}
.cd-pagination.custom-icons .button:first-of-type a {
  padding-left: 2.4em;
}
.cd-pagination.custom-icons .button:last-of-type a {
  padding-right: 2.4em;
}
.cd-pagination.custom-icons .button:first-of-type a::before,
.cd-pagination.custom-icons .button:last-of-type a::after {
  content: '';
  position: absolute;
  display: inline-block;
  /* set size for custom icons */
  width: 16px;
  height: 16px;
  top: 50%;
  /* set margin-top = icon height/2 */
  margin-top: -8px;
  background: transparent url("../img/cd-icon-arrow-1.svg") no-repeat center center;
}
.cd-pagination.custom-icons .button:first-of-type a::before {
  left: .8em;
}
.cd-pagination.custom-icons .button:last-of-type a::after {
  right: .8em;
  transform: rotate(180deg);
}

Некоторые рекомендации

На маленьких устройствах мы удаляем «номера» и показываем только предыдущие и следующие ссылки.
Класс .disabled может быть добавлен к элементу <a>, чтобы отключить его.
Класс .current используется для выделения текущей страницы (цифры).
Класс .animated-buttons работает только в сочетании с классом .custom-icons. Кроме того, текст внутри элемента <a> должны быть обернут элементом <i>.

Как удалить пространство между элементами inline-block

Вот удобный прием! Когда Вы включаете для элементов списка inline-block, чтобы выровнять их по горизонтали, Вы сразу обращаете внимание на значение margin. Чаще всего пытаетесь установить значение margin: 0;, но это не решает проблему.
Ваши варианты:

Установите отрицательное значение margin для элементов списка (не фанат этого решения).
Установите значение float (т.е. float: left; применяется к каждому элементу <li>); только не забудьте применить «Clearfix» хак для элемента <ul> или его родителя.
Удалите закрывающийся тег </li>. Возможно это грубо звучит, но это отличный козырь, который можно держать в рукаве. Вы можете увидеть это на примере цифры 4.

<nav role="navigation">
     <ul class="cd-pagination no-space move-buttons custom-icons">
          <li class="button"><a href="#0">Назад</a>
          <li><a href="#0">1</a>
          <li><a href="#0">2</a>
          <li><a class="current" href="#0">3</a>
          <li><a href="#0">4</a>
          <li><span>...</span>
          <li><a href="#0">20</a>
          <li class="button"><a href="#0">Вперед</a>
     </ul>
</nav> <!-- cd-pagination-wrapper -->

Автор: aleeyt

Источник