Страница демонстрации блоков, доступных на проекте

Страница

Блок страницы (<html class="page">), благодаря которому применяются некоторые глобальные стили:

  • Смена боксовой модели на всех узлах: box-sizing: border-box; наследуется от html
  • Нормализация вьюпорта для windows-телефонов.
  • Сброс отступов для <body>
  • Стилевой обход 300 мс задержки (touch-action: manipulation;).
  • Ограничение размера картинок до 100% ширины родителя.

В стилизацию блока включена стилизация «прибитого подвала».

            <!DOCTYPE html>
            <html class="no-js  page" lang="ru">
            <head>...</head>
            <body>
              <div class="page__inner">
                <div class="page__content">Основное содержимое</div>
                <div class="page__footer-wrapper">Прибитый «подвал»</div>
              </div>
            </body>
            </html>

Текст, теги

Реализуется блоком typo, все стили которого являются глобальными.

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

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

Заголовок 1

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

Заголовок 2

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

Заголовок 3

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

Заголовок 4

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

Заголовок 5

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

Заголовок 6

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

  • Пункт 1
    • Подпункт 1
    • Подпункт 2
  • Пункт 2
  • Пункт 3
  1. Пункт 1
    1. Подпункт 1
    2. Подпункт 2
  2. Пункт 2
  3. Пункт 3

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

Определяемая сущность 1
Некое, возможно, относительно длинное определение упомянутой сущности. Скорее всего, многострочное.
Определяемая сущность 2
Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное.
Некое, возможно, относительно длинное определение упомянутой сущности.

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

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

<a> ссылка
<strong> действительно значимый текст
<b> просто выделенный текст, лид
<i> иностранное слово или термин
<em> эмфатическое ударение
<s> информация, утратившая актуальность
<del> изменение, внесённое в документ (удаление)
<ins> изменение, внесённое в документ (добавление)
<mark> акцент маркерным выделением
<small> малозначимый текст
<abbr> АББРЕВИАТУРА
<kbd> Ctrl + C
<sup> 23
<sub> H2O
<code> code
Имя Фамилия
г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя)
user@mail.com 
            <address>
              <strong>Имя Фамилия</strong>
              <br>
              г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя) <br>
              <a href="mailto:user@mail.com">user@mail.com</a>
            </address>

Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.

Emmet
            <blockquote>
              <p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
              <footer>Emmet</footer>
            </blockquote>

Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.

Emmet

Форматированный текст

Смотри так же БЭМ-блок для кода.

// Блочный код с тегом переноса строки 
// Вторая строка, написанная без символа переноса строки
              <pre>// Блочный код с тегом переноса строки <br>// Вторая строка, написанная без символа переноса строки</pre>
            
// Блочный код с символом переноса строки
        // Вторая строка
              <pre>// Блочный код с символом переноса строки
              // Вторая строка</pre>

SVG-спрайт c gulp-svgstore

Из файлов папки sprite-svg/svg/ в папку sprite-svg/img/ будет сгенерирован файл спрайта sprite-svg.svg, который далее будет скопирован в папку сборки. Стилевой файл блока не используется. Сам спрайт имеет вид:

        <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
          <symbol id="icon-boo" viewBox="0 0 30 30"><path d="..."/></symbol>
          <symbol id="icon-bs" viewBox="0 0 28 28"><path d="..."/></symbol>
          ...
        </svg>

Для вставки на страницу используйте конструкции svg > use со ссылками на id символа:

        <svg width="32" height="32">
          <use xlink:href="img/sprite-svg.svg#icon-boo"></use>
        </svg>

Чтобы использовать ссылки на внешние svg-файлы со спрайтами, используйте svg4everybody (включен в сборку по умолчанию).

Демонстрационный контент блока (иконки стрелок):

PNG-спрайт с spritesmith

