Cмотреть на GitHub

Reboot

Reboot - набор изменений для отдельных элементов CSS в едином файле, обеспечиваещий Bootstrap элегантную, простую и последовательную основу для для развития.

На этой странице

Подходы

Reboot основан на файле normalize.css (для лучшего отображения унифицирует стили которые в этом нуждаются), который позволяет обеспечить многие элементы HTML некоторым набором стилей, используя только селекторы элемента. Дополнительная стилизация реализуется только посредством классов. Например, мы «перезагружаем» стили некоего элемента <table> для более простого вертикального выравнивания (baseline – вертикальный «ритм» контента, или иной), а потом применяем классы .table, .table-bordered и т.д.

Вот наши рекомендации и причины для использования Reboot:

Приведите настройки браузера по умолчанию к использованию единиц rem вместо em при масштабируемом расположении контента.
Избегайте margin-top’a. Вертикальные отступы могут «рушиться», приводя к нежелательным результатам. Однако важнее тот факт, что одно направление margin «марджина» - это более простая «ментальная модель» (более просто использовать).
Для более удобного масштабирования на разных устройствах, в блочных элементах должны использоваться единицы rem для margin марджинов.
Старайтесь минимально объявлять свойства font, вместо чего используйте inherit, где только возможно.

Параметры страницы по умолчанию

Элементы <html> и <body> обновлены чтобы обеспечить лучшие «глобальные» умолчания страниц. Подробнее:

Свойство box-sizing глобально объявлено как border-box для каждого элемента – включая *::before и *::after. Это гарантирует, что объявленная ширина элемента никогда не будет превышена из-за паддинга или границы.
- В <html> не объявлен базовый размер шрифта font-size, но его значение предполагается равным 16px (по умолчанию в браузере). В <body> размер шрифта font-size: 1rem для быстрого масштабирования с помощью медиа-запросов и для обеспечения большей совместимости. Это значение по умолчанию для браузера можно поменять, изменив значение переменной $font-size-root.
<body> также устанавливает глобальные значения для font-family, font-weight, line-height и color, которые наследуются некоторыми элементами форм для предотвращения несоответствия шрифтов.
В целях безопасности для <body> параметр background-color имеет значение #fff.

Стек собственных шрифтов («Родные шрифты»)

Bootstrap использует “стек собственных шрифтов” или “стек системных шрифтов” для оптимальной визуализации текста на любой машине или устройстве под любой ОС. Эти системные шрифты были разработаны специально для современных устройств с улучшенным рендерингом на экранах, поддержкой переменных шрифтов и многим другим. Подробнее можно прочитайте о «родных шрифтах» в данной статье Smashing Magazine.

$font-family-sans-serif:
  // Кросс-платформенное общее семейство шрифтов (шрифт пользовательского интерфейса по умолчанию)
  system-ui,
  // Safari для macOS и iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Простой веб резерв
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Резервный вариант без засечек
  sans-serif,
  // Emoji шрифты
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Обратите внимание, что, поскольку стек шрифтов включает шрифты эмодзи (emoji), многие распространенные символы Unicode будут отображаться как разноцветные пиктограммы. Их внешний вид будет различаться в зависимости от стиля, используемого в собственном шрифте эмодзи браузера/платформы, и на них не повлияют никакие цветовые color стили CSS.

Этот font-family применен к <body> и автоматически наследуется глобально во всем Bootstrap. Для изменения глобального font-family обновите карту $font-family-base и перекомпилируйте Bootstrap.

Переменные CSS

По мере того, как Bootstrap 5 продолжает развиваться, все больше и больше стилей будет создаваться с использованием CSS переменных в качестве средства для обеспечения большей настройки в реальном времени без необходимости всегда перекомпилируйте Sass. Наш подход состоит в том, чтобы взять исходные переменные Sass и преобразовать их в переменные CSS. Таким образом, даже если вы не используете переменные CSS, у вас по-прежнему есть все возможности Sass. Это все еще выполняется, и для полной реализации потребуется время.

Например, рассмотрите эти переменные CSS :root для общих стилей <body>:

  @if $font-size-root != null {
    --#{$variable-prefix}root-font-size: #{$font-size-root};
  }
  --#{$variable-prefix}body-font-family: #{$font-family-base};
  --#{$variable-prefix}body-font-size: #{$font-size-base};
  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
  --#{$variable-prefix}body-line-height: #{$line-height-base};
  --#{$variable-prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$variable-prefix}body-text-align: #{$body-text-align};
  }
  --#{$variable-prefix}body-bg: #{$body-bg};

На практике эти переменные затем применяются в Reboot следующим образом:

