🇨🇭 its-swiss^v1.1.0

2026.08.31 updated 2026.09.24

sensible Swiss defaults for Rails

Source: bobbymeyer/its-swiss
Live: www.bobbymeyer.com/posts/its-swiss
Release: v1.1.0
Written in: HTML

merged

2026.09.24#22
1.1.0: rule a textarea on the grid
A textarea now has a dotted rule on every line that type can stand on. Each rule takes the same row of pixels a rule would take at that grid line. The line of air under the label has none, and neither does the last line, which the control's own rule closes.
2026.09.07#21
1.0.0: the review, in one
The full review, as a tech lead and as Müller-Brockmann, done as one PR. Version 1.0.0; the migration is in the changelog.
Fixed --span does not inherit. A registered property with inherits: false and no initial value, so a grid inside a spanned item starts its own children on the whole field.
2026.09.07#20
Hold json below 3 until a Rails that takes it
0.9.1: 0.9.0 released. Nothing in the library changed.
json 3.0.0 came out at 06:57 UTC today, twenty minutes after #19's CI went green, and changed the signature of JSON.parse.
2026.09.07#19
Sections, explanations, and one red per page
What a day of use asks of a style: less talk and one red. 0.9.0.
Added
Sections. page_head(title, sections:) names the surfaces of one page under its title — what a thing is made of, what it wears, how it leaves — the one shown in the weight, and a page shows that one alone.
2026.09.07#18
0.8.0: a page head, filters, cards, a live search, a menu and a subnav
The third consumer, and what it and the second found in common. Pandatone, Stripeclub and Badger had each drawn their own page head, and no two agreed on the size of the title or where the buttons went; Pandatone alone had a filtered index with a live search.
2026.09.05#17
Drop the Pandatone handoff
It described the extraction of this library from Pandatone and the path back to it, with a path: "../its-swiss" dependency and a 0.1.0 still to cut. Both are done: Pandatone is a Rails engine on the released gem. Nothing references the file.
Generated by Claude Code
2026.09.04#16
Set a control's text on the line the rule closes
0.7.1 took a control's text off the faces and left it on the first of the control's two lines, a whole line above the rule. It sits on the second line now, the one the rule closes, so the type stands on its rule the way a line of handwriting stands on a ruled page. The first line is air under the label.
2026.09.04#15
Take a control's text off the baseline; cut 0.7.1
Every descender in an input, a select or a textarea was clipped at the rule. The faces give the type no descent so that every baseline lands on the under edge of its line, and a browser sets a control's text in a box of its own, centres it there and clips it there — so with font: inherit the lower third of every…
2026.09.04#14
Date 0.7.0
0.7.0 is on RubyGems as of the v0.7.0 tag (Release run 33903482588); the changelog entry loses its "Unreleased".
Generated by Claude Code
2026.09.04#13
Centre a button's label in its box, and let the specimen measure itself
Follow-up to #12, still under the unreleased 0.7.0. Prompted by the 0.7.0 specimen looking right in Safari and wrong — headings between baselines, drift down the page — in Firefox and Brave on macOS; then driven by measure reports from Chrome 152 on macOS.
What
The trim is opt-in, not opt-out.
2026.09.04#12
Set every register in a face whose ascent is its leading (0.7.0)
Every baseline on the grid, in every browser, whatever the font — by replacing the font's metrics with the ladder's, and trimming to the type where a browser will not let us.
2026.09.03#11
Keep a pinned specimen in the repository, not on the site
A published post points at https://bobbymeyer.github.io/its-swiss/0.6.0.html. That file no longer exists, so the post has been showing a dead frame since the 0.6.1 deploy.
Why it vanished
Pages replaces the whole site on every deploy, so a version-stamped page survives only if the run writes it again.
2026.09.03#10
0.6.1 — put the column back on the grid outside Chromium
The published specimen drifts in Safari, starting at Masthead and Navigation. Three faults, all in components.css, none visible in the one browser everything was checked in.
The masthead
It puts a block of type (.masthead__mark) beside a flex container (.nav) and asks the browser to align their baselines.
2026.09.02#9
0.6.0 — publish the specimen, so nothing has to keep a copy
The specimen is ERB rendered by Rails, so anything that cannot run Rails — a static site, a README, a release note — has had to keep a copy made by hand. Two did, and both drifted.
2026.09.02#8
0.5.0 — make the specimen show everything, and find what it was not
Asked to demonstrate every component, the specimen could not. Five were shipped and shown nowhere: .stack, .form--inline, .field--inline, .pairs--stacked, .figure--cover.
2026.09.02#7
Say that 0.2.0 was never published
v0.2.0 is tagged and the gem is not on RubyGems. The changelog documented a version a reader could not install and gave no sign of it.
What happened
The release run on that tag passed the tag-versus-gemspec check, Rubocop, the suite and the already-published check, then failed at step 8, rubygems/release-gem.
2026.09.02#6
0.4.0 — make the baseline the line, not a third of it
Breaking. Applications setting --baseline need to set --line instead.
0.3.0 put the type on a baseline grid and then registered it to eight pixels — a third of the body line.
2026.09.01#5
Put the type on the baseline, not merely in step with it
Follow-up to #4, which merged before this half was pushed. #4 put every box on the baseline; this puts the type there.
Why there was more to do
Boxes in step are the easy half.
2026.09.01#4
Put the type on the baseline
Two commits, and the second is the one that matters. The first takes every rule out of the box it is drawn on; the second puts the type itself on the grid rather than merely in step with it.
Found because the rhythm looked wrong in a page embedding the specimen, then measured rather than read.
2026.08.31#3
0.2.0 — fix what the second consumer found
Stripeclub built on 0.1.0 and hit four things in a day, which is roughly the point of having a second consumer. Two are bugs, two are the installer pointing at a shape that does not scale. All four verified against the source before acting on them.
2026.08.31#2
Claude/its swiss typography u3eagx
2026.08.31#1
Extract its-swiss from Pandatone
The first four steps of the extraction plan, plus the specimen. Two layers: plain CSS that needs nothing but a <link> tag, and a Rails engine that ships it with a layout shell, partials, a form builder, helpers and an installer.

