@@include('_include/page_head.html') @@include('blocks/page-header/page-header.html')

Библиотека блоков проекта

Стартовое состояние проекта содержит ряд блоков и глобальных стилей, описанных и показанных в этом файле. Если некоторые блоки не работают, значит импорт их стилей отключен в файле диспетчера подключений (такие блоки не используются на этом проекте).

Текст, теги

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

div class="p". Это единственный класс в этом разделе. Оставлен, ввиду своей микроскопичности. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
            <div class="p">...</div>

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

Заголовки и параграфы

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

Заголовок 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

Контактная информация автора материала

Тег address представляет контактную информацию для ближайшего элемента-предка article или body. Если это элемент body, то контактная информация применяется ко всему документу целиком. Тег обязан не использоваться для предоставления произвольного адреса (например, почтовых адресов), если эти адреса не являются реальной контактной информацией. Подробнее

Имя Фамилия
г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя)
imya@mail.com 
            <address>
              <strong>Имя Фамилия</strong>
              <br>
              г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя) <br>
              <a href="mailto:imya@mail.com">imya@mail.com</a>
            </address>

Блочные цитаты

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

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

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

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

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

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

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

Горизонтальный ассоциативный список

Ассоциативный список
dl представляет собой ассоциативный список, состоящий из нуля и более пар имя-значение. Варианты использования: глоссарий, диалог, анонсы новостей.
Второй термин
Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное. Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное.
Второе определение подряд.
Конституционально-эзотерический концептуализм
Некое определение многословного термина.
          <dl class="dl-horizontal">
            <dt>Ассоциативный список</dt>
            <dd><code>dl</code> представляет собой ассоциативный список, состоящий из нуля и более пар имя-значение. Варианты использования: глоссарий, диалог, анонсы новостей.</dd>
            <dt>Второй термин</dt>
            <dd>Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное. Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное.</dd>
            <dd>Второе определение подряд.</dd>
            <dt>Конституционально-эзотерический концептуализм</dt>
            <dd>Некое определение многословного термина.</dd>
          </dl>

Блочные цитаты по правому краю

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

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

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

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

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

Нумерованные списки с особыми маркерами

Если используются ol или ul, пунктам списка можно не давать классов. При использовании других тегов (см. пример кода) нужны классы у элементов.

  1. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами.
  2. Проектах за вопрос курсивных.
    • Одна послушавшись дал, большого.
    • Далеко-далеко за словесными горами.
  3. Далеко-далеко за словесными горами.
Далеко-далеко за словесными горами.
Одна послушавшись дал, большого.
Проектах за вопрос курсивных.
Власти, она себя за?
Решила алфавит, назад маленький.
          <ol class="list-nums">
            <li>Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами.</li>
            <li>Проектах за вопрос курсивных.
              <ul class="list-nums">
                <li>Одна послушавшись дал, большого.</li>
                <li>Далеко-далеко за словесными горами.</li>
              </ul>
            </li>
            <li>Далеко-далеко за словесными горами.</li>
          </ol>
           
          <div class="list-nums">
            <div class="list-nums__item">Далеко-далеко за словесными горами.</div>
            ...
          </div>

Подсветка маркера отдельного пункта модификатором

Подсветка маркера пункта модификатором элемента .list-nums__item.list-nums__item--main (отдельный LESS-файл)

  1. Далеко-далеко за словесными горами.
  2. Проектах за вопрос курсивных.
            <ol class="list-nums">
              <li>Далеко-далеко за словесными горами.</li>
              <li class="list-nums__item  list-nums__item--main">Проектах за вопрос курсивных.</li>
            </ol>

Подсветка всех маркеров списка модификатором

