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

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

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

Типографика, код

Стилизация: теги (см. глобальные стили)

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

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

Заголовок 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
тег address

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

Emmet

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

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

Таблицы

Стилизация: теги (см. глобальные стили)

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

Адаптивные таблицы

Стилизация: БЭМ-блок .table-responsive

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

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

@@include('blocks/table-responsive/table-responsive.html')

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

Стилизация: теги (см. глобальные стили)

Это legend fieldset-а





Стилизованные формы

Стилизация: БЭМ-блоки .field-text, .field-checkbox, .field-radio, .field-select, .field-file, .field-actions, .form и модификаторы. Опирается на стилизацию форм по умолчанию.

Варианты разметки и модификаторы @@include('blocks/field-text/field-text.html',{ "type": "text", "name": "Любое поле, выглядящее как текстовое", "placeholder": "input[type=text]", "helpText":"Обёртка — label. Можно сделать обёртку div, но тогда, возможно, захочется элемент .field-text__name делать label и связывать его с полем по id поля." }) @@include('blocks/field-text/field-text.html',{ "type": "textarea", "name": "Многострочное текстовое поле", "placeholder": "textarea", "helpText": "Обёртка — label." }) @@include('blocks/field-checkbox/field-checkbox.html',{ "name": "Стандартные флажки", "text": "Флажок", "mod": "", "helpText": "Есть общее название. При желании флажков можно написать несколько подряд." }) @@include('blocks/field-checkbox/field-checkbox.html',{ "name": "Собственные флажки", "text": "Флажок", "mod": "custom", "helpText": "Есть общее название. При желании флажков можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией data-uri() компилятора LESS." }) @@include('blocks/field-radio/field-radio.html',{ "name": "Стандартные радиокнопки", "text": "Радиокнопка", "mod": "", "helpText": "Есть общее название. При желании радиокнопок можно написать несколько подряд." }) @@include('blocks/field-radio/field-radio.html',{ "name": "Собственные радиокнопки", "text": "Радиокнопка", "mod": "custom", "helpText": "Есть общее название. При желании радиокнопок можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией data-uri() компилятора LESS." }) @@include('blocks/field-select/field-select.html',{ "name": "Селект", "options": "", "helpText": "Обёртка — <label>." }) @@include('blocks/field-range/field-range.html',{ "name": "Range", "properties": "min=\"1\" max=\"100\" step=\"1\" value=\"70\"", "helpText": "min=\"1\" max=\"100\" step=\"1\" value=\"70\", стилизован без JS." }) @@include('blocks/field-range/field-range.html',{ "name": "Range", "properties": "min=\"1\" max=\"30\" step=\"5\" value=\"10\"", "helpText": "min=\"1\" max=\"30\" step=\"5\" value=\"10\", стилизован без JS." }) @@include('blocks/field-file/field-file.html', { "name": "Выбор файлов", "helpText": "Работа этого стилизованного поля требует Javascript-а. Но только работа. Стилизация — нет." }) @@include('blocks/field-actions/field-actions.html', { "actions": "" })
Горизонтальная форма
Общее название
Есть общее название.
Нет общего названия, но оставлен пустой div для него.
Нет общего названия и отсутствует пустой div для него.

Кнопки

Стилизация: БЭМ-блок .btn и модификаторы.

Приоритетным является подход, в котором используются LESS-примеси .btn(), .btn-color(цвет_текста; цвет_фона; цвет_бордюра) и .btn-size([sm|md|lg]).

Все кнопки — display: inline-flex;.

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

Cсылка (lg) Cсылка Cсылка (sm)

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

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

Стилизация: нет, только примеси.

К нужным элементам добавляем примеси, элементы скрываются на тех или иных ширинах вьюпорта.

В примесях указано только значение display: none;, без !important.

.block-name {
  .hidden-up(lg);   // Скрыть на LG (включительно) и более широких
  .hidden-down(sm); // Скрыть на SM (включительно) и более узких
}
@@include('_include/page_footer.html') @@include('_include/page_bottom.html')