All on GitHub

readme

sensible Swiss defaults for Rails

Tokens, reset, typography, grid primitives and components in the spirit of the International Typographic Style, as plain CSS plus a Rails engine that ships it. Monochrome by default: the value scale does the work, and the one accent is the consuming application's to set.

quickstart

# Gemfile
gem "its-swiss", github: "bobbymeyer/its-swiss"

bundle install
bin/rails generate its_swiss:install

The generator fills the four slots an application owns:

It writes	Which is
`app/assets/stylesheets/theme.css`	The accent, the typeface, the value scale, the field count, the baseline
`app/views/layouts/application.html.erb`	A nested layout inside the shell — no `layout` line on any controller
A route for the specimen	Development only; skipped if already mounted

Everything else is a gem dependency: Propshaft finds the stylesheets, and the engine pins its own JavaScript, so upgrading the gem is enough.

Specimen → — every component, the type scale, the value scale and the grid primitives, rendered by the library and published from this repository.

the shell

layouts/its_swiss/shell carries the view-transition opt-in, the stylesheets in layer order, a skip link, and the slots. All optional:

Slot	Is
`:title`	The page's title; falls back to the application's name
`:head`	Anything else belonging in `<head>`
`:mark`	The wordmark. No mark and no nav means no masthead at all
`:nav`	The destinations
`:subnav`	A second layer, inside the one you are in
`:main_class`	What the page's main region is, if it is a grid
`:footer`	Whatever belongs after the page

It stops there. A page layout beyond the shell is the application's, for the same reason its grid is.

tokens

Set in theme.css; everything else reads them.

