Люблю я разбирать новые слайдеры и пробовать с ними работать. На этот раз я столкнулся с неизвестным для себя плагином FlexSlider в одном из готовых HTML-макетов австралийского фрилансера Peter Finlan.

Домашняя страничка слайдера FlexSlider располагается здесь - FlexSlider 2. Как сказано на официальной страничке, слайдер является адаптивным, периодически.

В арсенале у плагина заготовлена возможность автоматического генерирования перемотки изображений, пагинации страниц; показ не только изображений, но и видео. А вот заголовок для данного слайдера не предусмотрен, насколько я понял (поправьте меня, если я неправ - буду только рад, ибо слайдер понравился).

Зато у FlexSlider я впервые (для себя) встретил такую удобную возможность, как управление отображением стрелок перемотки или пагинацией через опции самого слайдера. То есть, не нужно копаться в сгенерированном коде DOM-дерева с помощью Firebug, чтобы найти там блок пагинации (к примеру) и отключить его через CSS-правило

1
display: block;
. В случае с FlexSlider все делается проще - прописал одну строчку
1
controlNav: false
и пагинация отключена.

Подключение FlexSlider

Подключение плагина FlexSlider к HTML-странице производится абсолютно стандартно, как и для любого другого плагина, написанного под библиотеку jQuery (я не забыл сказать, что FlexSlider написан под jQuery?). В моем случае я использовал версию jQuery 1.11.1. Здесь есть небольшое ограничение - FlexSlider 2.3.0 требует для своей работы как минимум jQuery 1.4.2. Кнопка для скачивания FlexSlider находиться там же, где вся остальная информация - FlexSlider Download.

Подключение FlexSlider в HTML:

HTML-разметка для FlexSlider

Разметка для слайдера на странице выполняется в виде блока-обертки и маркированного списка:

<!-- FLEXSLIDER -->
<div class="flexslider">
  <ul class="slides">
    <li><img src="images/caramel.jpg"    width="800" height="504" alt="FlexSlider" title="Flexslider" /></li>
    <li><img src="images/cheesecake.jpg" width="800" height="504" alt="FlexSlider" title="Flexslider" /></li>
    <li><img src="images/donut.jpg"      width="800" height="504" alt="FlexSlider" title="Flexslider" /></li>
    <li><img src="images/lemon.jpg"      width="800" height="504" alt="FlexSlider" title="Flexslider" /></li>
  </ul>
</div><!--  end flexslider  -->

Пример взят с официальной странички и в нем оставлены имена классов для обоих блоков, как есть. Плагин при своей инициализации генерирует два дополнительных блока:

  • ol class=”flex-control-nav” - для пагинации изображений
  • ul class=”flex-direction-nav” - для стрелок перемотки изображений

… а также создает блок-обертку

1
div class="flex-viewport"
для списка
1
ul class="slides"
. То есть, разметка получается прозрачной и ясной.

Инициализация FlexSlider

Для инициализации плагина FlexSlider нужно в конфигурационном js-файле для случая самого простого вида написать такие строки:

$(document).ready(function(){
  $('.flexslider').flexslider({
    animation: "slide"
  });
});

В принципе, уже этого достаточно для создания слайдера FlexSlider - он уже работает. Можно стилизовать его самому с помощью CSS, или же подключить уже готовые CSS-стили и отредактировать их - кому как удобно. Я попробую отредактировать внешний вид слайдера сам:

$color: #778899;

.flexslider{
  position: relative;
  width: 800px;
  margin: 20px auto 0;
  border: 10px solid darken($color,20%);
  @include border-radius(5px);
  @include box-shadow(lighten($color,5%) 0 0 10px);

  /*  PAGINATION  */
  .flex-control-nav{
    position: relative;
    z-index: 3;
    padding: 5px 0;
    margin-top: -30px;
    @include pie-clearfix;
    @include squish-text;
    li{
      float: left;
      margin-left: 10px;
      a{
        display: block;
        width: 20px;
        height: 20px;
        background-color: lighten($color,5%);
        cursor: pointer;
        @include border-radius(50%);
        @include single-transition(background-color, .2s, ease-in-out);
        &.flex-active{
          background-color: darken($color,10%);
          cursor: default;
        }
        &:hover,&:focus{
          background-color: darken($color,10%);
        }
      }
    }
  }

  /*  ARROWS  */
  .flex-direction-nav{
    @include squish-text;
    .flex-prev,
    .flex-next{
      position: absolute;
      top: 50%;
      margin-top: -10px;
      display: block;
      width: 20px;
      height: 20px;
      background-color: lighten($color,5%);
      border: 2px solid darken($color,10%);
      @include border-radius(50%);
      @include single-transition(background-color, .2s, ease-in-out);
      &:hover,&:focus{
        outline: none;
        background-color: darken($color,10%);
      }
    }
    .flex-prev{
      left: 10px;
    }
    .flex-next{
      right: 10px;
    }
  }
  /*  IMAGES  */
  .flex-viewport{
    li{
      @include box-shadow(rgba(0,0,0,.6) 0 0 8px 4px inset);
      img{
        vertical-align: top;
        position: relative;
        z-index: -2;
      }
      }
    }
  }

