Reboot is a file that includes a set of CSS with element-specific changes that gives Hummingbird a clean, consistent starting point for building websites.
CSS variables provide a powerful way to customize and theme projects. It’s a feature in modern CSS that allows defining reusable values directly in stylesheets. CSS variables make customization easy: change a value in one place (like :root) and it updates everywhere the variable is used. Variables can be set at different levels (global, component, etc.), making them flexible.
A “Reboot” stylesheet (like Hummingbird’s Reboot) resets browser styles and sets up a foundation for consistent design. Using CSS variables in Reboot makes it easy for developers to customize base styles without editing the core CSS—just override the variables.
Tailwind CSS uses CSS variables for theming and customization. Hummingbird makes use of Tailwind’s CSS variable feature to define colors, typography, spacing, and more. This allows projects to easily adapt the design system to specific needs. Learn more about Hummingbird’s CSS variables in the Theming section.
All the headings (h1 to h6) in Hummingbird are styled with CSS variables for font size, weight, line height, and margin.
| Heading | Example |
|---|---|
<h1></h1> | Heading 1 |
<h2></h2> | Heading 2 |
<h3></h3> | Heading 3 |
<h4></h4> | Heading 4 |
<h5></h5> | Heading 5 |
<h6></h6> | Heading 6 |
For all paragraph (<p>) elements, margin-top was removed, and margin-bottom: 1rem is set.
This is an example paragraph
HTML
<p>This is an example paragraph</p>Links are styled with a default color and an underline by default. On hover, the link color changes to a darker shade.
HTML
<a href='#'>This is an example link</a>By default, buttons (<button>) have a cursor-pointer style. When a button is disabled, the cursor changes to cursor-default.
HTML
<button class='btn'>This is a button</button>
<button class='btn' disabled>This is a disabled button</button>Default margin-top and margin-bottom for horizontal rules (<hr>) is set to 1rem.
HTML
<hr />
<hr class='border-danger-light' />
<hr class='border-t-3 border-primary-light' />By default, unordered lists (<ul>) use disc bullets, and ordered lists (<ol>) use decimal numbers. Both types of lists have a left padding of 2rem and a bottom margin of 1rem. Nested lists have no bottom margin.
Terms (<dt>) are styled with a bold font weight, while descriptions (<dd>) use a regular font weight. Default margin-bottom for <dl> is 1rem.
By default, inline code elements (<code>) are styled with a specific text color and font size. When a <code> element is nested inside an <a> tag, it inherits the link’s text color and font size.
code in a sentence. This is a link with code HTML
This is an example of inline <code>code</code> in a sentence. <a href='#'>This is a link with <code>code</code></a>The <address> element is styled with a bottom margin of 1rem.
By default, blockquotes (<blockquote>) have a bottom margin of 1rem.
This is an example blockquote. It is used to indicate the quotation of a large section of text from another source.
The <legend> element is styled to be a block-level element with full width, no padding, and specific margin, font weight, and font size.
By default, table captions (<caption>) are aligned to the left and positioned at the bottom of the table. They also have specific font weight and padding.
| Header 1 | Header 2 |
|---|---|
| Data 1 | Data 2 |
| Data 3 | Data 4 |
The following CSS variables are defined in Hummingbird for reboot styles. Override these variables in the CSS to customize the base styles of the project.
:root {
--body-bg: var(--background-color-default);
--body-color: var(--text-color-default);
--body-font-size: var(--text-base);
--body-font-weight: var(--font-weight-normal);
--hr-margin-y: --spacing(4);
--hr-margin-x: 0;
--hr-color: var(--text-color-default);
--hr-border-color: var(--border-color-base);
--headings-margin-bottom: --spacing(2);
--headings-font-weight: var(--font-weight-bold);
--h1-font-size: 48px;
--h1-line-height: 1;
--h2-font-size: 42px;
--h2-line-height: 1;
--h3-font-size: 32px;
--h3-line-height: 1.1;
--h4-font-size: 28px;
--h4-line-height: 1.1;
--h5-font-size: 24px;
--h5-line-height: 1.15;
--h6-font-size: 20px;
--h6-line-height: 1.2;
--paragraph-margin-bottom: --spacing(4);
--dt-font-weight: var(--font-weight-bold);
--anchor-color: var(--color-primary);
--anchor-hover-color: var(--color-primary-dark);
--code-color: var(--color-pink-600);
--code-font-size: var(--text-sm);
--caption-padding-y: --spacing(4);
--caption-padding-x: --spacing(4);
--caption-font-weight: var(--font-weight-medium);
--legend-margin-bottom: --spacing(2);
--legend-font-weight: var(--font-weight-medium);
--legend-font-size: var(--text-xl);
}