Подсветка всех маркеров списка модификатором блока .list-nums.list-nums--main (отдельный LESS-файл). Распространяется только на тот список, которому дан модификатор.

  1. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами.
  2. Проектах за вопрос курсивных.
    • Одна послушавшись дал, большого.
    • Далеко-далеко за словесными горами.
  3. Далеко-далеко за словесными горами.
  • Далеко-далеко за словесными горами.
  • Одна послушавшись дал, большого.
  • Проектах за вопрос курсивных.
  • Власти, она себя за?
  • Решила алфавит, назад маленький.
            <ol class="list-nums  list-nums--main">
              <li>Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами.</li>
              <li>Проектах за вопрос курсивных.
                <ul class="list-nums">
                  <li>Одна послушавшись дал, большого.</li>
                  <li>Далеко-далеко за словесными горами.</li>
                </ul>
              </li>
              <li>Далеко-далеко за словесными горами.</li>
            </ol>

Маркированные списки с особыми маркерами

  • Далеко-далеко за словесными горами.
  • Одна послушавшись дал, большого.
  • Проектах за вопрос курсивных.
  • Власти, она себя за?
    • Одна послушавшись дал, большого.
    • Далеко-далеко за словесными горами.
  • Решила алфавит, назад маленький.
  1. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами.
  2. Одна послушавшись дал, большого.
  3. Проектах за вопрос курсивных.
  4. Власти, она себя за?
          <ul class="list-bullet">
            <li>Далеко-далеко за словесными горами.</li>
            <li>Одна послушавшись дал, большого.</li>
            <li>Проектах за вопрос курсивных.</li>
            <li>Власти, она себя за?
              <ul>
                <li>Одна послушавшись дал, большого.</li>
                <li>Далеко-далеко за словесными горами.</li>
              </ul>
            </li>
            <li>Решила алфавит, назад маленький.</li>
          </ul>

Текстовые хелперы

Классов, вроде .test-accent (увеличенный текст), .test-secondary (уменьшенный текст), .test-muted («приглушенный» текст), .align-center (выравнивание текста по центру), .bg-primary (заданный цвет фона) и т.п. тут не будет. Это не фреймворк, это стартовая библиотека блоков. Предполагается, что пользователь в состоянии прицельно применить любую стилизацию по семантическому классу уровня блока/элемента/модификатора.

Изображения с рамкой

Без ссылок: 
          <img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt="">
          <img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt="">
Ссылками:
          <a href=""><img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt=""></a>
          <a href=""><img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt=""></a>
          <a href=""><img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt=""></a>

Таблицы

Таблица 1
Имя Поросёнок
Фамилия Пётр
Отчество Баракович
Таблица 2
Имя Фамилия Отчество
Поросёнок Пётр Баракович 
          <table>
            <caption>Таблица 1</caption>
            <tr>
              <th>Имя</th>
              <td>Поросёнок</td>
            </tr>
            <tr>
              <th>Фамилия</th>
              <td>Пётр</td>
            </tr>
            <tr>
              <th>Отчество</th>
              <td>Баракович</td>
            </tr>
          </table>
           
          <table>
            <caption>Таблица 2</caption>
            <tr>
              <th>Имя</th>
              <th>Фамилия</th>
              <th>Отчество</th>
            </tr>
            <tr>
              <td>Поросёнок</td>
              <td>Пётр</td>
              <td>Баракович</td>
            </tr>
          </table>

Таблица как БЭМ-блок

Тут и ниже во всех примерах (хоть сколько-нибудь широких таблиц) в демонстрации использована обертка для адаптивности с горизонтальной прокруткой.

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

Нежадная таблица

Модификатор table--not-greed, отдельный less-файл.

Не могут иметь адаптивность с горизонтальной прокруткой (становятся жадными).

Имя Фамилия
Иннокентий Барлаух
Васисуалий Пылепев
Ктулху Втанк 
            <table class="table  table--not-greed">
              ...
            </table>

Подсветка строк по наведению

Модификатор table--hover, отдельный less-файл. Подсвечиваются только строки внутри tbody.

