Обзор краткий такого же небольшого плагина Smooth Scroll, написанного под библиотеку jQuery.

Этот скрипт предназначен только для одной цели - плавного скроллинга (прокрутки) страницы. Благодаря этому улучшается юзабилити страницы и сайта в целом, так как нет резких скачков при переходе по ссылкам.

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

Подключение Smooth Scroll к HTML-странице производится как обычно:

<!--  SCRIPTS  -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/settings.js"></script>
...

… где первая строка - это библиотека jQuery, вторая строка - плагин Smooth Scroll, третья строка - файл инициализации плагина Smooth Scroll.

Инициализация Smooth Scroll

Для того, чтобы заработал плагин Smooth Scroll и на странице появилась плавная прокрутка, нужно в js-файле скрипта прописать строки:

$(document).ready(function(){
  $('a').smoothScroll();
});

… то есть - всем ссылкам страницы присвоить метод smoothScroll(), что дает плавный скроллинг. В принципе, этого достаточно - больше ничего и не надо.

Варианты выборки в Smooth Scroll

Помимо показанной выше строчки, скрипт Smooth Scroll имеет несколько других вариантов режима работы. Другими словами, эти режимы работы - все навсего усложненный первый вариант, вариации на тему выборки HTML-элемента в библиотеке jQuery.

