@@include('_include/page_head.html')

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

Страница

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

            <html class="page">
              <head>...</head>
              <body>...</body>
            </html>

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

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

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

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

Текст, теги

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

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

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

Заголовок 1

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

Заголовок 2

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

Заголовок 3

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

Заголовок 4

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

Заголовок 5

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

Заголовок 6

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

  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="30" height="30">
          <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 содержит вызов примеси, генерирующей стили для всех составных частей спрайта.

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

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

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

            <nav id="main-nav" class="main-nav">
              <div id="main-nav-toggler" class="main-nav__toggler"><span></span></div>
              <ul class="main-nav__list">
                <li class="main-nav__item  main-nav__item--active">
                  <a href="" class="main-nav__link">
                    Страницы
                  </a>
                  <div class="main-nav__lvl-2">
                    <ul class="main-nav__list-lvl-2">
                      <li class="main-nav__item-lvl-2">
                        <a href="" class="main-nav__link-lvl-2">
                          Контакты
                        </a>
                      </li>
                      <li class="main-nav__item-lvl-2">
                        <a href="" class="main-nav__link-lvl-2">
                          Услуги
                        </a>
                        <div class="main-nav__lvl-3">
                          <ul class="main-nav__list-lvl-3">
                            <li class="main-nav__item-lvl-3">
                              <a href="" class="main-nav__link-lvl-3">
                                Вёрстка HTML-CSS
                              </a>
                            </li>
                            ...
                          </ul>
                        </div>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="main-nav__item">
                  <a href="https://github.com/nicothin/NTH-start-project" class="main-nav__link">
                    Репозиторий
                  </a>
                </li>
                ...
              </ul>
            </nav>

Код

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

        <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>

Кнопки

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

            <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>

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

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

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

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

Меню

            <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>

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

Зависит от 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>

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

Обёртка — 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).

Необязательный общий заголовок
Пояснение не обязательно.
            <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">
                <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).

Необязательный общий заголовок
Пояснение не обязательно.
            <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>
↑ @@include('_include/page_bottom.html')