Таблица как БЭМ-блок, элементы имеют классы
Имя Фамилия Мыло Статус Политическая ориентация
Иннокентий Барлаухенштицкен-Ламанческий Хозяйственное Администратор «ВСЕГДА!»
Васисуалий Пылепневмомешковыколачивателев Душистое Юзверь Нижняя
Ктулху Втанк ktulkhu@ad.ru Патриарх Яизм
Итого: 18 попугаев, 15 длинных червяков, надувная женщина и украденный из церкви огарок дешевой свечи. 
            <table class="table  table--hover">
              <tbody>
                <tr>
                  <td>...</td>
                </tr>
              </tbody>
            </table>

Разлинованная таблица

Модификатор table--striped, отдельный less-файл. Подсвечиваются только строки внутри tbody.

Таблица как БЭМ-блок, элементы имеют классы
Имя Фамилия Мыло Статус Политическая ориентация
Иннокентий Барлаухенштицкен-Ламанческий Хозяйственное Администратор «ВСЕГДА!»
Васисуалий Пылепневмомешковыколачивателев Душистое Юзверь Нижняя
Ктулху Втанк ktulkhu@ad.ru Патриарх Яизм
Васисуалий Петров Душистое Монстр Нижняя
Ктулху Втанк Домашнее от Агафьи Патриарх ИдиотъЪ
Итого: 18 попугаев, 15 длинных червяков, надувная женщина и украденный из церкви огарок дешевой свечи. 
            <table class="table  table--striped">
              <tbody>
                <tr>
                  <td>...</td>
                </tr>
              </tbody>
            </table>

Адаптивные таблицы с повторяющимися названиями ячеек

Для просмотра адаптации таблицы сделайте вьюпорт узким.

Внимание! Адаптивные таблицы требуют добавления дата-атрибутов.

Внимание! Применение варианта по умолчанию ограничено таблицами, имеющими заголовочные ячейки сверху.

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

Модификация для горизонтального перестроения

Модификатор table-responsive--horizontal, отдельный less-файл.

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

Адаптивные таблицы c горизонтальной прокруткой

Для просмотра адаптации таблицы сделайте вьюпорт узким.

Иннокентий Барлаухенштицкен-Ламанческий Хозяйственное Администратор «ВСЕГДА!»
Васисуалий Пылепневмомешковыколачивателев Душистое Юзверь Нижняя
Ктулху Втанк ktulkhu@ad.ru Патриарх Яизм
Таблица как БЭМ-блок, элементы имеют классы
Имя Фамилия Мыло Статус Политическая ориентация
Иннокентий Барлаухенштицкен-Ламанческий Хозяйственное Администратор «ВСЕГДА!»
Васисуалий Пылепневмомешковыколачивателев Душистое Юзверь Нижняя
Ктулху Втанк ktulkhu@ad.ru Патриарх Яизм
Итого: 18 попугаев, 15 длинных червяков, надувная женщина и украденный из церкви огарок дешевой свечи. 
          <div class="table-responsive-scroll">
            <table> <!-- Можно с class="table", можно без. -->
              ...
            </table>
          </div>

Адаптивные таблицы cо сменой строк на колонки

Для просмотра адаптации таблицы сделайте вьюпорт узким.

ВНИМАНИЕ! Контент в ячейках таблицы жёстко фиксируется как однострочный (нет зависимости развёрнутых ячеек).

ВНИМАНИЕ! Ячейки не должны объединяться. caption скрывается.

Таблица как БЭМ-блок, элементы имеют классы
Имя Фамилия Мыло Статус Политическая ориентация
Иннокентий Барлаухенштицкен-Ламанческий Хозяйственное Администратор «ВСЕГДА!»
Васисуалий Пылепневмомешковыколачивателев Душистое Юзверь Нижняя
Ктулху Втанк ktulkhu@ad.ru Патриарх Яизм
1 2 3 4 5 
          <div class="table-responsive-rotate">
            <table> <!-- Можно с class="table", можно без. -->
              ...
            </table>
          </div>

С неподвижными названиями

Модификатор table-responsive-rotate--thead-fix, отдельный less-файл. Требует наличия thead, чтобы было что фиксировать.

Требует дополнительной обёртки, см. код примера.

