Chassis.css

v4.0.8

Style resets

The chassis.css style resets provide a minimalistic, versatile, and accessibility focused baseline for elements and typography. With little-to-no extra styling and practical sizes and spacing, it provides a solid foundation.

The basics

The chassis.css style resets come with a handful of defaults to keep in mind.

  • All elements and pseudo-elements are set to box-sizing: border-box.
  • The root font size is 16px with no font family applied out of the box and a line height of 1.15.
  • Font smoothing is applied to all elements.
  • Top margins are removed from all elements in favor of just using bottom margins.

Headings

Heading styles are provided for <h1> through <h6>:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

In the above example, headings <h1> through <h6> are displayed. Every heading has a bottom margin of .5rem with the following font sizes:

  • <h1> has a font size of 2.5rem.
  • <h2> has a font size of 2rem.
  • <h3> has a font size of 1.75rem.
  • <h4> has a font size of 1.5rem.
  • <h5> has a font size of 1.25rem.
  • <h6> has a font size of 1rem.

Heading classes

Sometimes you want to style elements to look like headings, especially in the event that an actual heading element doesn’t make sense logically or from an accessibility standpoint; That’s where heading classes come in handy:

<p class="h1">Heading 1</p>
<p class="h2">Heading 2</p>
<p class="h3">Heading 3</p>
<p class="h4">Heading 4</p>
<p class="h5">Heading 5</p>
<p class="h6">Heading 6</p>

In the above example, there are 6 paragraph elements styled to look like <h1> through <h6>. Heading classes follow the .h* class structure, where * can be a number between 1 and 6.

Paragraphs & lists

Paragraphs and lists have pretty simple styling applied to them:

<p>This is a paragraph</p>
<ul>
    <li>Unordered list item 1</li>
    <li>Unordered list item 1</li>
    <li>Unordered list item 1</li>
</ul>
<ol>
    <li>Ordered list item 1</li>
    <li>Ordered list item 1</li>
    <li>Ordered list item 1</li>
</ol>

In the above example, there’s a paragraph, an unordered list, and an ordered list. All of these elements have a bottom margin of 1rem.

Other elements

More style resets have been applied to the following elements:

  • <small> has a font size of .5em.
  • <strong> and <dt> have a font weight of bold.
  • <em> has a font style of italic.
  • <dd> has a bottom margin of .5rem.
  • <blockquote> has a margin of 0 0 1rem and a font size of 1.25rem.
  • <fieldset> has a minimum width, margin, padding, and border of 0.