Из файлов папки sprite-png/png/ в папку sprite-png/img/ будет сгенерирован файл спрайта sprite-[ЧИСЛОВОЙ_ИНДЕКС].svg, который далее будет скопирован в папку сборки.

Стилевой файл блока генерируется автоматически и содержит примеси для использования спрайтов. Отдельный файл элемента sprite-png__demo.scss содержит вызов примеси, генерирующей стили для всех составных частей спрайта.

Демонстрационный контент блока (иконки стрелок):

Закрыть

Иконка закрытия.

            <div class="close"><span></span></div>

Бургер

Анимированное превращение в крестик по добавлению модификатора.

            <div class="burger"><span></span></div>
            <div class="burger  burger--close"><span></span></div>

Главная навигация

По получению ссылками фокуса на их родителей с .main-nav__item добавляется модификатор .main-nav__item--show-child, что позволяет работать со вложенными меню с клавиатуры (сейчас предусмотрено только 3 уровня).

Код

Оформление блочных вставок кода.

        <pre class="code">
          <code>&lt;div&gt;
          <code>  Content</code>
          <code>&lt;/div&gt;</code>
        </pre>

Картинки-миниатюры

Оформление вставок изображений.

            <img class="thumb" src="img/joker.jpg" alt="" width="300">
            <a href="">
              <img class="thumb" src="img/joker.jpg" alt="" width="300">
            </a>

Сообщения

Заголовок Далеко-далеко за словесными горами в стране, гласных и согласных живут.

Заголовок

Далеко-далеко за словесными горами в стране, гласных и согласных живут.

Заголовок

Далеко-далеко за словесными горами в стране, гласных и согласных живут. 
            <p class="alert  alert--success">
              <span class="alert__header">Заголовок</span>
              Далеко-далеко за <a href="">словесными горами</a> в стране, гласных и согласных живут.
            </p>
             
            <div class="alert  alert--danger">
              <h1 class="alert__header">Заголовок</h1>
              Далеко-далеко за <a href="">словесными горами</a> в стране, гласных и согласных живут.
            </div>
             
            <div class="alert  alert--warning">
              <h4 class="alert__header">Заголовок</h4>
              Далеко-далеко за <a href="">словесными горами</a> в стране, гласных и согласных живут.
            </div>

Меню

            <ul class="menu">
              <li class="menu__item"><a class="menu__link" href="#">...</a></li>
              <li class="menu__item  menu__item--separator"><a class="menu__link" href="#">...</a></li>
              <li class="menu__item"><a class="menu__link" href="#">...</a></li>
            </ul>

Кнопки

Ссылка Ссылка 

            <a class="btn" href="">Ссылка</a>
            <input class="btn" type="submit" value="Input">
            <button class="btn">Button</button>
             
            <a class="btn  btn--disabled" href="">Ссылка</a>
            <input class="btn" type="submit" value="Input" disabled>
            <button class="btn" disabled>Button</button>

Текстовое поле формы

Обёртка — div. Внутри label

Стилизация ошибочного состояния вынесена в отдельный файл.

            <label class="field-text">
              <span class="field-text__name">...</span>
              <span class="field-text__input-wrap">
                <input class="field-text__input" type="text" placeholder="">
                <span class="field-text__help-text">...</span>
              </span>
            </label>
             
            <div class="field-text">
              <label class="field-text__name" for="demo-field">...</label>
              <span class="field-text__input-wrap">
                <input class="field-text__input" type="text" id="demo-field" placeholder="">
                <span class="field-text__help-text">...</span>
              </span>
            </div>
             
            <label class="field-text">
              <span class="field-text__name">...</span>
              <span class="field-text__input-wrap">
                <textarea class="field-text__input" placeholder=""></textarea>
                <span class="field-text__help-text">...</span>
              </span>
            </label>

Флажки

В стилевом файле есть закомментированные фрагменты для замены нативного элемента своим (svg).

Необязательный общий заголовок
Пояснение не обязательно.
У обертки дополнительно дописан field-checkbox__input-wrap--error

