Bones

CSS · Github

Bones is a tiny bit of CSS that you can add as a starting point for all your projects. It includes only the things that you’ll probably want on every site. It looks like this.

What you get:

• CSS variables for font sizing, spacing, and scaling
• default font stacks for serif, sans-serif, and monospace text
• responsive images and videos that won’t outscale their containers

…and that’s all!

Typography spacing

Bones uses sensible, legible sizes for text by default. The base font size is 1.25rem, which translates to 20px if unchanged. The base line-height is 1.5, which results in a line height of 30px.

The default space unit, just called --space, defaults to the font size multiplied by the line height: 30px.

Spacing CSS variables:

• --base-font-size
• --base-line-height
• --space

Typography scaling

Text and heading sizes grow on a gradual scale. Each level of heading, ascending from h4 to h1, is larger than the previous by a factor of --scale-factor. Larger headings have larger margins.

Scaling CSS variables:

• --scale-factor

Scale examples

Heading 4

Fourth-level headings are the same size as body text.

Heading 3

Third-level headings are larger than body text and have top and bottom margins.

Heading 2

Second-level headings are larger than third-level and have top and bottom margins.

Heading 1

The top-level heading is the largest and has the largest margins.

Font stacks

The font stacks in Bones come from Ire Aderinokun’s article The New System Font Stack? and include reasonable stacks of system fonts in sans serif, serif, and monospace.

Font CSS variables:

• --fonts-sans
• --fonts-serif
• --fonts-mono

Responsive images and videos

Images and videos won’t exceed their container width by default.