Tachyons v1.0.1 — MMXXVI
§ 00 Index — A Functional CSS Toolkit

Tachyons.
Neo.

A small, composable CSS toolkit. Sharper defaults for modern viewports, finer-grained colour steps, a small CSS Grid layer, and a handful of utilities for prototyping. No build step, no dependencies, one stylesheet.

§ 01 Install

Drop the stylesheet in and go. Load it from jsDelivr, vendor it with curl, or copy the single file into your project. No build step, no dependencies.

CDN — jsDelivr

<!-- Pinned to a tag (recommended) -->
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/gobijan/tachyons-neo@v1.0.1/tachyons.css">

<!-- Major-floating -->
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/gobijan/tachyons-neo@1/tachyons.css">

<!-- Latest main (no cache guarantee) -->
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/gobijan/tachyons-neo/tachyons.css">

Vendor

curl -O \
  https://raw.githubusercontent.com/gobijan/tachyons-neo/main/tachyons.css

<link rel="stylesheet" href="tachyons.css">
§ 02 Patches
01

-m breakpoint

The -m modifier has no upper bound — styles applied at the medium breakpoint continue applying at large unless explicitly overridden. Reduces repetition.

<div class="pa3 pa5-m">
  Padding-5 applies from
  480px and up.
</div>
02

Gap scale

Eight gap utilities for flex and grid layouts, mapped to the Tachyons spacing scale. Responsive variants available at every breakpoint.

.g0 { gap: 0      }
.g1 { gap: .25rem }
.g2 { gap: .5rem  }
.g3 { gap: 1rem   }
.g4 { gap: 2rem   }
.g5 { gap: 4rem   }
.g6 { gap: 8rem   }
.g7 { gap: 16rem  }
03

Dynamic viewport heights

Heights using the dvh unit — accounts for collapsible mobile browser chrome so 100 % really means 100 %. Responsive variants available.

.dvh-25      { height:     25dvh }
.dvh-50      { height:     50dvh }
.dvh-75      { height:     75dvh }
.dvh-100     { height:    100dvh }
.min-dvh-100 { min-height: 100dvh }
04

Hairline opacities

Extra-low opacity steps for whisper-thin overlays, dividers, and tints. Available as colour, background, and hover variants for both black and white.

.black-025   rgba(0,0,0,.025)
.black-0125  rgba(0,0,0,.0125)
.white-05    hsla(0,0%,100%,.05)
.white-025   hsla(0,0%,100%,.025)
.white-0125  hsla(0,0%,100%,.0125)

// also: .hover-* and .hover-bg-*
05

Outlined type

Renders text as an outline using -webkit-text-stroke. Combine with an inline stroke-width for thicker strokes. See the headline above. Responsive variants available.

.stroke {
  -webkit-text-stroke: 1px currentColor;
  -webkit-text-fill-color: transparent;
}
06

Grid system

A small, opinionated CSS Grid layer — equal-fraction columns and column spans. Pairs with the gap scale. Responsive variants available.

.grid     display: grid

.gtc1     grid-template-columns: 1fr × 1
.gtc2     grid-template-columns: 1fr × 2
.gtc3     grid-template-columns: 1fr × 3
.gtc4     grid-template-columns: 1fr × 4

.csp1     grid-column: span 1
.csp2     grid-column: span 2
.csp3     grid-column: span 3
.csp-full grid-column: 1 / -1
07

Filters & effects

A handful of one-shot effects: a tactile press dimmer, a colour inverter, and a backdrop blur for glass surfaces.

.active-dim:active {
  opacity: .8;
  transition: opacity .15s ease-out;
}
.invert { filter: invert(1) }
.blur   {
  backdrop-filter:         blur(30px);
  -webkit-backdrop-filter: blur(30px);
}
08

Form & list helpers

Two small affordances. Disable the textarea resize handle, and place list markers inside the content box where they belong.

.resize-none { resize: none }
.list-inside { list-style-position: inside }
09

Placeholder backgrounds

Lorem-ipsum for backgrounds. Pulls a random photo from picsum.photos at three aspect ratios. For prototyping; don't ship to production.

.random-image
.random-image-landscape
.random-image-portrait
§ 03 Tokens

Every design value — spacing, type scale, colours, radii, shadows, durations — is exposed as a :root custom property. Reference them from your own CSS via var(--spacing-3), var(--dark-pink), var(--lh-copy).

Spacing

--spacing-0   0
--spacing-1   .25rem
--spacing-2   .5rem
--spacing-3   1rem
--spacing-4   2rem
--spacing-5   4rem
--spacing-6   8rem
--spacing-7   16rem

Font size

--font-size-headline       6rem
--font-size-subheadline    5rem
--font-size-1              3rem
--font-size-2              2.25rem
--font-size-3              1.5rem
--font-size-4              1.25rem
--font-size-5              1rem
--font-size-6              .875rem
--font-size-7              .75rem

Measure & max-width