Стилизованный слайдер FlexSlider

Опции слайдера FlexSlider

Плагин имеет большое количество настроек, которые представлены ниже. Список взят отсюда - Flexslider - адаптивный слайдер.

Опции по умолчанию:

  • namespace: “flex-“, //{Новое} String: Префикс, прикрепляемый к классу каждого элемента сгенерированного плагином
  • selector: “.slides > li”, //{Новое} Selector: Должен соответствовать простому шаблону. ‘{container} > {slide}’ — Игнорируйте шаблон на свой страх и риск
  • animation: “fade”, //String: Тип анимации, “fade” или “slide”
  • easing: “swing”, //{Новое} String: Определяет переход поддерживаемый плагином jQuery easing.
  • direction: “horizontal”, //String: Выбор направления смены изображений “horizontal” или “vertical”
  • reverse: false, //{NEW} Boolean: реверс направления анимации
  • animationLoop: true, //Boolean: Цикличность анимации. Если false, directionNav будет добавлять класс “disable” на обоих концах слайдера
  • smoothHeight: false, //{Новое} Boolean: Allow height of the slider to animate smoothly in horizontal mode
  • startAt: 0, //Integer: Слайд с какого должно начинаться слайдшоу. Массив (0 = первый слайд)
  • slideshow: true, //Boolean: Включение автослайдшоу
  • slideshowSpeed: 7000, //Integer: Скорость слайдшоу в мс
  • animationSpeed: 600, //Integer: Скорость анимации в мс
  • initDelay: 0, //{Новое} Integer: Задержка инициализации в мс -randomize: false, //Boolean: Случайный порядок слайдов

Использование функций

  • pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
  • pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
  • useCSS: true, //{Новое} Boolean: Slider will use CSS3 transitions if available
  • touch: true, //{Новое} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
  • video: false, //{Новое} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches

Первичное управление

  • controlNav: true, //Boolean: Создание навигации для постраничного управления каждым слайдом. Замечание: оставьте true для использования manualControls
  • directionNav: true, //Boolean: Создание навигации для кнопок назад/вперед (true/false)
  • prevText: “Previous”, //String: Тест для кнопки “previous” пункта directionNav
  • nextText: “Next”, //String: Тест для кнопки “next” пункта directionNav

Вторичная навигация

  • keyboard: true, //Boolean: Разрешает навигацию с помощью стрелок на клавиатуре (влево/вправо)
  • multipleKeyboard: false, //{Новое} Boolean: Разрешает управление с помощью клавиатуры по несколькими слайдерами. Поведение по умолчанию вырезает возможность управления клавиатурой при использовании более одного слайдера
  • mousewheel: false, //{Обновление} Boolean: Требуется плагин jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Управление навигацией по слайдам с помощью колесика мыши
  • pausePlay: false, //Boolean: Создание динамического pause/play элемента
  • pauseText: “Pause”, //String: Текста для кнопки “pause” элемента pausePlay
  • playText: “Play”, //String: Текст для кнопки “play” элемента pausePlay

Специальные свойства

  • controlsContainer: “”, //{Обновление} jQuery Object/Selector: Объявление какой контейнер элементов навигации будет применен. По умолчанию это FlexSlider. Например, можно использовать так $(“.flexslider-container”). Свойство игнорируется если элемент не найден.
  • manualControls: “”, //{Обновление} jQuery Object/Selector: Объявление пользовательской панели управления навигацией. Примером может быть $(“.flex-control-nav li”) или “#tabs-nav li img”, и т.п.. Количество элементов в вашей controlNav должно совпадать с количеством слайдов/табов.
  • sync: “”, //{Новое} Selector: Зеркало действий выполняемых над этим слайдером с помощью другого слайдера. Используйте с осторожностью.
  • asNavFor: “”, //{Новое} Selector: Внутренние свойства направленные на превращение слайдера в миниатюры с возможностью навигации для другого слайдера

Опции карусели

  • itemWidth: 0, //{Новое} Integer: Ширина Box-model отдельных элементов карусели, включая горизонтальные границы и отступы (padding)
  • itemMargin: 0, //{Новое} Integer: Отступ между элементами карусели
  • minItems: 0, //{Новое} Integer: Минимальное количество элементов карусели, которые будут видимы. Элементы будут плавно изменять размер при значении ниже заданного
  • maxItems: 0, //{Новое} Integer: Максимальное количество элментов карусели, которые будут видимы. Элементы будут плавно изменять размер при превышении этого лимита.
  • move: 0, //{Новое} Integer: Количество элментов в карусели, которые должны двигаться по анимации. Если 0, то слайдер будет двигать все видимые элементы