Таблица как БЭМ-блок, элементы имеют классы
Имя Фамилия Мыло Статус Политическая ориентация
Иннокентий Барлаухенштицкен-Ламанческий Хозяйственное Администратор «ВСЕГДА!»
Васисуалий Пылепневмомешковыколачивателев Душистое Юзверь Нижняя
Ктулху Втанк ktulkhu@ad.ru Патриарх Яизм
1 2 3 4 5 
            <div class="table-responsive-rotate  table-responsive-rotate--thead-fix">
              <div class="table-responsive-rotate__inner">
                <table> <!-- Можно с class="table", можно без. -->
                  <thead>
                    ...
                  </thead>
                  <tbody>
                    ...
                  </tbody>
                </table>
              </div>
            </div>

Формы по умолчанию

Формы по умолчанию имеют стилизацию. См. глобальный стилизационный файл для форм.

Это legend fieldset-а
Легенда





Текстовые поля

Размеры задаются в em — зависят от размера шрифта родительского элемента.

Обёртка — div.
          <!-- БЭМ-блок может быть как label, так и div -->
           
          <label class="field-text">
            <div class="field-text__name">Многострочное текстовое поле</div>
            <div class="field-text__input-wrap">
              <textarea class="field-text__input" placeholder="textarea"></textarea>
              <div class="field-text__help-text">Необязательное пояснение</div>
            </div>
          </label>
           
          <div class="field-text">
            <label class="field-text__name" for="text-field-1">Любое поле, выглядящее как текстовое</label>
            <div class="field-text__input-wrap">
              <input class="field-text__input" id="text-field-1" type="text" placeholder="input[type=text]">
              <div class="field-text__help-text">Необязательное пояснение</div>
            </div>
          </div>

Увеличенный размер

Модификатор field-text--lg, отдельный less-файл. Модификатор меняет font-size блока в em-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).

Обёртка — div.
            <label class="field-text  field-text--lg">
              <div class="field-text__name">Любое поле, выглядящее как текстовое</div>
              <div class="field-text__input-wrap">
                <input class="field-text__input" id="text-field-1" type="text" placeholder="input[type=text]">
                <div class="field-text__help-text">Необязательное пояснение</div>
              </div>
            </label>

Уменьшенный размер

Модификатор field-text--sm, отдельный less-файл. Модификатор меняет font-size блока в em-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).

Обёртка — div.
            <label class="field-text  field-text--sm">
              <div class="field-text__name">Любое поле, выглядящее как текстовое</div>
              <div class="field-text__input-wrap">
                <input class="field-text__input" id="text-field-1" type="text" placeholder="input[type=text]">
                <div class="field-text__help-text">Необязательное пояснение</div>
              </div>
            </label>

Флажки (чекбоксы)

Размеры задаются в em — зависят от размера шрифта родительского элемента.

Поскольку при увеличении шрифта изображение флажка в некоторых браузерах не увеличивается, на больших размерах шрифта смотрится — так себе.

Стандартный флажок
Пояснение не обязательно.
Несколько стандартных флажков с переносами строк


Разметка никак не модифицируется, просто добавляются дополнительные label.
Несколько стандартных флажков
Разметка никак не модифицируется, просто добавляются дополнительные label.
          <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">Пояснение не обязательно.</div>
            </div>
          </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>
              <label class="field-checkbox__name">
                <input class="field-checkbox__input" type="checkbox">
                <span class="field-checkbox__name-text">Переиспользовать</span>
              </label>
              ...
              <div class="field-checkbox__help-text">Разметка никак не модифицируется...</div>
            </div>
          </div>

Собственные флажки (картинкой)

Модификатор field-checkbox--custom, отдельный less-файл. Изображения в формате SVG, вписываются в CSS-файл функцией data-uri() компилятора LESS.

Собственный флажок
Пояснение не обязательно.
Несколько собственных флажков с переносами строк


