Текст, теги

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

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>

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

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

TODO: сделать модификатором блока .table

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

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

Адаптивная таблица с перестроением блоков
Имя и фамилия	Тип индивидуального мироощущения	Образ в искусстве
Анатоле Вассерман	Девственность	Светлый
Джакомо Казанова	Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.	Невероятно привлекательный

          
            <table class="table  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-файл.

TODO: сделать модификатором блока .table

Имя и фамилия	Тип индивидуального мироощущения	Образ в искусстве
Анатоле Вассерман	Девственность	Светлый
Джакомо Казанова	Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.	Невероятно привлекательный

            
              <table class="table  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 горизонтальной прокруткой

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

TODO: сделать модификатором блока .table

Иннокентий	Барлаухенштицкен-Ламанческий	Хозяйственное	Администратор	«ВСЕГДА!»
Васисуалий	Пылепневмомешковыколачивателев	Душистое	Юзверь	Нижняя
Ктулху	Втанк	ktulkhu@ad.ru	Патриарх	Яизм

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

          
            <div class="table  table-responsive-scroll">
              <table> <!-- Можно с class="table", можно без. -->
                ...
              </table>
            </div>

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

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

TODO: сделать модификатором блока .table

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

ВНИМАНИЕ! Ячейки не должны объединяться. 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, чтобы было что фиксировать.

TODO: сделать модификатором блока .table

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

Таблица как БЭМ-блок, элементы имеют классы
Имя	Фамилия	Мыло	Статус	Политическая ориентация
Иннокентий	Барлаухенштицкен-Ламанческий	Хозяйственное	Администратор	«ВСЕГДА!»
Васисуалий	Пылепневмомешковыколачивателев	Душистое	Юзверь	Нижняя
Ктулху	Втанк	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">
                <input class="field-text__input" type="text" placeholder="input[type=text]">
                <div class="field-text__help-text">Необязательное пояснение</div>
              </div>
            </label>
             
            <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>

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

Размеры задаются в 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>

Радиокнопки

Размеры задаются в 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>

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

Элемент переключателя стилизован с ипользованием 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>

Диапазон

Стилизуется без 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>

Выбор файлов

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

Отображение выбранного файла(ов) требует 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>

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

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

          
            <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, btn--sm, вписаны в 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>

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

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

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

          
            <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 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>
              <button class="btn  fields-group__item  fields-group__item--addon">Отправить</button>
              <button class="btn  fields-group__item  fields-group__item--addon">Отменить</button>
            </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">
              <a href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                Ссылка с выпадением
              </a>
              <ul class="dropdown__menu" aria-labelledby="drop">
                <li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
              </ul>
            </span>
             
            <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" aria-labelledby="drop">
                <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.

Промежутки ячеек модульной сетки сделаны с помощью padding (@grid-gutter-width / 2), у родителя модульной сетки есть отрицательные margin (@grid-gutter-width / -2) для выравнивания левой границы контентных областей ячеек сетки по левым границам блоков вне сетки.

.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-примеси (см. файл с примесями).

Преимущества использования примесей вместо классов модульной сетки

Любое количество колонок в «строке» на любой ширине вьюпорта (на разных ширинах можно сделать разное кол-во колонок).
Любые промежутки между колонками на любой ширине вьюпорта (на разных ширинах можно сделать разные промежутки).
Отсутствие в стилевом файле лишних классов.

Абсолютно любая сетка на любой ширине. Бесплатно без регистрации и СМС.

Примеси генерируют много медиа-выражений! Обязательно используйте конкатенатор медиа-выражений, к примеру, этот (написанный с PostCSS).

Работа с примесями

TODO

Примеры использования

Демо в CodePen (сразу виден рендер демо-блоков). Демо на JS Bin (сразу видно результат компиляции, без препроцессинга).

Сетка с промежутками по умолчанию на любых вьюпортах и разным количеством колонок на ячейку

Если промежуток отличается от 3rem (30px по умолчанию), нужно пойти и поменять значение переменной @grid-gutter-width.

        
          .block-name {
            .row(); // На всех вьюпортах промежуток по умолчанию (из переменной @grid-gutter-width)
           
            &__element {
              .col(xs, 6); // Изначально 6/12 (50%), на SM будет то же самое, т.к. нет вызова .col(sm, ЧИСЛО);
              .col(md, 4); // Начиная с MD — 4/12 (33.33333333%)
              .col(lg, 3); // Начиная с LG — 3/12 (25%), на XL и XXL будет то же самое
            }
          }

Сетка без промежутков на любых вьюпортах

        
          // В файле с переменными:
          @grid-gutter-width:           0;
           
          // В стилизационном файле:
          .block-name {
            .row();
           
            &__element {
              .col(xs, 6);
            }
          }