Стилизация ошибочного состояния вынесена в отдельный файл.

            <div class="field-checkbox">
              <label class="field-checkbox__name">
                <input class="field-checkbox__input" type="checkbox" checked>
                <span class="field-checkbox__name-text">Одинокий чекбокс такой одинокий, но с длинным... текстом внутри label-а. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни, свое рыбного решила. Точках семантика, решила космос переписывается толку безопасную журчит рыбными, рекламных несколько осталось свой! Знаках, дороге грамматики.</span>
              </label>
            </div>
             
            <div class="field-checkbox">
              <div class="field-checkbox__title">Необязательный общий заголовок</div>
              <div class="field-checkbox__input-wrap">
                <label class="field-checkbox__name">
                  <input class="field-checkbox__input" type="checkbox" checked>
                  <span class="field-checkbox__name-text">Текст у флажка</span>
                </label>
                <div class="field-checkbox__help-text-wrap">
                  <div class="field-checkbox__help-text">Пояснение не обязательно.</div>
                </div>
              </div>
              <div class="field-checkbox__input-wrap  field-checkbox__input-wrap--error">
                <label class="field-checkbox__name">
                  <input class="field-checkbox__input" type="checkbox">
                  <span class="field-checkbox__name-text">Ошибочный флажок</span>
                </label>
              </div>
              <div class="field-checkbox__input-wrap">
                <label class="field-checkbox__name">
                  <input class="field-checkbox__input" type="checkbox">
                  <span class="field-checkbox__name-text">Текст у флажка</span>
                </label>
              </div>
            </div>

Радиокнопки

В стилевом файле есть закомментированные фрагменты для замены нативного элемента своим (svg).

Необязательный общий заголовок
Пояснение не обязательно.
У обертки дополнительно дописан field-radio__input-wrap--error

Стилизация ошибочного состояния вынесена в отдельный файл.

            <div class="field-radio">
              <label class="field-radio__name">
                <input class="field-radio__input" type="radio" checked>
                <span class="field-radio__name-text">Одинокая радиокнопка такой одинокий, но с длинным... текстом внутри label-а. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни, свое рыбного решила. Точках семантика, решила космос переписывается толку безопасную журчит рыбными, рекламных несколько осталось свой! Знаках, дороге грамматики.</span>
              </label>
            </div>
             
            <div class="field-radio">
              <div class="field-radio__title">Необязательный общий заголовок</div>
              <div class="field-radio__input-wrap">
                <label class="field-radio__name">
                  <input class="field-radio__input" type="radio" name="demo-radio" checked>
                  <span class="field-radio__name-text">Текст у радиокнопки</span>
                </label>
                <div class="field-radio__help-text-wrap">
                  <div class="field-radio__help-text">Пояснение не обязательно.</div>
                </div>
              </div>
              <div class="field-radio__input-wrap">
                <label class="field-radio__name">
                  <input class="field-radio__input" type="radio" name="demo-radio">
                  <span class="field-radio__name-text">Текст у радиокнопки</span>
                </label>
              </div>
              <div class="field-radio__input-wrap">
                <label class="field-radio__name">
                  <input class="field-radio__input" type="radio" name="demo-radio">
                  <span class="field-radio__name-text">Текст у радиокнопки</span>
                </label>
              </div>
            </div>

Переключатели

Переключатели-флажки
Графика не используется, всё нарисовано CSS-ом.
            <div class="field-toggler">
              <div class="field-toggler__title">Переключатели-флажки</div>
              <div class="field-toggler__input-wrap">
                <label class="field-toggler__name">
                  <input class="field-toggler__input" type="checkbox">
                  <span class="field-toggler__name-text">Использовать</span>
                </label>
                <div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
              </div>
            </div>

Файл

Выбор файлов
Выбор файлов

