Компоненты и элементы

Вёрстка устроена этажами. Отдельный этаж — отдельный блок и директория в проекте. Связанные логически этажи (все для личного кабинета, например), лежат в одной родительской директории.

Сетка

Для сетки использую Flexbox Grid, она клёвая.

Кнопки

Кнопки включаются через класс .btn, который может быть применёнк любому элементу, но лучше всего использовать <a> или <button>, . В кнопку можно превратить ссылку, обычную кнопку и инпут (ну и на самом деле вообще всё). У кнопок существуют разные модификации. Прмеры — ниже. Вторая кнопка слева она специально такая, это — кнопка для тёмного фона.

Не отрисованы состояния кнопок в прогрессе. Обработка данных, например.

<button type="button" class="btn btn-red">Вот-вот запустим</button>

<button type="button" class="btn btn-outline">Вот-вот запустим</button>

<button type="button" class="btn btn-outline-light">Вот-вот запустим</button>

<button type="button" class="btn btn-white">Вот-вот запустим</button>

Заблокированные состояния кнопок для каждого модификатора показаны отдельным этажом. Блокирование кнопки происходит через класс или атрибут disabled.

<button type="button" class="btn btn-red" disabled>Вот-вот запустим</button>

<button type="button" class="btn btn-outline" disabled>Вот-вот запустим</button>

<button type="button" class="btn btn-outline-light" disabled>Вот-вот запустим</button>

<button type="button" class="btn btn-white" disabled>Вот-вот запустим</button>

Состояния кнопок «в прогрессе» для каждого модификатора показаны отдельным этажом. Включение статусе прогреса кнопки происходит через класс progress.

<button type="button" class="btn btn-red progress">Вот-вот запустим</button>

<button type="button" class="btn btn-outline progress">Вот-вот запустим</button>

<button type="button" class="btn btn-outline-light progress">Вот-вот запустим</button>

<button type="button" class="btn btn-white progress">Вот-вот запустим</button>

Размеры кнопок

Размеры управляются через добавчные классы. Есть три размера: стандартный, большой — .btn-large, маленький — .btn-mini. Также есть класс, который растянет кнопку на 100% ширины родительского блока: .btn-full.

<button type="button" class="btn btn-red btn-large">Вот-вот запустим</button>

<button type="button" class="btn btn-outline-light btn-mini">Вот-вот запустим</button>

<button type="button" class="btn btn-white btn-mini">Вот-вот запустим</button>

Поля и элементы форм

Отдельные элементы форм кладутся в блок-родитель с классом .form-group. Внутри формы работает стандратная сетка. Страндартный класс для поля любого типа — .form-control. Для полей ошибок используется класс .has-error у родительского элемента .form-group.

Состояние «ок» и «прогресс» для полей форм не отрисованы. Также не отрисованы выпадающие списки, множественный выбор, чекбоксы и радиобатоны.

Примеры полей:

<div class="form-group">
 <label for="" class="form-control-label hide" hide="">Email</label>
 <input type="text" id="" class="form-control" placeholder="Email" autofocus="">
</div>

<div class="form-group">
 <label for="" class="form-control-label hide" hide="">Email</label>
 <input type="text" id="" class="form-control focus" placeholder="Email" autofocus="">
</div>

<div class="form-group has-error">
 <label for="" class="form-control-label hide">Имя</label>
 <input type="text" id="" class="form-control" placeholder="Имя">
 <div class="invalid-feedback">Таких имён не баывает, заполните поле</div>
</div>

<div class="form-group">
 <label for="" class="form-control-label hide" hide="">Email</label>
 <input type="text" id="" class="form-control" placeholder="Email" autofocus="" disabled>
</div>

Выбор дат

Для календаря использем Date Range Picker. Документация на сайте плагина.

<div class="form-group">
  <input type="text" name="daterange" class="form-control" value="" />
</div>

Таблицы

В дизайне использовано два вида таблиц. С широкими полями в ячейках и с узкими. Сверстал оба варианта. Для общего использования таблиц использовать класс .table. Для использования узкой таблицы нужно добавить класс-модификатор .table.table-mini. Таблицы верстаюстся по базовой разметке HTML5.

Типографика и текстовые элементы

Базовые классы для текста

<p class="text-right">Немного текста для примера</p>

<p class="text-center">Немного текста для примера</p>

<p class="text-left">Немного текста для примера</p>

Очень длинный заголовок типовой страницы, чтобы настроить междустрочный интервал (интерлиньяж)

Лид — это первый абзац статьи, информативный отрывок позволяющий захватить внимание читателя на данном материале. Необязательный элемент.

