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

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

Код

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

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

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

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