Стилизация ошибочного состояния вынесена в отдельный файл.

            <div class="field-file">
              <div class="field-file__name">Выбор файлов</div>
              <label class="field-file__input-wrap">
                <input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" multiple>
                <span class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано</span>
                <span class="field-file__help-text">Отображение выбранного файла/файлов требует js. Стилизация — не требует.</span>
              </label>
            </div>

Range

Range
min="1" max="100" step="1" value="70", стилизован без js.
            <div class="field-range">
              <div class="field-range__name">Range</div>
              <div class="field-range__input-wrap">
                <input class="field-range__input" type="range" min="1" max="100" step="1" value="70">
                <div class="field-range__help-text"><code>min="1" max="100" step="1" value="70"</code></div>
              </div>
            </div>

Селект

Стилизация ошибочного состояния вынесена в отдельный файл.

            <label class="field-select">
              <span class="field-select__name">Селект</span>
              <span class="field-select__select-wrap">
                <select class="field-select__select">
                  <optgroup label="Группа">
                    <option>Значение 1</option>
                    <option>Значение 2</option>
                    <option>Значение 3</option>
                  </optgroup>
                  <option>Значение 10</option>
                </select>
                <span class="field-select__help-text">Обёртка — <code><label></code>.</span>
              </span>
            </label>

Блок отправки формы

* — обязательные поля
            <div class="field-actions">
              <div class="field-actions__text">* — обязательные поля</div>
              <button class="btn">Отправить</button>
            </div>

Группа полей

Форма

Легенда
* — обязательные поля
            <form action="https://httpbin.org/post" class="form" method="post">
              <fieldset>
                <legend>Название формы</legend>
                <label class="field-text">...</label>
                <div class="field-actions">...</div>
              </fieldset>
            </form>

Лейблы

Метка-div
Метка-span Метка-a 
            <div class="label">Метка-<code>div</code></div>
            <span class="label">Метка-<code>span</code></span>
            <a href="" class="label">Метка-<code>a</code></a>

Загрузчик

            <span class="loader"></span>

Таблицы

Таблица как БЭМ-блок, нет прописанных thead, tbody, tfoot
Имя Фамилия Мыло Статус Политическая ориентация
Иннокентий Иванов Хозяйственное Администратор «ВСЕГДА!»
Васисуалий Римский-Корсаков Душистое Пользователь Нижняя
Таблица как БЭМ-блок, есть thead, tbody, tfoot и у них есть классы
Имя Фамилия Мыло Статус Политическая ориентация
Иннокентий Иванов Хозяйственное Администратор «ВСЕГДА!»
Васисуалий Римский-Корсаков Душистое Пользователь Нижняя
Ктулху Ктулху user-name@ad.ru Патриарх Неизвестно
Итого: 18 попугаев, 15 длинных червяков, надувная женщина и украденный из церкви огарок дешевой свечи. 
            <table class="table">
              <caption>Таблица</caption>
              <thead class="table__header">
                <tr>
                  <th>Имя</th>
                  <th>Фамилия</th>
                </tr>
              </thead>
              <tbody class="table__body">
                <tr>
                  <td>Иннокентий</td>
                  <td>Иванов</td>
                </tr>
                <tr>
                  <td>Васисуалий</td>
                  <td>Римский-Корсаков</td>
                </tr>
                <tr>
                  <td>Ктулху</td>
                  <td>Ктулху</td>
                </tr>
              </tbody>
              <tfoot class="table__footer">
                <tr>
                  <td colspan="2">Итого:</td>
                </tr>
              </tfoot>
            </table>

Таблицы со скроллом на малых вьюпортах

Имя Фамилия Мыло Статус Политическая ориентация
Иннокентий Иванов Хозяйственное Администратор «ВСЕГДА!»
Васисуалий Римский-Корсаков Душистое Пользователь Нижняя 
            <div class="table-mobile-scroll">
              <table class="table">
                ...
              </table>
            </div>