Callback API

  • start: function(){}, //Callback: function(slider) - Срабатывает, когда слайдер загружает первый слайд
  • before: function(){}, //Callback: function(slider) - Срабатывает асинхронно с каждой анимацией слайдера
  • after: function(){}, //Callback: function(slider) - Срабатывает после каждой завершенной анимацией слайдера
  • end: function(){}, //Callback: function(slider) - Срабатывает, когда слайдер доходит до последнего элемента (асинхронный)
  • added: function(){}, //{Новое} Callback: function(slider) - Срабатывает после того, как слайд добавлен
  • removed: function(){} //{Новое} Callback: function(slider) - Срабатывает после того, когда слайд удален

Варианты слайдера FlexSlider

На официальной страничке плагина в прекрасно оформленном виде представлены [различные варианты][6] создания слайдера. Все они реализуются с помощью опций этого плагина и дополнительной HTML-разметки.

Например, чтобы создать слайдер с thumbnail-пагинацией, нужно прописать в js-файле настроек:

$('.flexslider').flexslider({
  animation: "slide",
  controlNav: "thumbnails"
});

… а HTML-разметку изменить таким образом:

<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
    <li data-thumb="slide1-thumb.jpg"><img src="slide1.jpg" /></li>
    <li data-thumb="slide2-thumb.jpg"><img src="slide2.jpg" /></li>
    <li data-thumb="slide3-thumb.jpg"><img src="slide3.jpg" /></li>
    <li data-thumb="slide4-thumb.jpg"><img src="slide4.jpg" /></li>
  </ul>
</div>

Но, в принципе, в этом случае рассказывать о возможных вариантах слайдера достаточно глупо - можно и нужно посетить официальную страничку и там смотреть примеры создания.

На этом все.


[6]: http://flexslider.woothemes.com/index.html “”

В готовом шаблоне одного фрилансера встретил использование Animate.css - библиотеки CSS3-эффектов, созданной на самом же CSS3.

Ранее я уже встречал упоминание об этой библиотеке - Easy CSS3 Animation with Animate.css. Вот теперь пришла пора познакомиться с нею детально, что называется - на практике.

Кстати, официальная страница этого проекта расположена здесь - Animate.css. На ней можно посмотреть все возможные для этой библиотеки эффекты и подобрать подходящий в выпадающем списке.

Откровенно говоря, я приготовился к обстоятельному изучению этой библиотеки, но все оказалось предельно просто. Все, что нужно для подключения Animate.css - это скачать полную версию по ссылке Download Animate.css. Или же перейти на GitHub - View on GitHub, чтобы выбрать сжатую (

1
animate.min.css
) или несжатую (
1
animate.css
) версию библиотеки.

Подключение Animate.css

Для подключения библиотеки Animate.css в готовый HTML-проект, достаточно подключить в “шапке” документа скачанный CSS-файл

1
animate.css
:

<head>
  <meta charset="utf-8">
  <title>Animate CSS</title>
  <link rel="stylesheet" href="css/animate.css">
  ...
</head>

И это все! Больше никаких действий не потребуется - все остальные манипуляции нужно выполнять в HTML-коде, добавляя необходимые CSS-классы из библиотеки Animate.css к нужным HTML-элементам.

Добавление CSS-классов из Animate.css

Первое, что нужно помнить - для нужного HTML-элемента необходимо добавить обязательный класс

1
.animated
. CSS-расшифровка этого класса также предельно проста:

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

Второе - на странице проекта подбираем для себя нужный\понравившийся эффект, запоминаем имя (пусть в данном случае это будет

1
bounceIn
) этого эффекта и добавляем его в качестве имени класса к HTML-элементу, у которого уже есть класс
1
.animated
(вспоминаем основы CSS - такая конструкция называется мультиклассовостью):

<h1 class="animated bounceIn">
  Animate.css
</h1>

Все - можно проверять работу библиотеки Animate.css.

Использование jQuery c Animate.css

Если в проекте используется библиотека jQuery (а она применяется почти всегда), то применение библиотеки Animate.css еще больше упрощается, а HTML-разметка делается семантичной. Для этого подключаю библиотеку jQuery:

… и прописываю в скрипте инициализации

1
animate_me.js
:

$(document).ready(function() {
  $('h2').addClass('animated bounceInLeft');
})

Вуаля - все отлично работает!

Можно немного усложнить задачу и добавить с помощью Jquery событие

1
hover
к элементу
1
img
, затем “повесить” на него класс анимации
1
rotateIn
и
1
animated
из библиотеки Animate.css:

<figure>
  <img src="images/caramel.jpg" width="800" height="504" alt="Animated Image" />
</figure>
$(document).ready(function() {
  $('figure img').hover(
  function() {
    $(this).addClass('animated rotateIn');
  },
  function() {
    $(this).removeClass('animated rotateIn');
  }
)})

Управление задержкой анимации

Можно управлять задержкой анимации и скоростью анимации, изменив значения в классе

1
.animated
. Например, с
1
animation-duration: 1s
на
1
animation-duration: .4s;
:

