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 spacing, scaling, and default font stacks
• a modular typographic grid
• responsive images and videos that won’t outscale their containers

…and that’s all!

Typography spacing

Bones uses a typography grid inspired by Richard Rutter’s article Compose to a Vertical Rhythym. The basic principle is that text sizes and spaces should be a multiple of some base value. Larger textual elements have larger spaces around them.

Spacing CSS variables:

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

The basic space unit is equal to --base-font-size * --base-line-height. By default this is 32px.

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.

Scaling CSS variables:

• --scale-factor

Scale examples

Heading 4

Fourth-level headings are the same size as body text and have no line space between them and the content that follows.

Heading 3

Third-level headings are larger than body text and have no line space between them and the content that follows.

Heading 2

Second-level headings are larger than third-level and have one line space between them and the content that follows.

Heading 1

The top-level heading is the largest and has two line spaces between it and the content that follows.

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.