Адаптивность для таблиц

Требует добавления атрибутов data-label для каждой ячейки.

Имя и фамилия Тип мироощущения
Анатоле Вассерман Девственность
Джакомо Казанова Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей. 
            <table class="table-responsive  table">
              <thead>
                <tr>
                  <th>Имя и фамилия</th>
                  <th>Тип мироощущения</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td data-label="Имя и фамилия">Анатоле Вассерман</td>
                  <td data-label="Тип мироощущения">Девственность</td>
                </tr>
                <tr>
                  <td data-label="Имя и фамилия">Джакомо Казанова</td>
                  <td data-label="Тип мироощущения">Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи.</td>
                </tr>
              </tbody>
            </table>

Пагинация

            </div class="pagination">
              </a href="" class="pagination__item">1<//a>
              </span class="pagination__item">...<//span>
              </a href="" class="pagination__item">5<//a>
              </a href="" class="pagination__item  pagination__item--active">6<//a>
              </a href="" class="pagination__item">123<//a>
              </span class="pagination__item">...<//span>
              </a href="" class="pagination__item">999<//a>
            <//div>

Хлебные крошки

            <ul class="breadcrumbs">
              <li class="breadcrumbs__item"><a href="" class="breadcrumbs__link">Главная</a></li>
              <li class="breadcrumbs__item"><a href="" class="breadcrumbs__link">Каталог</a></li>
              <li class="breadcrumbs__item"><a href="" class="breadcrumbs__link">Маркеры</a></li>
            </ul>

Прогресс

10% 
            <div class="progress">
              <div class="progress__bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
                <span class="progress__bartext">10%</span>
              </div>
            </div>

Медиа-компонент

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Запятой если рыбного всемогущая выйти за но, то щеке, одна свое снова сбить вопроса? Семь свой, его это. Силуэт!

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Запятой если рыбного всемогущая выйти за но, то щеке, одна свое снова сбить, вопроса? Семь свой, его это. Силуэт!

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Запятой если рыбного всемогущая выйти за но, то щеке, одна свое снова сбить, вопроса? Семь свой, его это. Силуэт!

            <article class="media">
              <div class="media__picture">...</div>
              <div class="media__body">...</div>
            </article>

Адаптирующийся медиаконтент

16/9 по умолчанию, 4/3 с модификатором.

            <div class="embed-responsive  embed-responsive--16-9">
              <iframe ...></iframe>
            </div>

Круговые диаграммы

0%
20%
40%
90%
80%
100%
110%
            <div class="pie-chart">0%</div>
            <div class="pie-chart" data-border="4">20%</div>
            <div class="pie-chart" data-size="200" data-border="10">40%</div>

Определение мобильного устройства

Зависимость от isMobile. Последний должен быть включен в сборку (есть по умолчанию) или подключен к странице иным образом.

JavaScript, добавляющий на <html> класс is-mobile, если страница открыта с мобильного устройства. Так же, добавляются модификаторы блока с указанием типа устройства и производителя.

            <html class="is-mobile  is-mobile--android-phone  is-mobile--android-device  is-mobile--phone">
              ...
            </html>

Кнопка скролла вверх

Кнопка появляется, если вертикальный скролл более 900 пикс.

Зависит от jQuery (включен в сборку по умолчанию).

            <a href="#" class="to-top" id="toTop">↑</a>

Выпадающий блок

Основан на dropdown.js из Bootstrap. Изменения минимальны.

Зависит от jQuery (включен в сборку по умолчанию).

Пункт списка (выпадает span) Пункт меню весьма длинный Второй пункт

