Библиотека блоков проекта
Стартовое состояние проекта содержит ряд блоков и глобальных стилей, описанных и показанных в этом файле. Если некоторые блоки показаны без стилизации, значит они не используются и импорт их стилей отключен в файле диспетчера подключений.
Типографика, код
Стилизация: теги (см. глобальные стили)
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Заголовок 1
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Заголовок 2
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Заголовок 3
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Заголовок 4
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Заголовок 5
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Заголовок 6
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
- Пункт 1
- Подпункт 1
- Подпункт 2
- Пункт 2
- Пункт 3
- Пункт 1
- Подпункт 1
- Подпункт 2
- Пункт 2
- Пункт 3
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
- Определяемая сущность 1
- Некое, возможно, относительно длинное определение упомянутой сущности. Скорее всего, многострочное.
- Определяемая сущность 2
- Некое, возможно, относительно длинное определение. Скорее всего, многострочное.
- Некое, возможно, относительно длинное определение упомянутой сущности.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
<a> |
ссылка, внешний вид |
<strong> |
действительно значимый текст |
<b> |
просто выделенный текст, лид |
<i> |
иностранное слово или термин |
<em> |
эмфатическое ударение |
<s> |
|
<del> |
|
<ins> |
изменение, внесённое в документ (добавление) |
<mark> |
акцент маркерным выделением |
<small> |
малозначимый текст |
<abbr> |
АББРЕВИАТУРА |
<kbd> |
Ctrl + C |
<sup> |
23 |
<sub> |
H2O |
Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.
Строчный код: <section>
// Блочный код
// Вторая строка
Таблицы
Стилизация: теги (см. глобальные стили)
| Имя | Поросёнок |
|---|---|
| Фамилия | Пётр |
| Отчество | Баракович |
| Имя | Фамилия | Отчество |
|---|---|---|
| Поросёнок | Пётр | Баракович |
Адаптивные таблицы
Стилизация: БЭМ-блок .table-responsive
Внимание! Адаптивные таблицы требуют добавления дата-атрибутов. Фиксация минимальной ширины имитатора th будет полезной (делается индивидуально).
Приоритетным является не использование класса .table-responsive, а использование семантических БЭМ-классов и LESS-примеси .table-responsive(sm); (принимает в себя значение той ширины вьюпорта, на которой таблица ещё адаптивна).
| Имя и фамилия | Тип мироощущения |
|---|---|
| Анатоле Вассерман | Девственность |
| Джакомо Казанова | Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей. |
Формы по умолчанию
Стилизация: теги (см. глобальные стили)
Стилизованные формы
Стилизация: БЭМ-блоки .field-text, .field-checkbox, .field-radio, .field-select, .field-file, .field-actions, .form и модификаторы. Опирается на стилизацию форм по умолчанию.
Кнопки
Стилизация: БЭМ-блок .btn и модификаторы.
Приоритетным является подход, в котором используются LESS-примеси .btn() и .btn-color-variant(цвет_текста; цвет_фона; цвет_бордюра). Это не всегда удобно (бывает сложно получить цвета состояний кнопки преобразованием цветов по умолчанию).
Модульная сетка на flexbox
Стилизация: БЭМ-блоки .row, .col-[ID]-[COL], .col-[ID]-offset-[COL]
Возможные ID сетки: xs, sm, md, lg, xl, xxl (xxl по умолчанию закомментированы). Вдохновлено Bootstrap 4.
.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);
}
}