--measure          30em
--measure-wide     34em
--measure-narrow   20em
--mw-6             32rem
--mw-7             48rem
--mw-8             64rem
--mw-9             96rem

Line-height

--lh-solid      1
--lh-title      1.25
--lh-copy       1.5
--lh-headline   .85

Letter-spacing

--tracked         .1em
--tracked-tight   -.05em
--tracked-mega    .25em

Radius

--radius-0      0
--radius-1      .125rem
--radius-2      .25rem
--radius-3      .5rem
--radius-4      1rem
--radius-100    100%
--radius-pill   9999px

Border width

--border-width-0   0
--border-width-1   .125rem
--border-width-2   .25rem
--border-width-3   .5rem
--border-width-4   1rem
--border-width-5   2rem

Shadow

--shadow-1   0 0 4px 2px rgba(0,0,0,.2)
--shadow-2   0 0 8px 2px rgba(0,0,0,.2)
--shadow-3   2px 2px 4px 2px rgba(0,0,0,.2)
--shadow-4   2px 2px 8px 0   rgba(0,0,0,.2)
--shadow-5   4px 4px 8px 0   rgba(0,0,0,.2)

Duration

--duration-fast     .15s
--duration-medium   .25s
--duration-slow     .5s

Grayscale

--black          #000
--near-black     #111
--dark-gray      #333
--mid-gray       #555
--gray           #777
--silver         #999
--light-silver   #aaa
--moon-gray      #ccc
--light-gray     #eee
--near-white     #f4f4f4
--white          #fff

Black alpha

--black-90    rgba(0,0,0,.9)
--black-80    rgba(0,0,0,.8)
--black-70    rgba(0,0,0,.7)
--black-60    rgba(0,0,0,.6)
--black-50    rgba(0,0,0,.5)
--black-40    rgba(0,0,0,.4)
--black-30    rgba(0,0,0,.3)
--black-20    rgba(0,0,0,.2)
--black-10    rgba(0,0,0,.1)
--black-05    rgba(0,0,0,.05)
--black-025   rgba(0,0,0,.025)
--black-0125  rgba(0,0,0,.0125)

White alpha

--white-90    hsla(0,0%,100%,.9)
--white-80    hsla(0,0%,100%,.8)
--white-70    hsla(0,0%,100%,.7)
--white-60    hsla(0,0%,100%,.6)
--white-50    hsla(0,0%,100%,.5)
--white-40    hsla(0,0%,100%,.4)
--white-30    hsla(0,0%,100%,.3)
--white-20    hsla(0,0%,100%,.2)
--white-10    hsla(0,0%,100%,.1)
--white-05    hsla(0,0%,100%,.05)
--white-025   hsla(0,0%,100%,.025)
--white-0125  hsla(0,0%,100%,.0125)

Warm

--dark-red       #e7040f
--red            #ff4136
--light-red      #ff725c
--orange         #ff6300
--gold           #ffb700
--yellow         gold
--light-yellow   #fbf1a9

Purple & pink

--purple         #5e2ca5
--light-purple   #a463f2
--dark-pink      #d5008f
--hot-pink       #ff41b4
--pink           #ff80cc
--light-pink     #ffa3d7

Green

--dark-green    #137752
--green         #19a974
--light-green   #9eebcf

Blue

--navy           #001b44
--dark-blue      #00449e
--blue           #357edd
--light-blue     #96ccff
--lightest-blue  #cdecff

Washed

--washed-blue     #f6fffe
--washed-green    #e8fdf5
--washed-yellow   #fffceb
--washed-red      #ffdfdf

Font families

--font-sans-serif
--font-serif
--font-system-sans-serif
--font-system-serif
--font-code
§ 04 Changelog

Release notes, newest first. Each entry summarises the material changes since the previous tag.

v1.0.1
  • Swapped `:focus` for `:focus-visible` on `.link`, all `.hover-*` color/bg utilities, and interactive helpers (`.dim`, `.glow`, `.grow`, `.grow-large`, `.hide-child`, `.underline-hover`, `.shadow-hover`, `.bg-animate`, `.nested-links a`) in `tachyons.css`.
  • Added a Changelog section (§ 03) to `index.html` and `README.md`; renumbered Colophon to § 04.
  • Linked the Source and Upstream entries in the Colophon and switched the footer Screen Island link to `dark-blue underline-hover`.
v1.0.0
  • Initial release. Tachyons v4.13.0 with nine patches, a 118-token design system, and a small grid layer.
§ 05 Colophon

A Screen Island edition of Tachyons. Set in the system Helvetica/Avenir stack at the body, with JetBrains Mono for code. Descended from Tachyons (tachyons.io, 2016–) under the long shadow of Müller-Brockmann, Hofmann, and Crouwel. Built for internal use at Screen Island; published in case it's useful to you.

Source
github.com/gobijan/tachyons-neo
Upstream
tachyons.io · v4.13.0
License
MIT