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

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

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

Текст, теги

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

<a> ссылка
<strong> действительно значимый текст
<b> просто выделенный текст, лид
<i> иностранное слово или термин
<em> эмфатическое ударение
<s> информация, утратившая актуальность
<del> изменение, внесённое в документ (удаление)
<ins> изменение, внесённое в документ (добавление)
<mark> акцент маркерным выделением
<small> малозначимый текст
<abbr> АББРЕВИАТУРА
<kbd> Ctrl + C
<sup> 23
<sub> H2O
<code> code

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

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


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

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

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

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

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

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

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

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

Смотри так же БЭМ-блок для кода.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Таблицы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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>
            
          

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

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





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

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

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

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

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

Выбор файлов

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

Файлдсет первый
Общее название
Есть общее название.
Файлдсет второй
Выбор файлов
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) базовой линии названия и базовой линии текста в поле.

Общее название
Есть общее название.
Общее название
Нет общего названия, но оставлен пустой div для него.
Нет общего названия и отсутствует пустой div для него.
Нет общего названия и отсутствует пустой div для него.
Переключатели-флажки
Графика не используется, всё нарисовано CSS-ом.
Выбор файлов
Длинное название поля, которое, будучи многострочным, гарантировано выше чем.
min="1" max="100" step="1" value="70"
            
              <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сылка

Cсылка

Cсылка

Cсылка

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

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

Модификаторы 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>
          
        

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

$
.00
$ .00
          
            <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>
          
        

Модульная сетка на 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
.col-xs-12 .col-sm-6 .col-md-4 .col-lg-3
.col-xs-12 .col-sm-6 .col-md-4 .col-lg-3
.col-xs-12 .col-sm-6 .col-md-4 .col-lg-3
          
            <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 (включительно) и более узких
        }
      
    

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

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

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

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

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

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

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

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

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

    Да, детка, сверстай мне!
          
            <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:
Метка
Метка
Метка
Метка
Метки-ссылки: Метка Метка Метка Метка

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

          
            <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 Метка 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-файл.

            
              <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>
          
        
@@include('blocks/page-footer/page-footer.html') @@include('_include/page_bottom.html') @@include('docs-files/docs.html')