Плагины в Foundation

Abide - проверка форм

Abide - это библиотека проверки формы, которая расширяет API проверки HTML5 с помощью пользовательских валидаторов.

Эти типы ввода создают текстовое поле: text, date, datetime, datetime-local, email, month, number, password, search, tel, time, url и week. Обратите внимание на использование атрибута novalidate для отключения любой проверки браузера, которая может конфликтовать с Abide.

Here's how you use this input field!

Enter a password please.

This field is using the `data-equalto="password"` attribute, causing it to match the password field above.

Check these out
Choose Your Favorite - not required, you can leave this one blank.
Choose Your Favorite, and this is required, so you have to pick one.

Базовый эквалайзер

Чтобы настроить группу эквалайзеров, вам понадобится контейнер, который получает атрибут 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>
Плагины Foundation

Pellentesque habitant morbi tristique senectus et netus et, ante.

Плагины Foundation

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>