Reboot

Built upon Bootstrap's Reboot, a collection of element-specific CSS to provide a consistent visual baseline across browsers.

Page Contents

Approach

Part of Figuration's job is to provide an elegant, consistent, and simple baseline to build upon. We use Reboot, a collection of element-specific CSS changes in a single file, to kickstart that.

Borrowed from Bootstrap, Reboot heavily builds upon Normalize.css, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some <table> styles for a simpler baseline and later provide .table, .table-bordered, and more.

Here are our guidelines and reasons for choosing what to override in Reboot:

Update some browser default values to use rems instead of ems for scalable component spacing.
Avoid margin-top. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of margin is a simpler mental model.
For easier scaling across device sizes, block elements should use rems for margins.
Keep declarations of font-related properties to a minimum, using inherit whenever possible.

Page Defaults

The <html> and <body> elements are updated to provide better page-wide defaults. More specifically:

The box-sizing is globally set on every element—including *::before and *::after, to border-box. This ensures that the declared width of element is never exceeded due to padding or border.
No base font-size is declared on the <html>, but a 16px browser default is assumed. font-size: 1rem on the <body> for easy responsive type-scaling via media queries while respecting user preferences allowing for a more accessible approach. This browser default can be overridden by modifying the $font-size-root variable.
The <body> also sets a global font-family, line-height, and text-align. This is inherited later by some form elements to prevent font inconsistencies.
For safety, the <body> has a declared background-color, defaulting to #fff.

Native Font Stack

Figuration uses a "native font stack", sometimes called a "system font stack", for optimum text rendering on every device and OS. These system fonts have been designed specifically with today's devices in mind, with improved rendering on screens, variable font support, and more. Read more about native font stacks in this Smashing Magazine article.

$font-family-sans-serif:
    // macOS and iOS
    system-ui,
    -apple-system,
    // Windows
    "Segoe UI",
    // Android
    Roboto,
    // older macOS and iOS
    "Helvetica Neue",
    // Linux
    "Noto Sans",
    "Liberation Sans",
    // Basic web fallback
    Arial,
    // Sans serif fallback
    sans-serif,
    // Emoji fonts
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji"

Note that because the font stack includes emoji fonts, many common symbol/dingbat unicode characters will be rendered as multi-colored pictographs. Their appearance will vary, depending on the style used in the browser/platform's native emoji font, and they won't be affected by any CSS color styles.

This font-family is applied to the <body> and automatically inherited globally throughout Figuration. To switch the global font-family, update $font-family-base and recompile Figuration.

Headings and Paragraphs

All heading elements—e.g., <h1>—and <p> are reset to have their margin-top removed. Headings have margin-bottom: .5rem added and paragraphs margin-bottom: 1rem for easy spacing.

h1 heading