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

Расположение блоков на этой странице регулируется глобальной модульной сеткой и, если она отключена (что хорошо для большинства проектов), блоки смещаются друг под друга.

Проектные блоки — те, что cозданы специально для этого проекта (по умолчанию отсутствуют).

Исходные блоки — те, что есть в стартовом наборе блоков проекта (могут быть отключены).

Исходное: Типографика +

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

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

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

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

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

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

тег address

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

Emmet

Строчный код: <section>

// Блочный код
// Вторая строка

Исходное: Таблицы

Таблица 1
Имя	Поросёнок
Фамилия	Пётр
Отчество	Баракович

Таблица 2
Имя	Фамилия	Отчество
Поросёнок	Пётр	Баракович

Исходное: Адаптивные таблицы

Внимание! Адаптивные таблицы требуют добавления дата-атрибутов. Фиксация минимальной ширины имитатора th будет полезной (делается для каждой таблицы индивидуально).

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

Приоритетным является не использование класса .table-responsive, а использование семантических БЭМ-классов и LESS-примеси .table-responsive(sm); (принимает в себя значение той ширины вьюпорта, на которой таблица ещё адаптивна).

Исходное: Формы по умолчанию

Это legend fieldset-а

Текст в label

text text

Исходное: кнопки

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

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

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

Вдохновлён сеткой bootstrap 4.

Классы .container, .row, .col-[xs|sm|md|lg|xl|xxl]-[1 - @grid-columns]. См. глобальную сетку и примеси.

.col-[xxl]-[1 - @grid-columns] по умолчанию отсутствуют (закомментированы).

.col-xs-12 .col-sm-4 .col-md-4 .col-lg-3

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

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

LESS-примеси

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

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

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

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

  &__first-element {
    // в примесь можно передать много данных
    .col(xs, 6, @grid-columns, 10px);
  }
}