body {
  margin: 0; // 1
  font-family: var(--#{$variable-prefix}body-font-family);
  @include font-size(var(--#{$variable-prefix}body-font-size));
  font-weight: var(--#{$variable-prefix}body-font-weight);
  line-height: var(--#{$variable-prefix}body-line-height);
  color: var(--#{$variable-prefix}body-color);
  text-align: var(--#{$variable-prefix}body-text-align);
  background-color: var(--#{$variable-prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Что позволяет вам делать настройки в реальном времени, как вам нравится:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

Заголовки и параграфы

Из всех элементов заголовков: <h1> и <p> - удалены margin-top. Для удобных «отступов» заголовкам добавлен margin-bottom: margin-bottom: .5rem, а параграфам - margin-bottom: margin-bottom: 1rem.

Заголовок	Пример
`<h1></h1>`	h1. Bootstrap heading
`<h2></h2>`	h2. Bootstrap heading
`<h3></h3>`	h3. Bootstrap heading
`<h4></h4>`	h4. Bootstrap heading
`<h5></h5>`	h5. Bootstrap heading
`<h6></h6>`	h6. Bootstrap heading

Списки

Из всех списков <ul>, <ol> и <dl> — удален margin-top, а margin-bottom установлен в 1rem. Вложенные списки без margin-bottom. Мы также сбросили padding-left для элементов <ul> и <ol>.

All lists have their top margin removed
And their bottom margin normalized
Nested lists have no bottom margin
- This way they have a more even appearance
- Particularly when followed by more list items
The left padding has also been reset

Here’s an ordered list
With a few list items
It has the same overall look
As the previous unordered list

Для более легкой стилизации, удобной иерархии и красивых отступов, у списков описания (<dl>) обновлены марджины margin. У <dd> значение margin-left стало 0, а margin-bottom: .5rem. <dt> стали жирными.

Description lists: A description list is perfect for defining terms.
Term: Definition for the term.; A second definition for the same term.
Another term: Definition for this other term.

Строчный код

Оборачивайте «блочные» куски кода тэгом <code>. Удостоверьтесь в отсутствии закрывающих угловых скобок HTML.

К примеру, <section> надо обертывать как блочный элемент.

К примеру, <code>&lt;section&gt;</code> надо обертывать как блочный элемент.

Блоки кода

Используйте <pre> для длинных строк кода. Убедитесь, что в коде не указаны угловые скобки для правильного рендеринга. Элемент <pre> сбрасывается для удаления его значения margin-top и используются единицы rem для margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Переменные

Для указания переменных используйте тег <var>.

y = mx + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Пользовательский ввод

Используйте <kbd> для обозначения значений, которые обычно вводятся с клавиатуры.

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Образец вывода

Для указания выходных данных программы используйте тег <samp>.

This text is meant to be treated as sample output from a computer program.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Таблицы

Таблицы слегка адаптированы - изменен <caption>, сдвинуты границы, и теперь таблицы имеют последовательное выравнивание text-align. Дополнительные изменения для границ, паддинга и еще кое-чего – в классе .table.

Это пример таблицы, и это ее заголовок для описания содержимого.
Заголовок	Заголовок	Заголовок	Заголовок
Ячейка	Ячейка	Ячейка	Ячейка
Ячейка	Ячейка	Ячейка	Ячейка
Ячейка	Ячейка	Ячейка	Ячейка

Формы

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

У <fieldset> убраны границы, паддинги и марджины; так что теперь они могут быть легко использованы как «обертки» для отдельных форм ввода или групп форм ввода.
<legend>, как и <fieldset>, тоже изменены, и теперь отображаются как сортируемый заголовок.
Элементы <label> получили значение display: inline-block ля возможности применения марджина margin.
К элементам <input>, <select>, <textarea> и <button>по большому счету, адресуется лишь normalize.css, но Reboot также удаляет их марджин margin и устанавливает line-height: inherit.
Элементы <textarea> изменены – теперь их можно изменять в размере лишь вертикально, потому что горизонтальное изменение часто «ломает» разметку страницы.
Элементы кнопок <button> и <input> имеют cursor: pointer когда :not(:disabled).

Эти и другие изменения смотрите ниже.

Example legend

Example input

Example email

Example telephone

Example url

Example number

Example search

Example range

Example file input

Example select

Check this checkbox

Option one is this and that Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls. Option three is disabled

Example textarea

Example date

Example time

Example password

Example datetime-local

Example week

Example month

Example color

Example output 100

Поддержка ввода даты и цвета

Имейте в виду, что ввод данных не полностью поддерживается всеми браузерами, а именно Safari.

Указатели на кнопки

Reboot включает в себя расширение для role="button" для изменения курсора по умолчанию на указатель pointer. Добавьте этот атрибут к элементам, чтобы указать, что элементы являются интерактивными. Эта роль не требуется для элементов <button> которые получают свои собственные изменения cursor.

Non-button element button

<span role="button" tabindex="0">Non-button element button</span>

Разные элементы

Адрес

Элемент <address> обновлен – теперь вместо дефолтного браузерного font-style: italic стоит normal. line-height теперь наследуется и добавлен margin-bottom: 1rem. Элемент <address> добавлены для контактной информации ближайшего «наследника» (или описания работы в целом). Сохраняйте форматирование добавлением <br> в конец строк.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Full Name
first.last@example.com

Цитата

По умолчанию, марджин margin элемента blockquotes составляет 1em 40px, так что мы «скинули» его до 0 0 1rem для большей «кучности» при работе с другими элементами.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Строчные элементы

Базовые стили элемента <abbr> созданы так, что они «заставляют» его выделяться среди параграфа текста.

Nulla attr vitae elit libero, a pharetra augue.

Резюме

Курсор cursor по умолчанию всегда стремится к курсору текста text, так что мы переназначили его на "указатель" pointer для обозначения возможности взаимодействия с объектом по клику.

Some details

More info about the details.

Even more details

Here are even more details about the details.

Атрибут HTML5 `[hidden]`

HTML5 добавляет новый глобальный атрибут - [hidden], который не отображается по умолчанию имеет значение display: none. Позаимствовав эту идею из PureCSS, мы добавили в нее !important ([hidden] { display: none !important; }), чтобы избежать случайного «перекрытия» свойства display.

<input type="text" hidden>

jQuery несовместимость

[hidden] несовместим с методами jQuery’s $(...).hide() и $(...).show(). Поэтому мы пока не особенно одобряем использование [hidden] с другими методами управления свойством элементов display.

Чтобы лишь скрыть видимость элемента без его «исчезания» из разметки, т.е. без изменения свойства display, используйте вместо [hidden] класс .invisible.