Group	Custom properties
Value scale	`--value-chroma`, `--value-hue`, `--value-0` … `--value-5`
Roles	`--paper`, `--paper-shaded`, `--rule`, `--rule-strong`, `--ink-quiet`, `--ink`, `--accent`, `--accent-ink`
Rules	`--rule-hair`, `--rule-heavy`
Type	`--font-family`, `--font-mono`, `--face-100`, `--face-150`, `--face-200`, `--face-mono`, `--cap-correction`
Scale	`--size-1` … `--size-5`
Baseline	`--line`, `--line-2`, `--line-3`, `--line-4`, `--half-line`, `--module`
Space	`--space-unit`, `--space-1`, `--space-2`, `--space-3`, `--space-4`, `--space-6`, `--space-8`
Page	`--columns`, `--gutter`, `--page-max`, `--page-inset`, `--field`
Measure	`--measure`, `--measure-characters`, `--card`, `--filter-label`
Transitions	`--transition-page`, `--transition-morph`, `--transition-ease`

grid primitives

.page, .grid, .run, .stack, .modules, .fields, .measure.

components

Class	Is
`.masthead`, `.nav`, `.subnav`, `.menu`, `.menu--current`, `.skip-link`	Navigation
`.page-head`, `.sections`, `.footer`	Page furniture
`.button`, `.button--primary`, `.button--quiet`, `.button--danger`	Buttons
`.form`, `.form--inline`, `.form--dense`, `.field`, `.field--inline`, `.field--invalid`, `.choice`, `.errors`	Forms
`.filters`, `.filter`	Filter bars
`.cards`, `.card`	Cards
`.table`, `.numeric`	Tables
`.pairs`, `.pairs--stacked`	Definition pairs
`.figure`, `.figure--cover`, `.figure--modular`	Figures
`.pagination`	Pagination
`.md`, `.measure`, `.copy`, `.explain`, `.link-quiet`, `.empty`	Prose and states
`.css`, `.components`, `.visually-hidden`, `.no-metric-overrides`, `.rule--heavy`	Utilities

helpers

Helper	Does
`its_swiss_form_with`	The form builder
`its_swiss_stylesheet_tags`	The seven stylesheets, in layer order
`its_swiss_page_numbers`	Page numbers for pagination
`its_swiss_application_name`	The application's name
`its_swiss_face`, `its_swiss_typeface`	The typeface slots
`page_head`, `page_sections`	Page head and section destinations
`nav_link_to`, `nav_menu`	Navigation
`search_form`, `filter_register`	Filter bars
`copy_button`	A value that copies itself
`explain`	An explanatory note

Partials: its_swiss/shared/masthead, flash, errors, pagination.

form builder

its_swiss_form_with adds field, select, collection_select, check_box, radio_button, text_area and submit, each rendering its own label, hint and error, wired with aria-describedby.

JavaScript

Three Stimulus controllers, registered by the module the shell imports. The host adds nothing to its importmap.

Controller	Does
`its-swiss-clipboard`	A value that copies itself
`its-swiss-live-search`	Search on an index
`its-swiss-mono`	Monospace metric handling

the cascade

Every file states its own layer, and the order is declared before the first import:

@layer its-swiss.tokens, its-swiss.faces, its-swiss.reset, its-swiss.type,
       its-swiss.grid, its-swiss.components, its-swiss.transitions;

Everything is inside @layer, so any application rule wins without effort. A stylesheet the application adds after the library takes its place in the order from where its layer is first named.

its-swiss.css is the whole library in one <link>; the Rails helper writes the seven separately. Both resolve identically.

tech

Rails engine, v1.1.0. Ruby >= 3.2. 1,457 lines of CSS in seven files. No build step and no CSS framework.

bundle exec rake test

150 runs. 30 of them drive a real browser through Capybara and Selenium, and need a Chrome matching the installed ChromeDriver. The specimen is measured in Chromium, WebKit and Firefox before it is published.

license

MIT.