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

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

Проектные блоки — те, что 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~~, тег u
тег mark, ~~тег del~~, тег ins, тег small
2³, H₂O
тег abbr
Ctrl + C

тег address

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

Emmet

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

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

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

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

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

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

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

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

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

Это legend fieldset-а

Текст в label

text text

Исходное: Модульная сетка на 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);
  }
}