Текст, теги

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

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

            <div class="p">...</div>

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

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

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

Заголовок 1 Дополнительный текст

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

Заголовок 2 Дополнительный текст

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

Заголовок 3 Дополнительный текст

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

Заголовок 4 Дополнительный текст

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

Заголовок 5 Дополнительный текст

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

Заголовок 6 Дополнительный текст

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

Маркированный и нумерованный списки и параграфы

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

Пункт 1
- Подпункт 1
- Подпункт 2
Пункт 2
Пункт 3

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

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

Список определений и параграфы

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

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

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

Разделитель уровня параграфа

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

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

Строчные теги

`<a>`	ссылка
`<strong>`	действительно значимый текст
`<b>`	просто выделенный текст, лид
`<i>`	иностранное слово или термин
`<em>`	эмфатическое ударение
`<s>`	~~информация, утратившая актуальность~~
`<del>`	~~изменение, внесённое в документ (удаление)~~
`<ins>`	изменение, внесённое в документ (добавление)

`<mark>`	акцент маркерным выделением
`<small>`	малозначимый текст
`<abbr>`	АББРЕВИАТУРА
`<kbd>`	`Ctrl + C`
`<sup>`	2³
`<sub>`	H₂O
`<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, пунктам списка можно не давать классов. При использовании других тегов (см. пример кода) нужны классы у элементов.

Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами.
Проектах за вопрос курсивных.
- Одна послушавшись дал, большого.
- Далеко-далеко за словесными горами.
Далеко-далеко за словесными горами.

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

Одна послушавшись дал, большого.

Проектах за вопрос курсивных.

Власти, она себя за?

Решила алфавит, назад маленький.

          <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-файл)

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

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

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

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

Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами.
Проектах за вопрос курсивных.
- Одна послушавшись дал, большого.
- Далеко-далеко за словесными горами.
Далеко-далеко за словесными горами.

Далеко-далеко за словесными горами.
Одна послушавшись дал, большого.
Проектах за вопрос курсивных.
Власти, она себя за?
Решила алфавит, назад маленький.

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

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

Далеко-далеко за словесными горами.
Одна послушавшись дал, большого.
Проектах за вопрос курсивных.
Власти, она себя за?
- Одна послушавшись дал, большого.
- Далеко-далеко за словесными горами.
Решила алфавит, назад маленький.

Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами.
Одна послушавшись дал, большого.
Проектах за вопрос курсивных.
Власти, она себя за?

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

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

Без ссылок:

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

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

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

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

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

Многострочное текстовое поле

Обёртка — label. Можно сделать обёртку div, но тогда, возможно, захочется элемент .field-text__name делать label и связывать его с полем по id поля.

Любое поле, выглядящее как текстовое

Обёртка — 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-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).

Многострочное текстовое поле

Обёртка — label.

Любое поле, выглядящее как текстовое

Обёртка — 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-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).

Многострочное текстовое поле

Обёртка — label.

Любое поле, выглядящее как текстовое

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

Радиокнопки

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

Стандартная радиокнопка

Использовать

Пояснение не обязательно.

Несколько стандартных радиокнопок с переносами строк

Использовать
Переиспользовать
Нет

Разметка никак не модифицируется, просто добавляются дополнительные label.

Несколько стандартных радиокнопок

Использовать Переиспользовать Нет

Разметка никак не модифицируется, просто добавляются дополнительные label.

          <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" checked>
                <span class="field-radio__name-text">Использовать</span>
              </label>
              <div class="field-radio__help-text">Пояснение не обязательно.</div>
            </div>
          </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="radio-1" checked>
                <span class="field-radio__name-text">Использовать</span>
              </label>
              <label class="field-radio__name">
                <input class="field-radio__input" type="radio" name="radio-1">
                <span class="field-radio__name-text">Переиспользовать</span>
              </label>
              ...
              <div class="field-radio__help-text">Разметка никак не модифицируется...</div>
            </div>
          </div>

Собственные радиокнопки (картинкой)

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

Собственная радиокнопка

Использовать

Пояснение не обязательно.

Несколько собственных радиокнопок с переносами строк

Использовать
Переиспользовать
Нет

Разметка никак не модифицируется, просто добавляются дополнительные label.

Несколько собственных радиокнопок

Использовать Переиспользовать Нет

Разметка никак не модифицируется, просто добавляются дополнительные label.

            <div class="field-radio  field-radio--custom">
              <div class="field-radio__title">Собственная радиокнопка</div>
              <div class="field-radio__input-wrap">
                <label class="field-radio__name">
                  <input class="field-radio__input" type="radio" checked>
                  <span class="field-radio__name-text">Использовать</span>
                </label>
                <div class="field-radio__help-text">Пояснение не обязательно.</div>
              </div>
            </div>
             
            <div class="field-radio  field-radio--custom">
              <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="radio-3" checked>
                  <span class="field-radio__name-text">Использовать</span>
                </label>
                <label class="field-radio__name">
                  <input class="field-radio__input" type="radio" name="radio-3">
                  <span class="field-radio__name-text">Переиспользовать</span>
                </label>
                ...
                <div class="field-radio__help-text">Разметка никак не модифицируется...</div>
              </div>
            </div>

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

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

Стандартная радиокнопка

Использовать

Пояснение не обязательно.

Несколько стандартных радиокнопок

Использовать Переиспользовать Нет

Разметка никак не модифицируется, просто добавляются дополнительные label.

Собственная радиокнопка

Использовать

Пояснение не обязательно.

Несколько собственных радиокнопок

Использовать Переиспользовать Нет

Разметка никак не модифицируется, просто добавляются дополнительные label.

            <div class="field-radio  field-radio--lg">
              <div class="field-radio__title">Стандартная радиокнопка</div>
              <div class="field-radio__input-wrap">
                <label class="field-radio__name">
                  <input class="field-radio__input" type="radio" checked>
                  <span class="field-radio__name-text">Использовать</span>
                </label>
                <div class="field-radio__help-text">Пояснение не обязательно.</div>
              </div>
            </div>

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

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

Стандартная радиокнопка

Использовать

Пояснение не обязательно.

Несколько стандартных радиокнопок

Использовать Переиспользовать Нет

Разметка никак не модифицируется, просто добавляются дополнительные label.

Собственная радиокнопка

Использовать

Пояснение не обязательно.

Несколько собственных радиокнопок

Использовать Переиспользовать Нет

Разметка никак не модифицируется, просто добавляются дополнительные label.

            <div class="field-radio  field-radio--sm">
              <div class="field-radio__title">Стандартный флажок</div>
              <div class="field-radio__input-wrap">
                <label class="field-radio__name">
                  <input class="field-radio__input" type="radio" checked>
                  <span class="field-radio__name-text">Использовать</span>
                </label>
                <div class="field-radio__help-text">Пояснение не обязательно.</div>
              </div>
            </div>

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

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

Переключатель-флажок

Использовать

Графика не используется, всё нарисовано CSS-ом.

Переключатели-флажки

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

Графика не используется, всё нарисовано CSS-ом.

Переключатель-радиокнопка

Использовать

Графика не используется, всё нарисовано CSS-ом.

Переключатели-радиокнопки

Да Нет

Графика не используется, всё нарисовано 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>

Выпадающий список, множественный выбор

Селект

Обёртка — <label>.

Множественный селект

Обёртка — <label>.

          <label class="field-select">
            <div class="field-select__name">Селект</div>
            <div 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>
              <small class="field-select__help-text">Пояснение не обязательно.</small>
            </div>
          </label>

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

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

Селект

Обёртка — <label>.

Множественный селект

Обёртка — <label>.

            <label class="field-select  field-select--lg">
              <div class="field-select__name">Селект</div>
              <div 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>
                <small class="field-select__help-text">Пояснение не обязательно.</small>
              </div>
            </label>

Уменьшение размера

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

Селект

Обёртка — <label>.

Множественный селект

Обёртка — <label>.

            <label class="field-select  field-select--sm">
              <div class="field-select__name">Селект</div>
              <div 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>
                <small class="field-select__help-text">Пояснение не обязательно.</small>
              </div>
            </label>

Диапазон

Стилизуется без JS. Подстраивается под размер шрифта родителя. Кроссбраузерность: Firefox 23+, Safari 4+, iOS 5+, Chrome 6+, Opera 11+, IE 10+, Android 4.2+

Range

min="1" max="100" step="1" value="70".

Range

min="20" max="100" step="10" value="20"

          <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">Необязательное пояснение.</div>
            </div>
          </div>

С дополнительным элементом-линейкой

Дополнительный элемент field-range__line, отдельный less-файл.

Линейка добавляется вставкой в разметку дополнительных тегов. Текстовые значения берутся из data-атрибутов. Первый элемент линейки позиционируется абсолютно (не вызывает увеличения длины шкалы). Второй и далее элементы распределяются равномерно, занимают одинаковое количество места в «строке».

Чтобы двигающийся элемент чётко попадал в линейку, шаг элемента должен быть достаточно мелким и/или линейка должна быть достаточно частой или шаг должен строго соответствовать линейке.

Range

Линейка 0 - 1000, шаг 1.

Range

Линейка 0 - 100, шаг 10.

            <div class="field-range">
              <div class="field-range__name">Range</div>
              <div class="field-range__input-wrap">
                <div class="field-range__line">
                  <span class="field-range__line-item" data-line-value="0%"></span>
                  <span class="field-range__line-item" data-line-value="25%"></span>
                  <span class="field-range__line-item" data-line-value="50%"></span>
                  <span class="field-range__line-item" data-line-value="75%"></span>
                  <span class="field-range__line-item" data-line-value="100%"></span>
                </div>
                <input class="field-range__input" type="range" min="1" max="100" step="1" value="70" step="1">
                <div class="field-range__help-text">Необязательное пояснение.</div>
              </div>
            </div>

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

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

Range

Линейка 0 - 1000, шаг 1.

Range

Линейка 0 - 100, шаг 10.

            <div class="field-range  field-range--lg">
              <div class="field-range__name">Range</div>
              <div class="field-range__input-wrap">
                <div class="field-range__line">
                  <span class="field-range__line-item" data-line-value="0%"></span>
                  <span class="field-range__line-item" data-line-value="25%"></span>
                  <span class="field-range__line-item" data-line-value="50%"></span>
                  <span class="field-range__line-item" data-line-value="75%"></span>
                  <span class="field-range__line-item" data-line-value="100%"></span>
                </div>
                <input class="field-range__input" type="range" min="1" max="100" step="1" value="70" step="1">
                <div class="field-range__help-text">Необязательное пояснение.</div>
              </div>
            </div>

Уменьшение размера

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

Range

Линейка 0 - 1000, шаг 1.

Range

Линейка 0 - 100, шаг 10.

            <div class="field-range  field-range--sm">
              <div class="field-range__name">Range</div>
              <div class="field-range__input-wrap">
                <div class="field-range__line">
                  <span class="field-range__line-item" data-line-value="0%"></span>
                  <span class="field-range__line-item" data-line-value="25%"></span>
                  <span class="field-range__line-item" data-line-value="50%"></span>
                  <span class="field-range__line-item" data-line-value="75%"></span>
                  <span class="field-range__line-item" data-line-value="100%"></span>
                </div>
                <input class="field-range__input" type="range" min="1" max="100" step="1" value="70" step="1">
                <div class="field-range__help-text">Необязательное пояснение.</div>
              </div>
            </div>

Выбор файлов

Ничего не выбрано

Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.

Выбор файлов

Ничего не выбрано

Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.

          <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>
              <div class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано</div>
              <div class="field-file__help-text">Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.</div>
            </label>
          </div>

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

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

Выбор файлов

Ничего не выбрано

Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.

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

Уменьшение размера

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

Выбор файлов

Ничего не выбрано

Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.

Выбор файлов

Ничего не выбрано

Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.

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

Блок кнопок формы

Поля отмеченные * обязательны для заполнения.

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

Форма

Форма как БЭМ-блок. Добавляется стилизация fieldset, появляется возможность использовать модификаторы (см. ниже).

Файлдсет первый

Название поля

Обёртка — <label>.

Общее название

Флажок Флажок Флажок Флажок Флажок

Есть общее название.

Файлдсет второй

Название поля

Обёртка — <label>.

Выбор файлов

Ничего не выбрано

Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.

Range

min="1" max="100" step="1" value="70"

Поля отмеченные * обязательны для заполнения.

          <form action="" class="form">
            <fieldset>
              <legend>Файлдсет первый</legend>
              <label class="field-text">...</label>
              <div class="field-checkbox">...</div>
            </fieldset>
            <fieldset>
              <legend>Файлдсет второй</legend>
              <label class="field-select">...</label>
              <div class="field-file">...</div>
              <div class="field-range">...</div>
            </fieldset>
            <div class="field-actions">
              <button class="btn">Отправить</button>
            </div>
          </form>

Горизонтальное расположение названий и полей

Только начиная с SM ширины. Модификатор form--horizontal, отдельный less-файл.

ВНИМАНИЕ! Поскольку все отступы сделаны в em, при наличии названий полей на некоторых размерах шрифта возможно несоответствие (1-2px) базовой линии названия и базовой линии текста в поле.

            <form class="form  form--horizontal">
              <label class="field-text">...</label>
              <label class="field-text">...</label>
              <div class="field-checkbox">
                <div class="field-checkbox__title">Общее название</div>
                <div class="field-checkbox__input-wrap">...</div>
              </div>
              <div class="field-radio">
                <div class="field-radio__title"></div> <!-- ← ВНИМАНИЕ! Общего названия нет, но есть div — есть отступ -->
                <div class="field-radio__input-wrap">...</div>
              </div>
              <div class="field-radio">
                <!-- Нет общего названия, нет пустого div — нет отступа -->
                <div class="field-radio__input-wrap">...</div>
              </div>
              <div class="field-toggler">...</div>
              <label class="field-select">...</label>
              <div class="field-file">...</div>
              <div class="field-range">...</div>
              <div class="field-actions">
                <button class="btn">Отправить</button>
              </div>
            </form>

Форма в строку

Только начиная с SM ширины. Модификатор form--line, отдельный less-файл.

ВНИМАНИЕ! Поскольку все отступы сделаны в em, при наличии названий полей на некоторых размерах шрифта возможно несоответствие (1-2px) базовой линии названия и базовой линии текста в поле.

            <form class="form  form--line">
              <label class="field-text">...</label>
              <label class="field-text">...</label>
              <div class="field-actions">
                <button class="btn">Отправить</button>
              </div>
            </form>

Кнопки

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

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>

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

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

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>

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

Модификатор btn--block, отдельный less-файл.

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>

Комбинации элементов форм

Сравнение и тестирование комбинаций элементов форм по умолчанию и с модификаторами.

          <form action="" class="form  form--line">
            <label class="field-text">...</label>
            <button class="btn">Отправить</button>
          </form>
          <form action="" class="form  form--line">
            <label class="field-text  field-text--lg">...</label>
            <button class="btn  btn--lg">Отправить</button>
          </form>
          <form action="" class="form  form--line">
            <label class="field-text  field-text--sm">...</label>
            <button class="btn  btn--sm">Отправить</button>
          </form>

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

Потенциально доступны любые сочетания описанных в этом разделе элементов.

Простые комбинации текстовых полей, выпадающих списков

          <div class="fields-group">
            <label class="field-text  fields-group__item">
              <input class="field-text__input" type="text" placeholder="input[type=text]">
            </label>
            <label class="field-select  fields-group__item">
              <div class="field-select__select-wrap">
                <select class="field-select__select">
                  <option>Значение 1</option>
                  <option>Значение 2</option>
                </select>
              </div>
            </label>
            <label class="field-text  fields-group__item">
              <input class="field-text__input" type="text" placeholder="input[type=text]">
            </label>
          </div>

Добавочные неинтерактивные элементы в начале и/или в конце

          <div class="fields-group">
            <span class="fields-group__item  fields-group__item--addon  fields-group__item--text">
              $
            </span>
            <label class="field-text  fields-group__item">
              <input class="field-text__input" type="text" placeholder="input[type=text]">
            </label>
            <span class="fields-group__item  fields-group__item--addon  fields-group__item--text">
              .00
            </span>
          </div>

Добавочные интерактивные и неинтерактивные элементы в начале и/или в конце

$

          <div class="fields-group">
            <span role="presentation" class="dropdown  fields-group__item--dropdown">
              <button class="dropdown__toggler  btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Выпадение
              </button>
              <ul class="dropdown__menu">
                <li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
                <li><a href="">Пункт меню весьма длинный</a></li>
                <li><a href="">Второй пункт</a></li>
              </ul>
            </span>
            <label class="field-text  fields-group__item">
              <input class="field-text__input" type="text" placeholder="input[type=text]">
            </label>
            <span role="presentation" class="dropdown  fields-group__item--dropdown">
              <button class="dropdown__toggler  btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Выпадение от пр. края
              </button>
              <ul class="dropdown__menu  dropdown__menu--right">
                <li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
                <li><a href="">Пункт меню весьма длинный</a></li>
                <li><a href="">Второй пункт</a></li>
              </ul>
            </span>
          </div>

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

          <div class="btn-group">
            <button class="btn">Отправить</button>
            <button class="btn  btn--main">Отменить</button>
            <button class="btn">Отменить</button>
            <span role="presentation" class="dropdown">
              <button class="dropdown__toggler  btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Выпадение от пр. края
              </button>
              <ul class="dropdown__menu  dropdown__menu--right">
                <li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
                <li><a href="">Пункт меню весьма длинный</a></li>
                <li><a href="">Второй пункт</a></li>
              </ul>
            </span>
          </div>

Выпадающие элементы

Свойства:

Требуют jQuery.
Управление с клавиатуры.
Выпадать может ul или div с произвольным содержимым.
Cобытия с пространством имён.

          <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>
            </ul>
          </span>
           
          <span role="presentation" class="dropdown" id="test">
            <button class="dropdown__toggler  btn" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Кнопка с выпадением
            </button>
            <ul class="dropdown__menu" aria-labelledby="qwer">
              <li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
            </ul>
          </span>

Выпадение вверх

Модификатор dropdown__menu--up на выпадающем элементе.

          <span role="presentation" class="dropdown" id="test">
            <button class="dropdown__toggler  btn" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Кнопка с выпадением
            </button>
            <ul class="dropdown__menu  dropdown__menu--up" aria-labelledby="qwer">
              <li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
            </ul>
          </span>

Выпадение от правого края

Модификатор dropdown__menu--right на выпадающем элементе. Нормально сочетается с модификатором dropdown__menu--up.

Текст перед кнопкой

          <span role="presentation" class="dropdown" id="test">
            <button class="dropdown__toggler  btn" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Кнопка с выпадением
            </button>
            <ul class="dropdown__menu  dropdown__menu--right" aria-labelledby="qwer">
              <li><a href="#">Пункт списка (выпадает <code>ul</code>)</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');
      });

Модульная сетка на 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

          <div class="row">
            <div class="col-xs-12  col-sm-6  col-md-4  col-lg-3">...</div>
            <div class="col-xs-12  col-sm-6  col-md-4  col-lg-3">...</div>
            <div class="col-xs-12  col-sm-6  col-md-4  col-lg-3">...</div>
            <div class="col-xs-12  col-sm-6  col-md-4  col-lg-3">...</div>
          </div>

.col-md-2 .col-lg-3

.col-md-10 .col-md-offset-1 .col-lg-9

          <div class="row">
          <div class="col-md-2  col-lg-3">...</div>
          <div class="col-md-9  col-md-offset-1  col-lg-8">...</div>
          </div>

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

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 (включительно) и более узких
      }

Пошаговый список

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

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

Автоматизировать
Используйте голову

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

Начать
Верстайте быстро

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

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

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

Да, детка, сверстай мне!

Метки

Метки-span: Метка Метка Метка Метка Метки-div:

Метка

Метки-ссылки: Метка Метка Метка Метка

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

Метки в кнопках: Кнопка 1 Кнопка 1 Кнопка 1 Кнопка 1 Кнопка 1 Кнопка 1 Кнопка 1 Кнопка 1 Кнопка 1

          <span class="label">Метка</span>
          <span class="label  label--main">Метка</span>
          <span class="label  label--danger">Метка</span>
          <span class="label  label--success">Метка</span>
           
          <div class="label">Метка</div>
          <div class="label  label--main">Метка</div>
          <div class="label  label--danger">Метка</div>
          <div class="label  label--success">Метка</div>
           
          <a href="" class="label">Метка</a>
          <a href="" class="label  label--main">Метка</a>
          <a href="" class="label  label--danger">Метка</a>
          <a href="" class="label  label--success">Метка</a>
           
          <a href="" class="btn">Кнопка
            <span class="label">1</span>
          </a>

Только иконка, нет текстового узла

            <span class="label">
              <svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg>
            </span>
            <span class="label  label--circle  label--success">
              <svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-folder-open"></use></svg>
            </span>
            <span class="label  label--circle  label--tag">
              <svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-road"></use></svg>
            </span>
            <span class="label  label--danger">
              <svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-search"></use></svg>
            </span>

Элемент вторичной значимости

Дополнительный элемент label__detail, отдельный less-файл.

Метки-span: Метка 7 Метка 7 Метка 7 Метка 7
Метки-div:

Метка 7

Метки-ссылки: Метка 7 Метка 7 Метка 7 Метка 7

            <span class="label">Метка <span class="label__detail">7</span></span>
            <span class="label  label--main">Метка <span class="label__detail">7</span></span>
            <span class="label  label--danger">Метка <span class="label__detail">7</span></span>
            <span class="label  label--success">Метка <span class="label__detail">7</span></span>

Бирка

Модификатор label--tag, отдельный less-файл.

Метки-span: Метка 7 Метка Метка Метка
Метки-div:

Метка

Метки-ссылки: Метка Метка Метка Метка

            <span class="label  label--tag">Метка <span class="label__detail">7</span></span>
            <span class="label  label--tag  label--main">Метка</span>
            <span class="label  label--tag  label--danger">Метка</span>
            <span class="label  label--tag  label--success">Метка</span>

Скруглённые углы

Модификатор label--circle, отдельный less-файл.

Метки-span: Метка Метка Метка Метка
Метки-div:

Метка

Метки-ссылки: Метка Метка Метка Метка

            <span class="label  label--circle">Метка</span>
            <span class="label  label--circle  label--main">Метка</span>
            <span class="label  label--circle  label--danger">Метка</span>
            <span class="label  label--circle  label--success">Метка</span>

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

Модификатор label--absolute, отдельный less-файл.

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

            <a href="" class="btn">Кнопка <span class="label  label--absolute">1</span></a>

Использование в заголовках

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

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

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

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

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

Сообщения

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

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

Текст, теги

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

Заголовок 1 Дополнительный текст

Заголовок 2 Дополнительный текст

Заголовок 3 Дополнительный текст

Заголовок 4 Дополнительный текст

Заголовок 5 Дополнительный текст

Заголовок 6 Дополнительный текст

Маркированный и нумерованный списки и параграфы

Список определений и параграфы

Разделитель уровня параграфа

Строчные теги

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

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

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

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

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

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

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

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

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

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

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

Таблицы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Радиокнопки

Собственные радиокнопки (картинкой)

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

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

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

Выпадающий список, множественный выбор

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

Уменьшение размера

Диапазон

С дополнительным элементом-линейкой

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

Уменьшение размера

Выбор файлов

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

Уменьшение размера

Блок кнопок формы

Форма

Горизонтальное расположение названий и полей

Форма в строку

Кнопки

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

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

Комбинации элементов форм

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

Простые комбинации текстовых полей, выпадающих списков

Добавочные неинтерактивные элементы в начале и/или в конце

Добавочные интерактивные и неинтерактивные элементы в начале и/или в конце

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

Выпадающие элементы

Выпадение вверх

Выпадение от правого края

События

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

Breakpoints

LESS-примеси

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

Пошаговый список

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