Reboot

VelinStyle's Reboot is a collection of element-specific CSS changes delivered in a single file. It builds on Normalize.css and provides an opinionated, modern baseline for consistent cross-browser rendering.

Approach

Reboot applies styles only to plain HTML elements — no classes required. It fixes inconsistencies across browsers while establishing sensible defaults that VelinStyle components build upon.

Uses box-sizing: border-box globally via the universal selector.
Sets a base font-size of 1rem (typically 16px) on <html>.
Applies -webkit-text-size-adjust: 100% to prevent font inflation on mobile.
Moves to a native system font stack for fast, platform-consistent rendering.

Page Defaults

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--velin-font-sans);
  font-size: var(--velin-font-size-base);   /* 1rem */
  line-height: var(--velin-line-height-base); /* 1.5 */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  color: var(--velin-body-color);
  background-color: var(--velin-body-bg);
}

Headings & Paragraphs

Top margins are removed from headings and paragraphs. Headings receive margin-bottom: 0.5rem and paragraphs get margin-bottom: 1rem.

h1 heading

h2 heading

h3 heading

This paragraph demonstrates the default body text styling after the reboot is applied.

Lists

All lists (<ul>, <ol>, <dl>) have their top margin removed and margin-bottom: 1rem. Nested lists have no margin-bottom.

Top-level list item
Another item
- Nested item
- Second nested item
Third item

Ordered item one
Ordered item two

Horizontal Rules

The <hr> element is simplified: border: 0; border-top: 1px solid using the current text color with reduced opacity.

Content above the rule.

Content below the rule.

Code

Inline <code> receives a subtle background and padding. <pre> blocks reset margin-top and normalise font-size.

Use console.log() to debug output.

function greet(name) {
  return `Hello, ${name}!`;
}

Tables

Reboot normalises <table> with border-collapse: collapse and inherits text alignment from the parent. <caption> is set to caption-side: bottom.

Forms

Various form elements are rebooted for consistency:

<fieldset> — borders, padding, and margin are reset.
<legend> — displayed as a block with a wider width.
<input>, <button>, <select>, <textarea> — inherit font-family, font-size, and line-height.
<button> and <[type="button"]> — receive cursor: pointer when not disabled.

Miscellaneous

<address> — resets font-style to normal.
<blockquote> — resets margin to 0 0 1rem.
<abbr[title]> — adds a dotted underline and help cursor.
<mark> — sets a highlight background color via CSS variable.
<summary> — receives cursor: pointer.