Разметка никак не модифицируется, просто добавляются дополнительные label.
Несколько собственных флажков
Разметка никак не модифицируется, просто добавляются дополнительные label.
            <div class="field-checkbox  field-checkbox--custom">
              <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">Пояснение не обязательно.</div>
              </div>
            </div>
             
            <div class="field-checkbox  field-checkbox--custom">
              <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>
                <label class="field-checkbox__name">
                  <input class="field-checkbox__input" type="checkbox">
                  <span class="field-checkbox__name-text">Переиспользовать</span>
                </label>
                ...
                <div class="field-checkbox__help-text">Разметка никак не модифицируется...</div>
              </div>
            </div>

Увеличенный размер

Модификатор field-checkbox--lg, отдельный less-файл.

Стандартный флажок
Пояснение не обязательно.
Несколько стандартных флажков
Разметка никак не модифицируется, просто добавляются дополнительные label.
Собственный флажок
Пояснение не обязательно.
Несколько собственных флажков
Разметка никак не модифицируется, просто добавляются дополнительные label.
            <div class="field-checkbox  field-checkbox--lg">
              <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">Пояснение не обязательно.</div>
              </div>
            </div>

Уменьшенный размер

Модификатор field-checkbox--sm, отдельный less-файл.

Стандартный флажок
Пояснение не обязательно.
Несколько стандартных флажков
Разметка никак не модифицируется, просто добавляются дополнительные label.
Собственный флажок
Пояснение не обязательно.
Несколько собственных флажков
Разметка никак не модифицируется, просто добавляются дополнительные label.
            <div class="field-checkbox  field-checkbox--sm">
              <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">Пояснение не обязательно.</div>
              </div>
            </div>
Стандартная радиокнопка
Пояснение не обязательно.
Стандартные радиокнопки
Разметка никак не модифицируется, просто добавляются дополнительные label.
Увеличен font-size родителя
Пояснение не обязательно.
Увеличен font-size родителя
.field-radio.field-radio--custom (отдельный less-файл)
Собственная радиокнопка
Есть общее название. При желании радиокнопок можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией data-uri() компилятора LESS.
Собственные радиокнопки
Разметка никак не модифицируется, просто добавляются дополнительные label.
.field-radio.field-radio--lg (отдельный less-файл)

Размер изменён благодаря модификатору. Модификатор меняет font-size блока в em-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).

Стандартная радиокнопка
Пояснение не обязательно.
Собственные радиокнопки
.field-radio.field-radio--sm (отдельный less-файл)

Размер изменён благодаря модификатору. Модификатор меняет font-size блока в em-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).

Стандартная радиокнопка
Пояснение не обязательно.
Собственные радиокнопки

Элемент переключателя стилизован с ипользованием px (с em нельзя настроить точные пиксельные размеры для всех font-size родителя). Сам блок подстраивается под размер шрифта родителя, переключатель — нет.

Переключатель-флажок
Графика не используется, всё нарисовано CSS-ом.
Переключатели-флажки
Графика не используется, всё нарисовано CSS-ом.
Переключатель-радиокнопка
Графика не используется, всё нарисовано CSS-ом.
Переключатели-радиокнопки
Графика не используется, всё нарисовано CSS-ом.
.field-select.field-select--lg (отдельный less-файл)

Размер изменён благодаря модификатору. Модификатор меняет font-size блока в em-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).

.field-select.field-select--sm (отдельный less-файл)

Размер изменён благодаря модификатору. Модификатор меняет font-size блока в em-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).

Range
min="1" max="100" step="1" value="70"
Range
min="20" max="100" step="10" value="20"
Увеличен font-size родителя
min="1" max="30" step="1" value="3", стилизован без JS.
.field-range.field-range--lg (отдельный less-файл)

Размер изменён благодаря модификатору. Модификатор меняет font-size блока в em-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).

Range
min="1" max="30" step="1" value="3", стилизован без JS.
.field-range.field-range--sm (отдельный less-файл)

Размер изменён благодаря модификатору. Модификатор меняет font-size блока в em-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).

Range
min="1" max="30" step="1" value="3", стилизован без JS.
Выбор файлов
Увеличен font-size родителя
.field-file.field-file--lg (отдельный less-файл)