События

        // Факт открытия
        $('#test').on('shown.nth.dropdown', function () {
          console.log('shown.nth.dropdown');
        });
         
        // Факт закрытия
        $('#test').on('hidden.nth.dropdown', function () {
          console.log('hidden.nth.dropdown');
        });
      
              <div class="dropdown">
                <a id="dropdown-demo-1" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка</a>
                <ul class="dropdown__menu  menu" aria-labelledby="dropdown-demo-1">
                  <li class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
                  <li class="menu__item"><a class="menu__link" href="#">Пункт списка, после которого следует разделитель</a></li>
                  <li class="menu__item"><a class="menu__link" href="#">Пункт меню весьма длинный, такой, что прямо адски длинный, очень много, реально много слов!</a></li>
                </ul>
              </div>
              
              <span class="dropdown">
                <button class="dropdown__toggler  btn" id="dropdown-demo-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Выпадает список
                </button>
                <span class="dropdown__menu  menu" aria-labelledby="dropdown-demo-2">
                  <span class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>span</code>)</a></span>
                  <span class="menu__item"><a class="menu__link" href="">Пункт меню весьма длинный</a></span>
                  <span class="menu__item"><a class="menu__link" href="">Второй пункт</a></span>
                </span>
              </span>
              
              <div class="dropdown">
                <a id="dropdown-demo-3" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка</a>
                <div class="dropdown__menu" aria-labelledby="dropdown-demo-3">
                  <form action="https://httpbin.org/post" method="post">
                    <input type="text">
                    <select>
                      <option>Название пункта</option>
                    </select>
                    <textarea rows="3"></textarea>
                    <button class="btn">Отправить эту форму</button>
                  </form>
                </div>
              </div>
              
              <div class="dropdown">
                <button class="dropdown__toggler  btn" id="dropdown-demo-4" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Выпадает список вверх
                </button>
                <ul class="dropdown__menu  dropdown__menu--up  menu" aria-labelledby="dropdown-demo-4">
                  <li class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
                </ul>
              </div>
              
              <div class="dropdown">
                <button class="dropdown__toggler  btn" id="dropdown-demo-5" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Выпадает список вверх от пр. края
                </button>
                <ul class="dropdown__menu  dropdown__menu--up  dropdown__menu--right  menu" aria-labelledby="dropdown-demo-5">
                  <li class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
                </ul>
              </div>

Карусель owl-carousel

Зависит от jQuery (включен в сборку по умолчанию).

            <div class="owl-carousel" id="owl-carousel-demo">
              <div>slide content 1</div>
              <div>slide content 2</div>
              ...
            </div>
          
            $("#owl-carousel-demo").owlCarousel({
              items: 3,
              nav: true,
              loop: true
            });

Карусель swipe

1111
2222
3333
            <div id="swipe-slider" class="swipe">
              <div class="swipe-wrap">
                <div>1111</div>
                <div>2222</div>
                <div>3333</div>
              </div>
            </div>
          
            window.mySwipe = new Swipe(document.getElementById('swipe-slider'), {
              startSlide: 0,
              speed: 400,
              auto: 3000,
              draggable: true,
              continuous: true,
              disableScroll: true,
              stopPropagation: true,
              callback: function(index, elem, dir) {},
              transitionEnd: function(index, elem) {}
            });

Выбор диапазона с noUiSlider

            <div class="nouislider" id="demo-nouislider"></div>
            <input type="number" value="10" id="demo-nouislider-start">
            <input type="number" value="90" id="demo-nouislider-end">
          
            var demoNoUiSlider = document.getElementById('demo-nouislider');
            var demoNoUiSliderStartInput = document.getElementById('demo-nouislider-start');
            var demoNoUiSliderEndInput = document.getElementById('demo-nouislider-end');
            noUiSlider.create(demoNoUiSlider, {
              start: [demoNoUiSliderStartInput.value, demoNoUiSliderEndInput.value],
              connect: true,
              step: 1,
              range: {
                'min': 0,
                'max': 100
              }
            });
            demoNoUiSlider.noUiSlider.on('update', function( values, handle ) {
              var value = values[handle];
              if ( handle ) {
                demoNoUiSliderEndInput.value = Math.round(value);
              } else {
                demoNoUiSliderStartInput.value = Math.round(value);
              }
            });
            demoNoUiSliderEndInput.addEventListener('change', function(){
              demoNoUiSlider.noUiSlider.set([null, this.value]);
            });
            demoNoUiSliderStartInput.addEventListener('change', function(){
              demoNoUiSlider.noUiSlider.set([this.value, null]);
            });

