Scooter logo

Base

View on GitHub

Reset

View on GitHub

base/reset provides a simple CSS reset that removes margins and padding, sets box-sizing, and adds some basic margins to common content elements such as p and ul.

Base

View on GitHub

base/base sets styles for the html element, including font styles for the page.

Typography

View on GitHub

base/typography provides a suite of typographic styles for headings, links, and horizontal rules.

Heading tags (h1, h2, etc.) are not directly styled. Instead, classes are used to style headings at different levels to allow style to be completely separated from document semantics.

This also allows designers and engineers to use a common vocabulary when describing type sizes. The type scale and corresponding HTML classes can be seen below.

.f-headline (48px)

This is a headline

.f-subhead (36px)

This is a subheading

.f1 (24px)

This is a first-level heading

.f2 (20px)

A second-level heading

.f3 (16px)

A third-level heading

.f4 (13px)

A fourth-level heading

This is a paragraph.

This is a paragraph with a link.


<code class="u-font-meta">.f-headline (48px)</code>
<h1 class="f-headline">This is a headline</h1>

<code class="u-font-meta">.f-subhead (36px)</code>
<h1 class="f-subhead">This is a subheading</h1>

<code class="u-font-meta">.f1 (24px)</code>
<h1 class="f1">This is a first-level heading</h1>

<code class="u-font-meta">.f2 (20px)</code>
<h2 class="f2">A second-level heading</h2>

<code class="u-font-meta">.f3 (16px)</code>
<h3 class="f3">A third-level heading</h3>

<code class="u-font-meta">.f4 (13px)</code>
<h4 class="f4">A fourth-level heading</h4>

<p>This is a paragraph.</p>

<p>This is a paragraph <a href="#">with a link</a>.</p>

<hr class="c-rule"/>

On this page