Размер изменён благодаря модификатору. Модификатор меняет font-size блока в em-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).

Выбор файлов
.field-file.field-file--sm (отдельный less-файл)

Размер изменён благодаря модификатору. Модификатор меняет font-size блока в em-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).

Выбор файлов
Форма
Общее название
Есть общее название.
Выбор файлов
Range
min="1" max="100" step="1" value="70"
.form.form--horizontal (отдельный less-файл)
Общее название
Есть общее название.
Нет общего названия, но оставлен пустой div для него.
Нет общего названия и отсутствует пустой div для него.
Нет общего названия и отсутствует пустой div для него.
Переключатели-флажки
Графика не используется, всё нарисовано CSS-ом.
Выбор файлов
Range
min="1" max="100" step="1" value="70"

Кнопки

Показанные кнопки стилизуются примесями. Для создания индивидуальных кнопок используйте примесь .btn() или полностью индивидуальное оформление с включением правил этой примеси.

Cсылка Cсылка Cсылка Cсылка 

            <a class="btn" href="">Cсылка</a>
            <a class="btn" href="">Cсылка</a>
            <input class="btn" type="submit" value="Input">
            <button class="btn">Button</button>
             
            <a class="btn  btn--main" href="">Cсылка</a>
            <input class="btn  btn--main" type="submit" value="Input">
            <button class="btn  btn--main">Button</button>
             
            <a class="btn  btn--success" href="">Cсылка</a>
            <input class="btn  btn--success" type="submit" value="Input">
            <button class="btn  btn--success">Button</button>
             
            <a class="btn  btn--danger" href="">Cсылка</a>
            <input class="btn  btn--danger" type="submit" value="Input">
            <button class="btn  btn--danger">Button</button>

Увеличение и уменьшение модификаторами

Cсылка (lg)

Cсылка (sm) 

            <a class="btn  btn--lg" href="";>Cсылка (lg)</a>
            <input class="btn  btn--lg" type="submit" value="Input (lg)">
            <button class="btn  btn--lg">Button (lg)</button>
             
            <a class="btn  btn--sm" href="">Cсылка (sm)</a>
            <input class="btn  btn--sm" type="submit" value="Input (sm)">
            <button class="btn  btn--sm">Button (sm)</button>

Блочные кнопки

Cсылка 

            <a class="btn  btn--block" href="">Cсылка</a>
            <input class="btn  btn--block  btn--main" type="submit" value="Input">
            <button class="btn  btn--block  btn--success  btn--lg">Button (lg)</button>

Стилизованные формы

Стилизация: БЭМ-блоки и модификаторы. Опирается на стилизацию форм по умолчанию.

Группы текстовых полей, селектов, кнопок

Плюс возможные добавочные неинтерактивные элементы.

$
.00
$ .00
$

Группа кнопок

Радиокнопки как кнопки

Флажки (чекбоксы) как кнопки

TODO

Кнопки

Стилизация: БЭМ-блок .btn и модификаторы.

Свойства:

Выпадает div с произвольным контентом. Ссылка какая-то.

События

<span role="presentation" class="dropdown" id="test">
  <a href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка с выпадающим элементом</a>
  <ul class="dropdown__menu" aria-labelledby="qwer">
    <li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</span>
// Факт открытия
$('#test').on('shown.nth.dropdown', function () {
  console.log('shown.nth.dropdown');
});

// Факт закрытия
$('#test').on('hidden.nth.dropdown', function () {
  console.log('hidden.nth.dropdown');
});

Breakpoints

Ширины, на которых возможна перестройка блоков проекта:

Переменная Ширина в px по умолчанию ID сетки, начинающей срабатывать
@screen-xs 0 XS
@screen-sm 480 SM
@screen-md 768 MD
@screen-lg 992 LG
@screen-xl 1200 XL
@screen-xxl 1800 XXL

Модульная сетка на flexbox

