This page is coding related.

Switch your preference toggle to "dev view" in the header to see this content

Return to the homepage

Approach

Reboot builds upon Normalize, 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` tag 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 `rem`s instead of `em`s 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 `rem`s for `margin`s.
• Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible.

Page defaults

The `html` tag and `body` tag 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` tag, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `body` tag for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.
• The `body` tag 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` tag has a declared `background-color`, defaulting to `#fff`.