Сетка, у которой на XS изменён промежуток (1rem), а на SM и далее — промежуток по умолчанию

        
          .block-name {
            .row(1rem); // Передаём примеси промежуток для XS (для SM и далее он будет по умолчанию)
           
            &__element {
              .col(xs, 6, @grid-columns, 1rem); // Нужно передать изменённый промежуток колонкам тоже
              .col(sm, 4);                      // Восстановление промежутка по умолчанию
            }
          }

Сетка, у которой на каждом вьюпорте свой промежуток между колонками

        
          .block-name {
            // При указании переменных подряд имена можно не писать, здесь оставлены для наглядности
            // @xs-grid-gutter: 1rem;     // XS-ширина: указан промежуток между ячейками сетки
            // @sm-grid-gutter: 1.8rem;   // SM-ширина: указан промежуток между ячейками сетки
            // @md-grid-gutter: 2rem;     // MD-ширина: указан промежуток между ячейками сетки
            // @lg-grid-gutter: @grid-gutter-width;  // LG-ширина: промежуток между ячейками берётся из переменной
            // @xl-grid-gutter: 4rem;     // XL-ширина: указан промежуток между ячейками сетки
            // @xxl-grid-gutter: 5rem;    // XXL-ширина: указан промежуток между ячейками сетки
            // Короткая форма указания промежутков для всех ширин:
            // 1rem, 1.8rem, 2rem, @grid-gutter-width, 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,
            );
           
            &__element {
              // Всем ячейкам тоже указываем промежутки
              .col(xs, 6, @grid-columns, 1rem);
              .col(sm, 6, @grid-columns, 1.8rem);
              .col(md, 6, @grid-columns, 2rem);
              .col(lg, 6, @grid-columns, @grid-gutter-width);
              .col(xl, 6, @grid-columns, 4rem);
              .col(xxl, 6, @grid-columns, 5rem);
            }
          }

Сетка, у которой на XS промежуток по умолчанию, на SM изменённый, а на MD и далее — по умолчанию

        
          .block-name {
            // Для XS опускаем, сразу пишем для SM (вынуждены указать конкретную переменную, поскольку примесь сначала ждёт переменную для XS)
            .row(@sm-grid-gutter: 1rem);
            // .row(@grid-gutter-width, 1rem); // Полностью аналогично, но с соблюдением очередности переменных при вызове
           
            &__element {
              .col(sm, 6, @grid-columns, 1rem); // Нужно передать изменённый промежуток колонкам тоже
              .col(md, 4);                      // Восстановление промежутка по умолчанию
            }
          }

Сетка без промежутков на XS, но с промежутками по умолчанию начиная с SM

        
          .block-name {
            // Первая ожидаемая переменная — для XS — указываем 0, далее не указываем (будет по умолчанию)
            .row(0);
           
            &__element {
              .col(xs, 6, @grid-columns, 0); // Нужно передать нулевой промежуток
              .col(sm, 6);                   // Восстановление промежутка по умолчанию
            }
          }

Реальный пример 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(md, 3);  // начиная с MD — 3 из 12
            }
           
            &__aurum {
              // Пока вьюпорт не стал равен или шире MD, блок 100% ширины родителя
              .col(md, 9);  // начиная с MD — 9 из 12
            }
          }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

          
            <ol class="step-list">
              <li class="step-list__item">
                <h2 class="step-list__title">Автоматизируйте всё</h2>
                <div class="step-list__text">
                  <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный, образ вопроса текст домах своего что текстами ipsum взобравшись использовало.</p>
                </div>
                <a href="https://github.com/nicothin/NTH-start-project" class="btn">Автоматизировать</a>
              </li>
              <li class="step-list__item  step-list__item--main">
                <h2 class="step-list__title">Используйте голову</h2>
                <div class="step-list__text">
                  <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный, образ вопроса текст домах своего что текстами ipsum взобравшись использовало.</p>
                </div>
                <a href="" class="btn  btn--main">Начать</a>
              </li>
              <li class="step-list__item  step-list__item--danger">
                <h2 class="step-list__title">Верстайте быстро</h2>
                <div class="step-list__text">
                  <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный.</p>
                </div>
              <a href="" class="btn  btn--danger">Приступить</a>
              </li>
              <li class="step-list__item  step-list__item--success">
                <h2 class="step-list__title">Испытывайте удовольствие от работы</h2>
                <div class="step-list__text">
                  <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный.</p>
                </div>
                <a href="" class="btn  btn--success">Да, детка, сверстай мне!</a>
              </li>
            </ol>

Метки

Метки-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 Метка Метка Метка

Сообщения

Модификаторы alert--danger и alert--success не являются отдельными less-файлами.

Заголовки и внутренние ссылки — необязательные БЭМ-элементы. Ссылка внутри может быть акцентирована классом alert__link или оставлена по умолчанию (оба варианта показаны ниже).

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

Да, детка
Да, детка

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

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

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

