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

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

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

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

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

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

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

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

Заголовок 1

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

Заголовок 2

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

Заголовок 3

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

Заголовок 4

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

Заголовок 5

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

Заголовок 6

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

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

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

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

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

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

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

Emmet

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

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

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

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

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

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

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

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


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

Это legend fieldset






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

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-xs-12 .col-sm-4 .col-md-4 .col-lg-3
.col-xs-12 .col-sm-4 .col-md-4 .col-lg-3
.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);
  }
}

@@include('_include/page_footer.html') @@include('_include/page_bottom.html')