Content

Styles for displaying content with some of the most commonly used HTML elements, including normalization, typography, images, tables, buttons, forms, and more.

Reboot

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.

Page Contents

Approach

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.
A base font-size: 100% (assuming a 16px browser default) is declared on the <html> and font-size: 1rem on the <body> for easy responsive type-scaling via media queries while respecting user preferences allowing for a more accessible approach.
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

The default web fonts (Helvetica Neue, Helvetica, and Arial) have been dropped in Figuration and replaced with a "native font stack" for optimum text rendering on every device and OS. Read more about native font stacks in this Smashing Magazine article.

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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