Стилизация: БЭМ-блоки .row, .col-[ID]-[COL], .col-[ID]-offset-[COL]

Возможные ID сетки: xs, sm, md, lg, xl, xxl (xxl по умолчанию закомментированы). Вдохновлено Bootstrap 4.

.col-xs-12 .col-sm-6 .col-md-4 .col-lg-3
.col-xs-12 .col-sm-6 .col-md-4 .col-lg-3
.col-xs-12 .col-sm-6 .col-md-4 .col-lg-3
.col-xs-12 .col-sm-6 .col-md-4 .col-lg-3
.col-md-2  .col-lg-3
.col-md-10  .col-md-offset-1  .col-lg-9

LESS-примеси

Приоритетным является подход, в котором вместо упомянутых классов модульной сетки используются семантические БЭМ-овские классы и LESS-примеси (см. файл с примесями).

С примесями можно сделать модульную сетку любой колоночности (на разных ширинах может быть разноколоночная сетка), с любым промежутком между ячейками (на разных ширинах могут быть разные промежутки).

Вызов примеси .col(xs, 12); (возможно, не 12, а какое-то своё кол-во колонок) обязателен для элементов, являющихся прямыми потомками родителя модульной сетки.

.block-name {
  .row(); // БЭМ-блок — обёртка элементов модульной сетки

  &__element {
  // Разные ширины элемента на разных вьюпортах
  .col(xs, 6);
  .col(sm, 5);
  .col(md, 4);
  .col(lg, 3);
  .col(xl, 2);
  .col(xxl, 1);
  }
}

.block-name {
  // в примесь можно передать ширину промежутка между ячейками
  .row(10px);

  &__first-element {
    // xs-сетка, 6 колонок из @grid-columns (12 по умолчанию),
    // промежутки 10px
    .col(xs, 6, @grid-columns, 10px);
  }
}

Максимально подробный пример:

.root {
    // При указании переменных подряд имена можно не писать, оставлены для наглядности
    // @xs-grid-gutter: 1rem;  // XS-ширина: указан промежуток между ячейками сетки
    // @sm-grid-gutter: 1.8rem;// SM-ширина: указан промежуток между ячейками сетки
    // @md-grid-gutter: 2rem;  // MD-ширина: указан промежуток между ячейками сетки
    // @lg-grid-gutter: 3rem;  // LG-ширина: указан промежуток между ячейками сетки
    // @xl-grid-gutter: 4rem;  // XL-ширина: указан промежуток между ячейками сетки
    // @xxl-grid-gutter: 5rem; // XXL-ширина: указан промежуток между ячейками сетки
    // Короткая форма указания промежутков для всех ширин:
    // 1rem; 1.8rem; 2rem; 3rem; 4rem; 5rem
  .row(
    @xs-grid-gutter: 1rem;
    @sm-grid-gutter: 1.8rem;
    @md-grid-gutter: 2rem;
    @lg-grid-gutter: @grid-gutter-width;
    @xl-grid-gutter: 4rem;
    @xxl-grid-gutter: 5rem;
  );

  &__cuprum {
    // Для каждого вызова примеси указан промежуток между колонками (совпадает с тем, что у соответствующего вызова .row() для родительского элемента)
    .col(xs, 1, 2, 1rem);   // XS-ширина, 1 колонка в 2-колоночной сетке
    .col(sm, 2, 5, 1.8rem); // SM-ширина, 2 колонки в 5-колоночной сетке
    .col(md, 2, 8, 2rem);   // MD-ширина, 2 колонки в 8-колоночной сетке
    .col(lg, 2, @grid-columns, @grid-gutter-width); // LG-ширина, 2 колонки в 12-колоночной сетке (если @grid-columns оставлена по умолчанию)
    .col(xl, 3, 10, 4rem);   // XL-ширина, 3 колонки в 10-колоночной сетке
  }

  &__aurum {
    .col(xs, 1, 2, 1rem);
    .col(sm, 3, 5, 1.8rem);
    .col(md, 6, 8, 2rem);
    .col(lg, 10, @grid-columns, @grid-gutter-width);
    .col(xl, 7, 10, 4rem);
  }
}

