Cмотреть на GitHub

Reboot

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

Reboot - «перезагрузка», унифицирует отображение базовых стилей в браузерах (например переводит все единицы измерения в rem)

Подходы

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. Это гарантирует, что объявленная ширина элемента никогда не будет превышена из-за паддинга или границы.
font-size не объявлен по умолчанию в <html>, но он предполагается как 16px (как в умолчаниях браузера). font-size: 1rem применяется к <body> для легкого отзывчивого масштабирования печатания текста через медиа-запросы и одновременно учитывая предпочтения юзера, а также обеспечивая более гибкий подход.
<body> также устанавливает глобальные значения font-family, line-height и text-align, которые наследуются позже некоторыми элементами форм для предотвращения несоответствия шрифтов.
Для безопасности <body> имеет объявленный background-color, который стремится к #fff.

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

Веб-шрифты по умолчанию (Helvetica Neue, Helvetica, Arial) интегрированы в Bootstrap 4 и заменены «стаком (набором) нативных шрифтов» для оптимального рендеринга текста на любой машине или устройстве под любой ОС. Подробнее можно прочитайте о «родных шрифтах» в данной статье.

$font-family-sans-serif:
  // Safari для macOS и iOS (Сан-Франциско)
  -apple-system,
  // Chrome <56 для macOS (Сан-Франциско)
  BlinkMacSystemFont,
  // 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;

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

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

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

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

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

Списки

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

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

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

Списки описаний: Список описаний идеально подходит для определения терминов.
Срок: Определение термина.; Второе определение того же термина.
Другой термин: Определение этого другого термина.

Пре-форматированный текст

У элемента <pre> удален margin-top, а единицами измерения его margin-bottom стали rem.

.example-element {
  margin-bottom: 1rem;
}

Таблицы

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

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

Формы

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

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

Эти и другие изменения показаны ниже.

Пример легенды

Пример ввода

Пример выбрать

Установите этот флажок

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

Пример текстового поля

Пример даты

Пример времени

Пример вывода 100

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

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

Кнопка элемента без кнопки

<span role="button" tabindex="0">Кнопка элемента без кнопки</span>

Элементы misc

Адрес

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

Элемент <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

ФИО
first.last@example.com

Цитата

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

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

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

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

Nulla attr vitae elit libero, a pharetra augue.

Резюме

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

Некоторые детали

Подробнее о деталях.

Еще подробности

Вот еще подробности о деталях.

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

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

<input type="text" hidden>

Частичная несовместимость [hidden] с jQuery

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

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