Смотреть на GitHub

Обновление

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. Это гарантирует, что объявленная ширина элемента никогда не будет превышена из-за паддинга или границы.
    • 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 for macOS and iOS (San Francisco)

  -apple-system,

  // Chrome < 56 for macOS (San Francisco)

  BlinkMacSystemFont,

  // Windows

  "Segoe UI",

  // Android

  Roboto,

  // Basic web fallback

  "Helvetica Neue", Arial,

  // Linux

  "Noto Sans",

  // Sans serif fallback

  sans-serif,

  // Emoji fonts

  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Этот 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.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

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

<dl> прекрасно подходит для определений терминов:

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

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

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

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

Таблицы

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

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

Формы

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

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

Эти изменения (и еще) показаны внизу.

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

100

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

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

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

Элементы misc

Адрес

Элемент <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 для обозначения возможности взаимодействия с объектом по клику.

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

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

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

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

Атрибут 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.