Да, детка
Да, детка

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

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

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

Да, детка
Да, детка

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

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

          
            <div class="alert">
              <h1 class="alert__header">Нейтральное сообщение</h1> <!-- Необязательный заголовок -->
              <p>...</p>
            </div>
             
            <div class="alert  alert--danger">
              <h1 class="alert__header">Внимание, опасность, отказ</h1> <!-- Необязательный заголовок -->
              <p>...</p>
            </div>
             
            <div class="alert  alert--success">
              <h1 class="alert__header">Успешное действие</h1> <!-- Необязательный заголовок -->
              <p>...</p>
            </div>

Кнопка закрытия

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

Использует JS для сокрытия Сообщения по нажатию. Сообщение только скрывается, не убирается из DOM.

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

            
              <div class="alert  alert--danger-invert">
                <button class="alert__close" aria-label="Close">×</button>
                <h1 class="alert__header">Внимание, опасность, отказ</h1> <!-- Необязательный заголовок -->
                <p>...</p>
              </div>

Инвертированный блок «опасность, внимание»

Модификатор alert--danger-invert, отдельный less-файл.

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

Да, детка
Да, детка

            
              <div class="alert  alert--danger-invert">
                <h1 class="alert__header">Внимание, опасность, отказ</h1> <!-- Необязательный заголовок -->
                <p>...</p>
              </div>

Инвертированный блок «успех»

Модификатор alert--success-invert, отдельный less-файл.

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

Да, детка
Да, детка

            
              <div class="alert  alert--success-invert">
                <h1 class="alert__header">Успешное действие</h1> <!-- Необязательный заголовок -->
                <p>...</p>
              </div>

Сообщение с иконкой

Модификатор alert--icon, дополнительные элементы alert__icon и alert__content (чуть другая разметка), отдельный less-файл.

Хорошо сочетается с любыми другими модификаторами. Иконка может быть как до текста, так и после.

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

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

            
              <div class="alert  alert--icon">
                <div class="alert__icon">
                  <svg width="3em" height="3em" fill="currentColor"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg>
                </div>
                <div class="alert__content">
                  ...
                </div>
              </div>
               
              <div class="alert  alert--icon">
                <div class="alert__content">
                  ...
                </div>
                <div class="alert__icon">
                  <svg width="3em" height="3em" fill="currentColor"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg>
                </div>
              </div>

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

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

Что-то пошло не так!

Шутка, все хорошо.

          
            <div class="alert-area">
             
              <div class="alert  alert--danger-invert">
                <button class="alert__close" aria-label="Close">×</button>
                <p><strong>Что-то пошло не так!</strong></p>
              </div>
              
              <div class="alert  alert--success-invert">
                <button class="alert__close" aria-label="Close">×</button>
                <p>Шутка, все хорошо.</p>
              </div>
             
            </div>

Загрузчик

Анимация прописана в самом SVG-файле, размещенном в фоне псевдоэлемента блока. Файл не кодируется в base64, в текст SVG-файла внедрена переменная с цветом.

          
            <div style="min-height: 8em; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center;">
              <span class="loader"></span>
            </div>

Листинг кода

Для блоков кода срабатывает подсветка синтаксиса. Это highlightjs.org с несколько изменёнными стилями.

        
          <div style="display: block;">
            <span>Это строка HTML-разметки.</span>
            <span>Это строка HTML-разметки.</span>
          </div>

          
            <pre class="code">
              <code class="code__syntax  html"> <!-- Тут указывается язык -->
                <span class="code__line">&lt;div style="display: block;"&gt;</span>
                  <span class="code__line">  &lt;span&gt;Это строка HTML-разметки.&lt;/span&gt;</span>
                  <span class="code__line">  &lt;span&gt;Это строка HTML-разметки.&lt;/span&gt;</span>
                <span class="code__line">&lt;/div&gt;</span>
              </code>
            </pre>

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

Текст, теги

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Таблицы

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

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

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

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

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

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

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

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

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

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

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

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

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

Радиокнопки

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

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

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

Диапазон

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

Выбор файлов

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

Форма

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

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

Кнопки

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

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

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

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

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

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

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

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

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

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

События

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

Breakpoints

LESS-примеси

Преимущества использования примесей вместо классов модульной сетки

Работа с примесями

Примеры использования

Сетка с промежутками по умолчанию на любых вьюпортах и разным количеством колонок на ячейку

Сетка без промежутков на любых вьюпортах

Сетка, у которой на XS изменён промежуток (1rem), а на SM и далее — промежуток по умолчанию

Сетка, у которой на каждом вьюпорте свой промежуток между колонками

Сетка, у которой на XS промежуток по умолчанию, на SM изменённый, а на MD и далее — по умолчанию

Сетка без промежутков на XS, но с промежутками по умолчанию начиная с SM

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

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

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

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

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

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

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