Эта страница создана для демонстрации блоков и элементов, которые используются на сайте, и служит руководством для всех, кто работает над ним. Дизайнеры и технологи отрабатывают здесь стили, чтобы добиться приемлемых результатов в различных сочетаниях блоков и элементов. Контент-менеджеры и редакторы используют страницу в качестве справочника по верстке типовых страниц. Здесь же рассказывается о некоторых общих правилах оформления контента.

Заголовок <h1> на странице должен быть использован только один раз!

Многострочный заголовок <h2>, длина которого иногда бывает так некстати

Имманентный подход подразумевает отношение к тексту как к автономной реальности, нацеленность на выявление его внутренней структуры. Репрезентативный — рассмотрение текста как особой формы представления знаний о внешней тексту действительности.

<h3> Делаем заголовки нарочито длинными, чтобы убедиться в правильном интерлиньяже

Текст состоит из некоторого количества предложений. Одно предложение, даже очень распространённое, сложное, текстом назвать нельзя, поскольку текст можно расчленить на самостоятельные предложения, а части предложения сочетаются по законам синтаксиса сложного предложения, но не текста.

<h4> В первую очередь нас интересуют интерлиньяж и отступы, но не стоит забывать и про сам заголовок

Заголовок <h4> используется для большой вложенности в сложной структере документов, например, выставленные счета на оплату, отчёты или информация о полученных знаниях и сертификатах, дефферинциированных по подтипам.

Заголовок пятого уровня <h5>

Заголовок <h5> используется только для вспомогательной информации, где есть вероятность появления шестого уровня разбивки.

Низкоуровневый заголовок <h6>

Самый «нижний» заголовок <h6> предваряет такие элементы, как «Комментарий» или «Таблица».

<h2> Теперь покажем несколько двустрочных
заголовков подряд

<h3> Таким образом проверим их сочетание:
интерлиньяж и отступы

<h4> Однако, в реальной ситуации подобных скоплений
заголовков лучше избегать

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

Списки

Списки бывают нумерованные и ненумерованые. Принципы их оформления одинаковы.

• Если пункты списка длинные и представляют собой развернутые предложения, они должны начинаться с прописной буквы и заканчиваться точкой.
  • Если пункты списка длинные и представляют собой развернутые предложения, они должны начинаться с прописной буквы и заканчиваться точкой.
  • Если пункты списка короткие, не являются самостоятельной законченной конструкцией и грамматически тесно связаны с предшествующей списку вводной фразой, они должны начинаться со строчной буквы и заканчиваться точкой с запятой (в конце последнего пункта — точка).
• Если пункты списка короткие, не являются самостоятельной законченной конструкцией и грамматически тесно связаны с предшествующей списку вводной фразой, они должны начинаться со строчной буквы и заканчиваться точкой с запятой (в конце последнего пункта — точка).

1. Если пункты списка длинные и представляют собой развернутые предложения, они должны начинаться с прописной буквы и заканчиваться точкой.
2. Если пункты списка короткие, не являются самостоятельной законченной конструкцией и грамматически тесно связаны с предшествующей списку вводной фразой, они должны начинаться со строчной буквы и заканчиваться точкой с запятой (в конце последнего пункта — точка).

Короткие пункты

Для использования такого списка необходимо на элемент <ul> добавить класс .list-short.

• с небольшими отступами;
• без маркеров;
• с цветовым выделением.

Оформление текста

Наиболее простыми способами выделения информации являются полужирное и курсивное начертания. Подробнее: § 79. Делать фонт болдом или италиком?

На этом сайте есть дополнительный способ выделения при помощи подсвечивания, для чего используется элемент «Подсвеченный» (класс .highlighted).

Комментарий

Надстрочные и подстрочные индексы

Важно следить за тем, чтобы элементы надстрочных и подстрочных индексов не увеличивали высоту строки, потому что это портит вид текстового блока. Пример: 2³. Еще пример: H₂SO₄. В обоих случаях высота строки от индексов не должна меняться. Если отступ между первой и второй строками увеличился, значит, что-то¹ сделано неправильно.

Ссылки

На сайте может встречаться несколько видов ссылок. Например, ссылка на Яндекс является внешней. Внутренние ссылки могут открываться по умолчанию в текущем окне (например, переход на главную страницу) или в новом окне (например, для показа изображений в оригинальном размере). Подробнее: § 171. Правила оформления ссылок.

Стиль псевдоссылки обеспечивается добавлением к нужному элементу класса .pseudolink.

Цитата

Я увидел всю сущность нашей правящей системы. Там было много очень послушных дураков и неучей.