Плагины
Abide - проверка форм
Abide - это библиотека проверки формы, которая расширяет API проверки HTML5 с помощью пользовательских валидаторов.
Эти типы ввода создают текстовое поле: text, date, datetime, datetime-local, email, month, number, password, search, tel, time, url и week. Обратите внимание на использование атрибута novalidate для отключения любой проверки браузера, которая может конфликтовать с Abide.
Базовый эквалайзер
Чтобы настроить группу эквалайзеров, вам понадобится контейнер, который получает атрибут data-equalizer, а затем ряд дочерних элементов, которые получают атрибут data-equalizer-watch. Все дочерние элементы будут изменены таким образом, чтобы иметь одинаковую высоту.
<div class="grid-x grid-margin-x" data-equalizer data-equalize-on="medium" id="test-eq">
<div class="cell medium-4">
<div class="callout" data-equalizer-watch>
<img src= "assets/img/generic/square-1.jpg">
</div>
</div>
<div class="cell medium-4">
<div class="callout" data-equalizer-watch>
<p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
</div>
</div>
<div class="cell medium-4">
<div class="callout" data-equalizer-watch>
<img src= "assets/img/generic/rectangle-1.jpg">
</div>
</div>
</div>

Pellentesque habitant morbi tristique senectus et netus et, ante.

Interchange работа с изображениями
Пропускная способность очень ценна в мобильных сетях, поэтому она помогает обслуживать пользователей на меньших экранах меньшим изображением. Используя Interchange, вы можете подавать определенные изображения для пользователей в зависимости от их размера экрана. Запросы css media используются для определения размера устройства пользователя и того, какое изображение должно быть подано.
В приведенном ниже примере мы имеем три различных размера изображения: один для маленьких экранов, один для средних и один для больших. Используйте приведенный ниже формат для настройки адаптивного изображения. Изображение будет изменяться автоматически по мере изменения размера браузера.
<img data-interchange="[assets/img/interchange/small.jpg, small], [assets/img/interchange/medium.jpg, medium], [assets/img/interchange/large.jpg, large]">
Плавная Прокрутка - на JavaScript
Позволяет внутренним ссылкам плавно прокручиваться.
<ul class="menu" data-smooth-scroll>
<li><a href="#first">First Arrival</a></li>
<li><a href="#second">Second Arrival</a></li>
<li><a href="#third">Third Arrival</a></li>
</ul>
<div class="sections">
<section id="first">First Section</section>
<section id="second">Second Section</section>
<section id="third">Third Section</section>
</div>
Прилипала на JavaScript
Вставляйте почти все, что угодно, куда угодно!
<div class="cell small-6 right" data-sticky-container>
<div class="sticky" data-sticky data-margin-top="0">
<img class="thumbnail" src="/assets/img/generic/rectangle-3.jpg">
<!-- This sticky element would stick to the window, with a marginTop of 0 -->
</div>
</div>
<div class="cell small-6 right" data-sticky-container>
<div class="sticky" data-sticky data-anchor="foo">
<img class="thumbnail" src="/assets/img/generic/rectangle-3.jpg">
<!-- This sticky element would stick to the window for the height of the element #foo, with a 1em marginTop -->
</div>
</div>