Примеры выборок взяты мною из файла readme.md, переводить их мне совсем не хочется; да и нет в этом необходимости - все понятно даже по коду:

  • Allows for easy implementation of smooth scrolling for same-page links.
  • Works like this: $('a').smoothScroll();
  • Specify a containing element if you want: $('#container a').smoothScroll();
  • Exclude links if they are within a containing element: $('#container a').smoothScroll({excludeWithin: ['.container2']});
  • Exclude links if they match certain conditions: $('a').smoothScroll({exclude: ['.rough','#chunky']});
  • Adjust where the scrolling stops: $('.backtotop').smoothScroll({offset: -100});
  • Add a callback function that is triggered before the scroll starts: `$(‘a’).smoothScroll({beforeScroll: function() { alert(‘ready to go!’); }});
  • Add a callback function that is triggered after the scroll is complete: $('a').smoothScroll({afterScroll: function() { alert('we made it!'); }});

Пример работы Smooth Scroll

Ниже привожу пример HTML, SCSS и JS-кода, на котором проходил “испытание” плагин Smooth Scroll у меня, в моей “лаборатории”.

<head>
  <meta charset="utf-8">
  <title>Smooth Scroll Plugin</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <h1 class="head">smooth scroll plugin</h1>

  <ul class="scroll">
    <li><a href="#h1">header 1</a></li>
    <li><a href="#h2">header 2</a></li>
    <li><a href="#h3">header 3</a></li>
    <li><a href="#h4">header 4</a></li>
    <li><a href="#h5">header 5</a></li>
  </ul>

  <h1>header 1</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h2>header 2</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h3 id="h3">header 3</h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h4>header 4</h4>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5 id="h5">header 5</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 6</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 7</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h1>header 1</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h2 id="h2">header 2</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h3>header 3</h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h4>header 4</h4>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 5</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 6</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 7</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h1 id="h1">header 1</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h2>header 2</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h3>header 3</h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h4 id="h4">header 4</h4>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 5</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 6</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 7</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <!--  SCRIPTS  -->
  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/jquery.smooth-scroll.min.js"></script>
  <script src="js/settings.js"></script>

</body>
$color: #789;

h1,h2,h3,h4,h5{
  text-transform: uppercase;
  font-family: Georgia, sans-serif;
  text-align: center;
}

h1{
  font-size: 36px;
  color: $color;
}
h2{
  font-size: 32px;
  color: lighten($color,5%);
}
h3{
  font-size: 28px;
  color: lighten($color,10%);
}
h4{
  font-size: 24px;
  color: lighten($color,15%);
}
h5{
  font-size: 24px;
  color: lighten($color,20%);
}
h6{
  font-size: 20px;
  color: lighten($color,25%);
}
h7{
  font-size: 18px;
  color: lighten($color,30%);
}

.head{
  text-transform: capitalize;
  font-size: 48px;
  color: darken($color,5%);
}

.scroll{
  list-style-type: none;
  padding: 0 0 0 100px;
  li{
    margin-bottom: 10px;
    a{
      text-transform: capitalize;
      text-decoration: none;
      color: darken($color,10%);
      &:hover{
        color: darken($color,15%);
      }
    }
  }
}
$(document).ready(function(){
  $('a').smoothScroll();
});

На этом все.


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

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

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

Зато у FlexSlider я впервые (для себя) встретил такую удобную возможность, как управление отображением стрелок перемотки или пагинацией через опции самого слайдера. То есть, не нужно копаться в сгенерированном коде DOM-дерева с помощью Firebug, чтобы найти там блок пагинации (к примеру) и отключить его через CSS-правило display: block;. В случае с FlexSlider все делается проще - прописал одну строчку 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” - для стрелок перемотки изображений

… а также создает блок-обертку div class="flex-viewport" для списка 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, чтобы выбрать сжатую (animate.min.css) или несжатую (animate.css) версию библиотеки.

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

Для подключения библиотеки Animate.css в готовый HTML-проект, достаточно подключить в “шапке” документа скачанный CSS-файл 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-элемента необходимо добавить обязательный класс .animated. CSS-расшифровка этого класса также предельно проста:

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

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

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

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

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

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

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

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

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

Можно немного усложнить задачу и добавить с помощью Jquery событие hover к элементу img, затем “повесить” на него класс анимации rotateIn и 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');
  }
)})

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

Можно управлять задержкой анимации и скоростью анимации, изменив значения в классе .animated. Например, с animation-duration: 1s на 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-атрибута для формы, как placeholder.

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

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

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

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

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

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

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

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

Подключение плагина 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>

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

HTML-форма с placeholder

Ниже привожу пример HTML5-формы, в которой применен атрибут placeholder в полях ввода, реализованных через элемент input. А также в элементе 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-разметка. Для тестирования работы плагина jquery.placeholder.js воспользуюсь браузером, в котором заведомо не реализована поддержка атрибута placeholder - это Internet Explorer 8. Открываю созданную HTML-страничку в этом браузере (связка Windows XP + IE8) и вижу результат:

Placeholder в Internet Explorer 8

Галочками отмечены поля, в которых сработал плагин 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.

Установка библиотеки сводиться к одной вещи - установке пакета bourbon под Ruby. Выполняется это одной командой:

$ sudo gem install bourbon

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

$ bourbon -v
  Bourbon 4.0.2

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

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

Перехожу в директорию с опытными (подопытными?) образцами всего разного и создаю там папку с именем 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 поступает прямо противоположно - она устанавливает локально, в отдельную папку проекта (имя этой папки всегда - bourbon) все миксины сразу, на все случаи жизни. Если посмотреть на содержимое папки 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

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

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

Видим здесь готовые миксины для создания самых различных CSS3-эффектов - border-radius, gradient, transform, transition и так далее. Ну, теперь все понятно, не правда ли?

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

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

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

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

@import "bourbon/bourbon";

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

Чтобы автоматически отслеживать изменения в файле таблиц стилей 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 есть три готовых миксина для создания кнопок:

  • simple
  • pill
  • shiny

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

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

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

.simple{
  @include button;
}

Смотрим результат в браузере - готовая красивая синенькая кнопочка! Точно также можно создать еще две другие кнопки, с помощью миксинов pill и shiny. При этом можно передать в качестве аргумента фоновый цвет создаваемой кнопки:

.pill{
  @include button(pill);
}

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

Ради любопытства посмотрите на скомпилированный CSS-код этих кнопок в файле style.css - вы будете поражены однозначно!

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

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

А вот в библиотеке Bourbon эта задача выполняется в одну строку, для этого достаточно миксину triangle передать всего лишь три аргумента - ширину границы, цвет границы, направление треугольник’а:

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

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

Заключение

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