Боковое меню

Простейший компонент, 3 строчки JavaScript. Меню показывается по клику на любой элемент с data-toggle="off-canvas" или data-toggle-native="off-canvas". В последнем случае произойдет и действие браузера по умолчанию.

Показать боковое меню Показать боковое меню 
            <div class="off-canvas" id="off-canvas">
              <aside class="off-canvas__aside" role="complementary" aria-label="Боковое меню">...</aside>
              <div class="off-canvas__page-content">...</div>
              <div class="off-canvas__overlay" data-toggle="off-canvas"></div>
            </div>
             
            <button class="btn" type="button" data-toggle="off-canvas">Показать/скрыть боковое меню</button>
            <a href="#SOME_HASH" data-toggle-native="off-canvas">Показать/скрыть боковое меню и перейти на якорь</a>

Модальные окна

Основан на modal.js из Bootstrap. Изменения минимальны (имена классов, пространство имен событий, некоторые упрощения).

Зависит от jQuery (включен в сборку по умолчанию).

Показать модальное окно 2 Показать модальное окно 3

Методы: 

        $('#modal-demo-01').modal(options)
        $('#modal-demo-01').modal('show')
        $('#modal-demo-01').modal('hide')
        $('#modal-demo-01').modal('toggle')

События: 

        $('#modal-demo-01').on('show.nth.modal', function(){
          console.log('show.nth.modal');
        });
        $('#modal-demo-01').on('shown.nth.modal', function(){
          console.log('shown.nth.modal');
        });
        $('#modal-demo-01').on('hide.nth.modal', function(){
          console.log('hide.nth.modal');
        });
        $('#modal-demo-01').on('hidden.nth.modal', function(){
          console.log('hidden.nth.modal');
        });
      
            <button class="btn" type="button" data-toggle="modal" data-target="#modal-demo-01">Показать модальное окно 1</button>
            <a href="#modal-demo-01" data-toggle="modal">Показать модальное окно 2</a>
            <span data-toggle="modal" data-target="#modal-demo-01">Показать модальное окно 3</span>
             
            <div id="modal-demo-01" class="modal" tabindex="-1" role="dialog">
              <div class="modal__dialog" role="document">
                <div class="modal__content">
                  <div class="modal__header">
                    <span class="close  modal__close" data-dismiss="modal" aria-label="Закрыть"><span></span></span>
                    <h4 class="modal__title">Modal 01 title</h4>
                  </div>
                  <div class="modal__body">...</div>
                  <div class="modal__footer">
                    <button type="button" class="btn" data-dismiss="modal">Закрыть</button>
                  </div>
                </div>
              </div>
            </div>

Вкладки

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

01 Далеко-далеко.

02 Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные.

03 Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные.

04 Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные.

            <div class="tabs">
              <ul class="tabs__links" role="tablist">
                <li class="tabs__link-wrap  tabs__link-wrap--active" role="presentation">
                  <a href="#demo-tab-01" class="tabs__link" data-toggle="tab" role="tab">Вкладка 01</a>
                </li>
                <li class="tabs__link-wrap" role="presentation">
                  <a href="#demo-tab-04" class="tabs__link" data-toggle="tab" role="tab">Вкладка 04</a>
                </li>
              </ul>
              <div class="tabs__content-wrapper">
                <div class="tabs__content-item  tabs__content-item--active" id="demo-tab-01" role="tabpanel">...</div>
                <div class="tabs__content-item" id="demo-tab-04" role="tabpanel">...</div>
              </div>
            </div>