Реальный пример 1:

.root {
  // Промежуток между колонками будет отличаться только на XS-ширине, это первый
  // ожидаемый примесью параметр, указываем только его.
  .row(1rem);

  &__cuprum {
    .col(xs, 1, 2, 1rem); // 1 из 2, нужно указать измененный для .row() промежуток
    .col(sm, 4); // начиная с SM — 4 из 12 (12 по умолчанию, можно не указывать)
    .col(md, 3); // начиная с MD — 3 из 12 (12 по умолчанию, можно не указывать)
  }

  &__aurum {
    .col(xs, 1, 2, 1rem);
    .col(sm, 8);
    .col(md, 9);
  }
}

Реальный пример 2:

.root {
  .row(); // Промежуток везде одинаковый (берется из переменной)

  &__cuprum {
    // Пока вьюпорт не стал равен или шире MD, блок 100% ширины родителя
    .col(xs, 12); // по умолчанию — 12 из 12 (обязательный вызов примеси)
    .col(md, 3);  // начиная с MD — 3 из 12
  }

  &__aurum {
    // Пока вьюпорт не стал равен или шире MD, блок 100% ширины родителя
    .col(xs, 12); // по умолчанию — 12 из 12 (обязательный вызов примеси)
    .col(md, 9);  // начиная с MD — 9 из 12
  }
}

Примеси адаптивности

Стилизация: нет, только примеси.

К нужным элементам добавляем примеси, элементы скрываются на тех или иных ширинах вьюпорта.

В примесях указано только значение display: none;, без !important.

.block-name {
  .hidden-up(lg);   // Скрыть на LG (включительно) и более широких
  .hidden-down(sm); // Скрыть на SM (включительно) и более узких
}

  1. Автоматизируйте всё

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

    Автоматизировать

  2. Используйте голову

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

    Начать

  3. Верстайте быстро

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

    Приступить

  4. Испытывайте удовольствие от работы

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

    Да, детка, сверстай мне!
Метки-span: Метка Метка Метка Метка Метки-div:
Метка
Метка
Метка
Метка
Метки-ссылки: Метка Метка Метка Метка

Метки с иконками: Метка Метка Метка Метка

Метки в кнопках: Кнопка 1 Кнопка 1 Кнопка 1 Кнопка 1 Кнопка 1 Кнопка 1 Кнопка 1 Кнопка 1 Кнопка 1
Только иконка, нет текстового узла (увеличен размер шрифта родителя)
Элемент: label__detail (отдельный LESS-файл)
Метки-span: Метка 7 Метка 7 Метка 7 Метка 7 Метки-div:
Метка 7
Метка 7
Метка 7
Метка 7
Метки-ссылки: Метка 7 Метка 7 Метка 7 Метка 7
Модификатор: label--tag (отдельный LESS-файл)
Метки-span: Метка 7 Метка Метка Метка Метки-div:
Метка
Метка
Метка
Метка
Метки-ссылки: Метка Метка Метка Метка

Внимание: круг внутри метки не прозрачный! Это @body-bg (по умолчанию — #fff).

Модификатор: label--circle (отдельный LESS-файл)
Метки-span: Метка Метка Метка Метка Метки-div:
Метка
Метка
Метка
Метка
Метки-ссылки: Метка Метка Метка Метка
Размеры (без модификатора, относительно родительского элемента)

Заголовок 1 Метка Метка Метка

Заголовок 2 Метка Метка Метка

Заголовок 3 Метка Метка Метка

Заголовок 4 Метка Метка Метка

Заголовок 5 Метка Метка Метка
Модификатор: label--absolute (отдельный LESS-файл)

Кнопка 1 Кнопка 1 Кнопка 1 Кнопка 1 Кнопка 1 Кнопка 1 Кнопка 1 Кнопка 1 Кнопка 1

@@include('blocks/page-footer/page-footer.html') @@include('_include/page_bottom.html')