.animated {
  -webkit-animation-duration: .4s;
  animation-duration: .4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

Полный код примера на Animate.css

Полный код рассмотренного в этой статье примера привожу ниже.

<h1 class="animated bounceIn">Animate.css</h1>
<h2>animate me with jquery!</h2>
<figure>
  <img src="images/caramel.jpg" width="800" height="504" alt="Animated Image" />
</figure>
<!--  SCRIPTS  -->
$color: #778899;

h1,h2,figure{
  margin: 50px auto 0;
  text-align: center;
}

h1{
  font: normal 72px/1.3 Georgia, sans-serif;
  color: darken($color,10%);
}

h2{
  font: normal 56px/1.3 Georgia, sans-serif;
  color: lighten($color,5%);
  text-transform: capitalize;
}

figure img:hover{
  cursor: pointer;
}
$(document).ready(function() {
  $('h2').addClass('animated bounceInLeft');
  $('figure img').hover(
  function() {
    $(this).addClass('animated rotateIn');
  },
  function() {
    $(this).removeClass('animated rotateIn');
  }
 )})

Библиотека Animate.css в действии

На этом все.


Короткая статья, посвященная вопросу кросс-браузерности такого HTML5-атрибута для формы, как

1
placeholder
.

Недавно столкнулся в подобным вопросом, решение не смог найти. Однако, в книге “Недостающее руководство по HTML5” случайно столкнулся с подробным описанием решения этой маленькой проблемы. Проблема и вправду маленькая - вопрос поддержки или не поддержки браузерами данного атрибута на сегодняшний день - это мелочь. Ну правда, разве пострадает функциональность верстаемого сайта от того, что в поле поиска не будет отображаться подстановочный текст? Конечно, нет!

Еще один момент - говоря о кросс-браузерной поддержке атрибута

1
placeholder
, почти всегда подразумевается на самом деле поддержка этого атрибута только одним браузером. Конечно, это многострадальный Internet Explorer версии 7 или 8. О версии Internet Explorer 6 можно уже забыть. Остальные браузеры нормально справляются со своей задачей и понимают, что такое
1
placeholder
.

Автор статьи обладает некоторой долей перфекционизма - для него и такая мелочь является принципиальной мелочью, камнем преткновения. И вот, этот камень можно отодвинуть в сторону.

Кросс-браузерные заплатки для HTML5

Начну с того, что решение вопроса кросс-браузерного

1
placeholder
было создано уже давно. Это для меня данный факт был открытием! Более того, существует большое количество способов, решающих данную проблему. Все они собраны воедино по одному адресу на GitHub - HTML5 Cross Browser Polyfills . Вся эта коллекция называется “Кросс-браузерные заплатки для HTML5”, но в нашем случае нужен только один раздел этой коллекции - Web Forms : input placeholder.

Ого - там не одно решение, а целых одиннадцать! Причем, все они реализованы на JavaScript, поэтому и кросс-браузерные. Выбирать можно любой, какой понравиться - принцип работы и способ подключения к HTML-странице у них всех почти одинаков. Я возьму для себя способ jquery.placeholder.js, просто потому, что название понравилось.

Плагин

1
jquery.placeholder.js
может реализовать поддержку атрибута
1
placeholder
как в Internet Explorer 7 или 8, так и в Internet Explorer 6. Ну, Internet Explorer 6 - это уже слишком! На момент написания статьи многие верстальщики (конечно, не все) имеют тенденцию “забывать” о существовании даже Internet Explorer 8.

Подключение плагина jquery.placeholder.js

Подключение плагина

1
jquery.placeholder.js
абсолютно стандартное для такого рода скриптов. Ниже привожу пример такого подключения в HTML-коде:

<!--  SCRIPTS  -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.placeholder.js"></script>
...

Затем идет скрипт инициализации для данного плагина. Общая картина будет выглядеть таким образом:

<!--  SCRIPTS  -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script>
  $('input, textarea').placeholder();
</script>

Плагин

1
jquery.placeholder.js
делает в HTML-документе выборку по двум HTML-элементам -
1
input
и
1
textarea
. А затем применяет к ним метод
1
placeholder()
- все просто.

HTML-форма с placeholder

Ниже привожу пример HTML5-формы, в которой применен атрибут

1
placeholder
в полях ввода, реализованных через элемент
1
input
. А также в элементе
1
textarea
:

<form action="#">
  <h1>zoo keeper application form</h1>
  <p>Please complete the form. Mandatory fields are marked as a <span>*</span></p>

  <!-- CONTACT DETAILS  -->
  <fieldset>
    <legend>contact details</legend>
    <label for="name">name <span>*</span></label>
    <input type="text" name="name" title="Your full name here" placeholder="John Resig" autofocus required><br>
    <label for="telephone">telephone <span>*</span></label>
    <input type="tel" name="telephone" title="Input your phone number here" placeholder="9(989)600-30-20" required><br>
    <label for="email">email <span>*</span></label>
    <input type="email" name="email" title="Your email required" placeholder="test@mail.ru" required>
  </fieldset>

  <!-- PERSONAL INFORMATION  -->
  <fieldset>
    <legend>personal information</legend>
    <label for="age">age <span>*</span></label>
    <input type="number" title="Your real age, please" name="age" min="10" max="90" value="29" step="1" required><br>
    <label for="gender">gender</label>
    <select name="gender" id="gender" size="1">
      <option value="female">female</option>
      <option value="female">male</option>
    </select><br>
    <label for="message">When did you first know you wanted to be a zoo-keeper?</label>
    <textarea name="message" id="message" cols="30" rows="10" placeholder="I have a dream ..."></textarea>
  </fieldset>

  <!-- FAVORITES ANIMALS  -->
  <fieldset>
    <legend>pick your favorite animals</legend>
    <label for="zebra"><input type="checkbox" value="zebra">zebra</label>
    <label for="elephant"><input type="checkbox" value="elephant">elephant</label>
    <label for="cat"><input type="checkbox" value="cat">cat</label>
    <label for="wildebeest"><input type="checkbox" value="wildebeest">wildebeest</label>
    <label for="anaconda"><input type="checkbox" value="anaconda">anaconda</label>
    <label for="pingeon"><input type="checkbox" value="pingeon">pingeon</label>
    <label for="human"><input type="checkbox" value="human" checked="checked">human</label>
    <label for="crab"><input type="checkbox" value="crab">crab</label>
  </fieldset>

  <input type="submit" value="send">
</form>

Проверка поддержки placeholder в IE8

JS-скрипты подключены и создана HTML-разметка. Для тестирования работы плагина

1
jquery.placeholder.js
воспользуюсь браузером, в котором заведомо не реализована поддержка атрибута
1
placeholder
- это Internet Explorer 8. Открываю созданную HTML-страничку в этом браузере (связка Windows XP + IE8) и вижу результат:

Placeholder в Internet Explorer 8

Галочками отмечены поля, в которых сработал плагин

1
jquery.placeholder.js
- если бы не он, там было бы пусто. Отлично - плагин работает и его можно применять в деле, на готовом проекте!


Библиотека миксинов (mixin) под препроцессор Sass под названием Bourbon - вот о чем будет сегодняшний краткий обзор.

Данная статья не могла не появиться по нескольким причинам. Первая - я являюсь большим поклонником препроцессора Sass и библиотеки миксинов Compass под него. Библиотека Bourbon является аналогом Compass, просто она меньше по размеру и возможностям. Но это не значит, что она хуже - она обладает некоторыми возможностями, которых нет в Compass.

Помимо этого, существует прекрасная сравнительная статья Sass-гуру Hugo Giraudel, посвященная этим двум библиотекам под один препроцессор. Оригинал статьи находиться здесь - Sass Frameworks: Compass or Bourbon?, а посильный перевод этой статьи размещен здесь - Что выбрать - Compass или Bourbon?. В этой статье Юг Жиродель (Hugo Giraudel) приводит преимущества использования библиотеки Bourbon и сопутствующих ему пакетов, таких как Neat для создания адаптивной CSS-сетки (grid).

Однако, после прочтения вышеназванной статьи один вопрос остается открытым - а как установить библиотеку Bourbon? Что можно в ней делать и как это делать? На эти вопросы я постараюсь ответить самому себе (и возможно - вам, уважаемый читатель).

Установка библиотеки Bourbon

Инсталляцию библиотеки миксинов Bourbon я буду производить под операционной системой Linux Mint 17 Cinnamon, просто потому что мне так интереснее. Под OS Windows процесс ничем не отличается от того, который будет описан здесь. Единственное условие - на момент установки Bourbon в системе уже должны стоять и нормально работать Ruby + Sass.

Установка библиотеки сводиться к одной вещи - установке пакета

1
bourbon
под Ruby. Выполняется это одной командой:

$ sudo gem install bourbon

Проверяю, какая версия этой библиотеки “попала” ко мне:

$ bourbon -v
  Bourbon 4.0.2

Отлично! Теперь можно приступать к разворачиванию проекта с поддержкой Bourbon.

Создание проекта Bourbon

Перехожу в директорию с опытными (подопытными?) образцами всего разного и создаю там папку с именем

1
bourbon
:

$ cd ~/Projects/
$ mkdir bourbon
$ cd bourbon/

… и запускаю там команду:

$ bourbon install
  Bourbon files installed to bourbon/

Не знаю, как вы, а я сразу после этого задал себе вопрос - “А что это было?” Что это за команда и зачем она нужна? Все оказалось просто.

В библиотеке Compass в таблице стилей конкретно указывается, какой модуль необходимо подключить к проекту. К примеру, таким образом:

@import "compass/reset";
@import "compass/utilities/general/clearfix";
@import "compass/css3/transition";
@import "compass/css3/border-radius";

В результате Compass выборочно подгружает по сети только указанные модули. И ничего больше.

Библиотека Bourbon поступает прямо противоположно - она устанавливает локально, в отдельную папку проекта (имя этой папки всегда -

1
bourbon
) все миксины сразу, на все случаи жизни. Если посмотреть на содержимое папки
1
bourbon
, то увидим такую картину:

$ ls -l bourbon/
  drwxr-xr-x 2 addons
  -rw-r--r-- 1 _bourbon-deprecated-upcoming.scss
  -rw-r--r-- 1 _bourbon.scss
  drwxr-xr-x 2 css3
  drwxr-xr-x 2 functions
  drwxr-xr-x 2 helpers
  drwxr-xr-x 2 settings

Видим, что все миксины “расфасованы” по папкам в зависимости от их назначения. Давайте “заглянем” в одну из этих подпапок - пусть это будет

1
css3
:

Содержимое папки Bourbon

Видим здесь готовые миксины для создания самых различных CSS3-эффектов -

1
border-radius
,
1
gradient
,
1
transform
,
1
transition
и так далее. Ну, теперь все понятно, не правда ли?

Включение библиотеки Bourbon в проект

Дело осталось за малым - включить поддержку миксинов библиотеки в таблицу стилей. Выполняется это обычно, директивой

1
@import
. Для этого создаю структуру папок и файлов будущего проекта (однако, Compass это может делать одной командой!):

$ mkdir sass
$ mkdir css
$ touch sass/style.scss
$ touch css/style.css
$ touch index.html

… и помещаю одну строку в таблице стилей

1
style.scss
:

@import "bourbon/bourbon";

Мониторинг изменений в проекте Bourbon

Чтобы автоматически отслеживать изменения в файле таблиц стилей

1
style.scss
и выполнять компиляцию в CSS-стили, запускаю команду мониторинга:

$ sass --watch sass/style.scss:css/style.css

Использование библиотеки Bourbon

Ну и что, скажете вы? Что дальше? А ничего - дальше только пользоваться библиотекой Bourbon. Для этого с главной страницы проекта Bourbon переходим на страницу документации, нажав кнопочку Bourbon Documentation. В правом верхнем углу есть две ссылки, одна из которых “View Spec” - ведет на страницу CSS-документации MDN, а вторая “View Source” - на страницу GitHub c рабочими примерами миксинов.

Также видим, что миксинов здесь даже на беглый взгляд значительно меньше, чем в библиотеке Compass. Ну это ничего.

Bourbon - создаем кнопки

Давайте для начала создадим на Bourbon что-нибудь простенькое. Пусть это будут кнопки. Для этого перейдем на страницу документации по созданию кнопок - Button.

Видим, что в библиотеке Bourbon есть три готовых миксина для создания кнопок:

  • 1
    
    simple
  • 1
    
    pill
  • 1
    
    shiny

Поэтому в HTML-коде создаю кнопку:

<button class="simple" type="button"></button>

… и прописываю для нее миксин в таблице стилей

1
style.scss
:

.simple{
  @include button;
}

Смотрим результат в браузере - готовая красивая синенькая кнопочка! Точно также можно создать еще две другие кнопки, с помощью миксинов

1
pill
и
1
shiny
. При этом можно передать в качестве аргумента фоновый цвет создаваемой кнопки:

.pill{
  @include button(pill);
}

.shiny{
  @include button(shiny, #ff9900);
}

Ради любопытства посмотрите на скомпилированный CSS-код этих кнопок в файле

1
style.css
- вы будете поражены однозначно!

Bourbon - создаем треугольники

Кто из внимательных читателей может на память создать треугольник на чистом CSS? Конечно, там нет ничего сложного, но уверен - время у вас все равно уйдет на то, чтобы вспомнить все тонкости этого процесса - обнулить ширину и высоту, задать ширину и цвет границы, убрать ее с трех остальных сторон и так далее.

А вот в библиотеке Bourbon эта задача выполняется в одну строку, для этого достаточно миксину

1
triangle
передать всего лишь три аргумента - ширину границы, цвет границы, направление треугольник’а:

@include triangle(2em, #ff9900, up);

Все - треугольник готов! Самые разные варианты создания теругольников хорошо описаны на странице документации - Triangle.

Заключение

На этом задачу ознакомления с библиотекой Bourbon считаю законченной. Читайте документацию - там все хорошо описано!


На моем пути повстречался еще один плагин для создания карусели (carousel), основанный на библиотеке jQuery.

Имя этого плагина запоминающиеся - liSlidik и проживает он здесь - liSlidik - jQuery Responsive Slider. Насколько я правильно понял, этот плагин был создан одним или несколькими русскоязычными веб-разработчиками. В принципе, вся документация с примерами подробно расписана на русском языке на этой странице и нет нужды пересказывать уже сказанное.

Однако, я хотел разобраться с плагином liSlidik - понять, как его подключать, настраивать и управлять. Поэтому все же появился обзор этого слайдера, который будет представлен ниже.

Сразу скажу, что плагин liSlidik мне не понравился. На это есть несколько причин, которые я укажу ниже, в самом обзоре. Причины эти могут быть субъективными, но все же они повлияли на мой вывод.

Установка плагина liSlidik

Установка и подключение плагина liSlidik производится совершенно стандартно для скриптов подобного рода. Сначала подключается библиотека jQuery (в этом обзоре использовалась версия 1.8), затем подключается сам скрипт liSlidik, а в конце - js-файл с инициализацией скрипта и его настройками:

...
<!--  SCRIPTS  -->
<script src="js/jquery-1.8.min.js"></script>
<script src="js/liSlidik.js"></script>
<script src="js/settings.js"></script>
</body>

Скачать архив скрипта liSlidik можно с домашней страницы проекта по это ссылке - liSlidik Download. Помимо этого, на jsFiddle выложен исходный код скрипта с примерами создания разных вариантов слайдов - liSlidik Demo. Библиотеку jQuery можно подключить через CDN или скачать для локального подключения - это кому как нравиться.

HTML-разметка для liSlidik

Разметка в HTML-документе для будущего слайдера под управлением скрипта liSlidik проста и семантична - в этом плане все на уровне современной веб-разработки. Структура будущего слайдера представляет из себя обычный маркированный список с вложенными изображениями:

<ul id="slider" class="slider">
  <li><img src="http://placehold.it/300x200&text=liSlidik 1" alt="liSlidik 0" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 2" alt="liSlidik 1" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 3" alt="liSlidik 2" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 4" alt="liSlidik 3" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 5" alt="liSlidik 4" /></li>
</ul>

Единственный важный момент при создании HTML-разметки заключается в том, что для элемента

1
ul
необходимо задать идентификатор, к которому будет “цепляться” скрипт liSlidik - иначе слайдер не заработает (мне этот факт не понравился, так как я не люблю идентификаторы и стараюсь всячески избегать их использования). Класс для элемента
1
ul
понадобиться для последующей стилизации слайдера на HTML-странице.

Инициализация скрипта liSlidik

Для “запуска” скрипта liSlidik нужно его инициализировать, создав простой js-файл и прописав в нем такие строки:

$(document).ready(function(){
  $('#slider').liSlidik();
});

Минимальная стилизация скрипта liSlidik

Слайдер liSlidik после всех выполненных выше мною шагов не заработает, на самом деле. Потому что для его работы необходима минимальная CSS-стилизация, которую я выполню ниже. Стоит ли говорить, что данный шаг я бы не смог выполнить без незаменимого плагина Firebug под Mozilla Firefox?!

Минимальная CSS-стилизация слайдера liSlidik:

.slider{
  width: 300px;
  height: 200px;
  margin: 20px auto;
  position: relative;
  li{
    position: absolute;
    top: 0;
    left: 0;
    img{
      vertical-align: top;
    }
  }

Конечно, можно воспользоваться готовыми CSS-стилями из архива скрипта liSlidik; но зачем пользоваться чужим кодом, когда можно создать более чистый и маленький по размеру свой собственный код, мне не понятно. Конечно, в приведенном выше коде значения свойств

1
width
и
1
height
являются произвольными и зависят от конкретных условий - ставить нужно вместо них то, что необходимо. Это же относится и к
1
margin: 20px auto;
, которое было применено здесь для “красоты”.

Вот теперь слайдер liSlidik готов к работе. Более того - он работает! Это минималистичный слайдер, без каких-либо кнопок управления:

Скрипт liSlidik работает

Кнопки управления для liSlidik

Скрипт liSlidik имеет в своем составе полный набор органов управления создаваемым им слайдером. Начну с малого и приступлю к созданию кнопок перемотки взад-вперед для слайдшоу. Стоит сразу сказать, что все органы управления показом слайдшоу в скрипте liSlidik не создаются автоматически - их нужно создавать вручную (данный факт мне также не совсем понравился):

<!--  arrows  -->
<a data-slidik="slider" class="next" href="#">Next</a>
<a data-slidik="slider" class="prev" href="#">Prev</a>

HTML-разметка для кнопок перемотки создается через элемент

1
a
, у которого обязательным атрибутом должен быть
1
data-slidik="slider"
, где
1
slider
- это имя идентификатора нашего слайдера. Классы
1
class="next"
и
1
class="prev"
присутствуют для тех же целей, что и в элементе
1
ul
- на них “вешаются” CSS-стили:

/*  ARROWS  */
.next,
.prev{
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  z-index: 2;
  top: 95px;
  background-color: #000;
  @include border-radius(50%);
  @include squish-text;
  @include single-transition(background-color, .2s, ease-in);
}
.next{
  left: 10px;
  &:hover,&:focus{
    background-color: lighten(#000,20%);
  }
}
.prev{
  right: 10px;
  &:hover,&:focus{
    background-color: lighten(#000,20%);
  }
}

Смотрим результат подключения кнопок перемотки в liSlidik:

Плагин liSlidik c кнопками перемотки

Пагинация в слайдере liSlidik

Подключение пагинации в скрипте liSlidik выполняется аналогично - нужно вручную создать блочный элемент

1
div
с атрибутом
1
data-slidik="slider"
и классом
1
class="dotted"
(который также обязателен в данном случае!):

<!--  pagination  -->
<div data-slidik="slider" class="dotted"></div>

Создаю для нового элемента CSS-стили. Снова оговорюсь, что для блока пагинации (насколько я правильно понял) имя класса

1
dotted
является обязательным. Я пробовал менять это имя на произвольное и в результате слайдер перестал работать (вот такие мелкие обязательства мне и не нравятся в этом плагине!):

/*  PAGINATION  */
.dotted{
  position: absolute;
  bottom: 2px;
  left: 2px;
  z-index: 3;
  @include pie-clearfix;
  .dottedItem{
    cursor: pointer;
    float: left;
    margin: 0 5px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    font-size: 12px;
    background-color: lighten(#000,30%);
    text-align: center;
    @include border-radius(50%);
    @include single-transition(background-color, .2s, ease-in);
    &:hover,&:focus{
      background-color: lighten(#000,40%);
    }
    &.cur{
      background-color: lighten(#000,50%);
    }
  }
}

Присутствующее в коде выше имя класса

1
.cur
обозначает активный элемент, который можно стилизовать на свой выбор. Еще один странный момент, связанный со слайдером liSlidik - внимательно посмотрите на снимок работающего скрипта:

Скрипт liSlidik c пагинацией

Ничего не замечаете? Нумерация в данной пагинации начинается с нуля! Это весьма странный факт, ибо обычные посетители сайта не являются программистами и для них нумерация с нуля, мягко выражаясь, непривычна и необычна.

Заголовок слайдера liSlidik

Заголовок для слайдера liSlidik создается вручную (неужели нельзя создать скрипт, который автоматически генерирует нужные HTML-элементы?) также с помощью блочного элемента

1
div
, для которого прописывается атрибут
1
data-slidik="slider"
с обязательным именем класса
1
class="caption"
:

<!--  caption  -->
<div data-slidik="slider" class="caption"></div>

И произвольные CSS-стили для него:

/*  CAPTION  */
.caption{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  padding: 6px 0;
  text-indent: 1em;
  width: 100%;
  background-color: rgba(0,0,0,.6);
  color: rgba(255,255,255,.5);
}

Текст для показа на странице скрипт liSlidik берет из содержимого атрибута

1
alt=
для элемента
1
img
. Поэтому не забудьте его прописать в своей HTML-разметке!

Скрипт liSlidik c заголовком

Миниатюры в скрипте liSlidik

Плагин liSlidik имеет возможность создания миниатюр в виде галлереи изображений, которая выступает в роли пагинации. На странице демо-примеров показан вариант такого слайдшоу. Однако, у меня не было желания разбираться с вопросом построения

1
thumnnails
в этом примере.

Заключение

Все примеры и варианты создания слайдеров под управлением скрипта liSlidik можно посмотреть на официальной страничке проекта - liSlidik - jQuery Responsive Slider. Ниже привожу полный HTML и SCSS-код примера, рассмотренного в данной статье:

<ul id="slider" class="slider">
  <li class="show"><img src="http://placehold.it/300x200&text=liSlidik 1" alt="liSlidik 0" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 2" alt="liSlidik 1" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 3" alt="liSlidik 2" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 4" alt="liSlidik 3" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 5" alt="liSlidik 4" /></li>
  <!--  arrows  -->
  <a data-slidik="slider" class="next" href="#">Next</a>
  <a data-slidik="slider" class="prev" href="#">Prev</a>
  <!--  pagination  -->
  <div data-slidik="slider" class="dotted"></div>
  <!--  caption  -->
  <div data-slidik="slider" class="caption"></div>
  <!--  previews  -->
  <!-- <div data-slidik="slider" class="thumbs"></div> -->
</ul><!--  SCRIPTS  -->
.slider{
  width: 300px;
  height: 200px;
  margin: 20px auto;
  position: relative;
  li{
    border: 2px solid #000;
    position: absolute;
    top: -2px;
    left: -2px;
    &.show{
      display: block;
      z-index: 2;
    }
    img{
      vertical-align: top;
    }
  }
  /*  ARROWS  */
  .next,
  .prev{
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 2;
    top: 95px;
    background-color: #000;
    @include border-radius(50%);
    @include squish-text;
    @include single-transition(background-color, .2s, ease-in);
  }
  .next{
    left: 10px;
    &:hover,&:focus{
      background-color: lighten(#000,20%);
    }
  }
  .prev{
    right: 10px;
    &:hover,&:focus{
      background-color: lighten(#000,20%);
    }
  }
  /*  PAGINATION  */
  .dotted{
    position: absolute;
    bottom: 2px;
    left: 2px;
    z-index: 3;
    @include pie-clearfix;
    .dottedItem{
      cursor: pointer;
      float: left;
      margin: 0 5px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      color: #fff;
      font-size: 12px;
      background-color: lighten(#000,30%);
      text-align: center;
      @include border-radius(50%);
      @include single-transition(background-color, .2s, ease-in);
      &:hover,&:focus{
        background-color: lighten(#000,40%);
      }
      &.cur{
        background-color: lighten(#000,50%);
      }
    }
  }
  /*  CAPTION  */
  .caption{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    padding: 6px 0;
    text-indent: 1em;
    width: 100%;
    background-color: rgba(0,0,0,.6);
    color: rgba(255,255,255,.5);
  }
}

На этом все.