From 1e9af8690d9a7bf15d30ddfd6d2720829819d9e1 Mon Sep 17 00:00:00 2001 From: Geoffrey Eisenbarth Date: Sat, 4 Apr 2026 13:38:00 -0500 Subject: [PATCH 01/11] Remove theme utilites, closes #151 --- MIGRATION.md | 9 +++++++++ src/main.css | 1 + src/variables.css | 7 ------- www/_includes/layout.vto | 1 + www/docs/80-utils.md | 27 +++++++++++++-------------- 5 files changed, 24 insertions(+), 21 deletions(-) create mode 100644 MIGRATION.md diff --git a/MIGRATION.md b/MIGRATION.md new file mode 100644 index 0000000..b34487a --- /dev/null +++ b/MIGRATION.md @@ -0,0 +1,9 @@ +# Migration guide + + +The migration guide is a work in progress. + + +## Removed classes +- `.-dark-theme`: Set `html { color-sheme: dark; }` instead. +- `.-no-light-theme`: Set `html { color-sheme: light; }` instead. diff --git a/src/main.css b/src/main.css index ae9227e..6f5e604 100644 --- a/src/main.css +++ b/src/main.css @@ -8,6 +8,7 @@ html { font-family: var(--main-font); line-height: var(--rhythm, 1.4rem); + color-scheme: light dark; background: var(--bg); color: var(--fg); diff --git a/src/variables.css b/src/variables.css index caf72e8..ad18efa 100644 --- a/src/variables.css +++ b/src/variables.css @@ -103,13 +103,6 @@ ); } -:root:not(:has(meta[name=color-scheme])) { - /* Deprecated classes */ - &.-dark-theme { color-scheme: dark } - &.-no-dark-theme { color-scheme: light } - &:not(.-dark-theme, .-no-dark-theme) { color-scheme: light dark } -} - * { --gap: calc(var(--rhythm, 1rlh) * var(--density)); } diff --git a/www/_includes/layout.vto b/www/_includes/layout.vto index cb3c6cb..384cce0 100644 --- a/www/_includes/layout.vto +++ b/www/_includes/layout.vto @@ -3,6 +3,7 @@ + missing.css diff --git a/www/docs/80-utils.md b/www/docs/80-utils.md index c7a2b21..8f4c2d4 100644 --- a/www/docs/80-utils.md +++ b/www/docs/80-utils.md @@ -265,23 +265,20 @@ The `.big` class will be removed in version 2.0. ## Theme selection By default, missing.css applies a light or dark theme based on the visitor's OS settings. -To force the theme independently of `@prefers-color-scheme`{.language-css} you can use the following: +To force the theme, you can set `color-scheme: light`{.language-css} or `color-scheme: dark`{.language-css} on the `html` element. -~~Add the `.-dark-theme` class to your root element to use the dark theme.~~ -**Deprecated:**{.bad .color} Will be removed in version 2.0. -Use ``{.language-html} instead. - -~~Add the `.-no-dark-theme` class to your root element to use the light theme.~~ -**Deprecated:**{.bad .color} Will be removed in version 2.0. -Use ``{.language-html} instead. +It is recommended that you include a ``{.language-html} tag in the ``{.language-html} of your document. +This allows the browser to render form controls and other native elements in the appropriate colors before the CSS is loaded.
Example: Theme toggle markup
~~~ css - :root:has([name=theme][value=light]:checked) { color-scheme: light } - :root:has([name=theme][value=dark]:checked) { color-scheme: dark } - :root:has([name=theme][value=auto]:checked) { color-scheme: light dark } + html { + &:has([name=theme][value=light]:checked) { color-scheme: light } + &:has([name=theme][value=dark]:checked) { color-scheme: dark } + &:has([name=theme][value=auto]:checked) { color-scheme: light dark } + } ~~~ ~~~ html @@ -298,9 +295,11 @@ Use ``{.language-html} instead.
Select theme From bc68ec142a14b9aa8fb490df1c06d2e58dec6337 Mon Sep 17 00:00:00 2001 From: Geoffrey Eisenbarth Date: Sat, 4 Apr 2026 13:51:49 -0500 Subject: [PATCH 02/11] Rename flex utils, closes #95 --- MIGRATION.md | 8 ++++++++ src/flex.css | 9 ++++----- src/utils.css | 5 +++-- www/docs/90-flex.md | 3 --- 4 files changed, 15 insertions(+), 10 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index b34487a..3bcdeeb 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -7,3 +7,11 @@ The migration guide is a work in progress. ## Removed classes - `.-dark-theme`: Set `html { color-sheme: dark; }` instead. - `.-no-light-theme`: Set `html { color-sheme: light; }` instead. + +## Renamed classes +- `.f-row` -> `.flex-row` +- `.f-col` -> `.flex-col` +- `.f-switch` -> `.flex-switch` + +## Rename variables +- `--f-switch-threshold` -> `--flex-switch-threshold` diff --git a/src/flex.css b/src/flex.css index 1386763..514ff58 100644 --- a/src/flex.css +++ b/src/flex.css @@ -1,24 +1,23 @@ -.flex-row, .f-row { +.flex-row { display: flex; flex-direction: row; gap: var(--gap); & > * { margin: 0 } } -.flex-column, .f-col { +.flex-column { display: flex; flex-direction: column; gap: var(--gap); & > * { margin: 0 } } -.flex-switch, .f-switch { +.flex-switch { display: flex; flex-wrap: wrap; gap: var(--gap); - --f-switch-threshold: 55ch; /* Deprecated name */ - --flex-switch-threshold: var(--f-switch-threshold); + --flex-switch-threshold: 55ch; & > * { margin: 0; diff --git a/src/utils.css b/src/utils.css index 8b3c580..43fc044 100644 --- a/src/utils.css +++ b/src/utils.css @@ -107,8 +107,9 @@ display: block; & :is( - .f-row, .flex-row, .f-col, - .flex-column, .f-switch, .flex-switch, + .flex-row, + .flex-column, + .flex-switch, .grid ) > * { margin: revert; } } diff --git a/www/docs/90-flex.md b/www/docs/90-flex.md index c7583ef..c1083a5 100644 --- a/www/docs/90-flex.md +++ b/www/docs/90-flex.md @@ -22,9 +22,6 @@ Pair this with `.flex-wrap:wrap-reverse` to reverse the order when displayed as All of `.flex-row`, `.flex-column` and `.flex-switch` will remove margins from their children, and have a [gap] set to `--gap`. -**Deprecated:**{.bad .color} The original names for these classes, `.f-row`, `.f-col`, and `.f-switch` (as well as `--f-switch-threshold`), have been deprecated in favor of the more intuitive names given above. -The original names will be removed in version 2.0. - [gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/gap From 4590c2d033d53af196fd46de2cc1e416eaced1a4 Mon Sep 17 00:00:00 2001 From: Geoffrey Eisenbarth Date: Sat, 4 Apr 2026 13:53:49 -0500 Subject: [PATCH 03/11] Remove .primary font, closes #90 --- MIGRATION.md | 1 + src/utils.css | 2 +- www/docs/80-utils.md | 4 ---- 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 3bcdeeb..b8a5775 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -12,6 +12,7 @@ The migration guide is a work in progress. - `.f-row` -> `.flex-row` - `.f-col` -> `.flex-col` - `.f-switch` -> `.flex-switch` +- `.primary-font` -> `.main-font` ## Rename variables - `--f-switch-threshold` -> `--flex-switch-threshold` diff --git a/src/utils.css b/src/utils.css index 43fc044..1332fc4 100644 --- a/src/utils.css +++ b/src/utils.css @@ -46,7 +46,7 @@ } -.main-font, .primary-font { font-family: var(--main-font) } +.main-font { font-family: var(--main-font) } .secondary-font { font-family: var(--secondary-font) } .display-font { font-family: var(--display-font) } .mono-font, .monospace { font-family: var(--mono-font) } diff --git a/www/docs/80-utils.md b/www/docs/80-utils.md index 8f4c2d4..0eb1e4f 100644 --- a/www/docs/80-utils.md +++ b/www/docs/80-utils.md @@ -114,10 +114,6 @@ You can set `--density` yourself in inline styles or your own CSS: `.main-font` : Renders the text in the main font (`--main-font`). -~~`.primary-font`~~ -: **Deprecated:**{.bad .color} Will be removed in version 2.0. - Use `.main-font` instead. - `.secondary-font` : Renders the text in the secondary font (`--secondary-font`). From 8a8aee12a97f478048a7ed5faab324901ed35fe6 Mon Sep 17 00:00:00 2001 From: Geoffrey Eisenbarth Date: Sat, 4 Apr 2026 13:57:37 -0500 Subject: [PATCH 04/11] Remove .all:initial, closes #88 --- MIGRATION.md | 1 + src/utils.css | 4 ---- www/docs/80-utils.md | 7 ------- 3 files changed, 1 insertion(+), 11 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index b8a5775..cdbca1b 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -7,6 +7,7 @@ The migration guide is a work in progress. ## Removed classes - `.-dark-theme`: Set `html { color-sheme: dark; }` instead. - `.-no-light-theme`: Set `html { color-sheme: light; }` instead. +- `.all:initial` ## Renamed classes - `.f-row` -> `.flex-row` diff --git a/src/utils.css b/src/utils.css index 1332fc4..50db577 100644 --- a/src/utils.css +++ b/src/utils.css @@ -28,10 +28,6 @@ white-space: nowrap; } -.all\:initial { - all: initial; -} - .bold { font-weight: bold } .italic { font-style: italic; diff --git a/www/docs/80-utils.md b/www/docs/80-utils.md index 0eb1e4f..18c823e 100644 --- a/www/docs/80-utils.md +++ b/www/docs/80-utils.md @@ -319,13 +319,6 @@ Until browser support for detecting vertical writing modes has improved, [progress bars]: /docs/forms/#progress-bars -## Reset - -~~Use the `.all:initial` class to reset all CSS properties on an -element and return it to its browser-default styles.~~ -**Deprecated:**{.bad .color} Will be removed in version 2.0. - - ## Print The following utilities can be used to fine-tune the display of your webpage when it is being printed. From b532a344bcd71eb535cd1f51581c26d0cec572dc Mon Sep 17 00:00:00 2001 From: Geoffrey Eisenbarth Date: Sat, 4 Apr 2026 14:18:52 -0500 Subject: [PATCH 05/11] Remove --rhythm, closes #83 --- MIGRATION.md | 4 +++ src/aria.css | 4 +-- src/components.css | 20 ++++++------- src/layout.css | 4 +-- src/main.css | 64 ++++++++++++++++++++-------------------- src/utils.css | 2 +- src/variables.css | 3 +- www/docs/60-variables.md | 4 --- 8 files changed, 52 insertions(+), 53 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index cdbca1b..6989721 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -15,5 +15,9 @@ The migration guide is a work in progress. - `.f-switch` -> `.flex-switch` - `.primary-font` -> `.main-font` +## Removed variables +- `--rhythm`: Set a value for the `line-height`{.token .attr-name} property on the `html` element instead. + + ## Rename variables - `--f-switch-threshold` -> `--flex-switch-threshold` diff --git a/src/aria.css b/src/aria.css index b75532a..151835b 100644 --- a/src/aria.css +++ b/src/aria.css @@ -18,7 +18,7 @@ &:is(button) { /* button-specific resets */ font-size: 1em; - line-height: var(--rhythm, 1.4rem); + line-height: 1rlh; box-shadow: none; &:is(:hover, :focus-visible, :active, :disabled) { filter: none; @@ -220,7 +220,7 @@ input[type=checkbox][role=switch] { margin-block-end: auto; } &:not(label > *) { - padding-block: calc(var(--gap) / 4 + (var(--rhythm, 1rlh) - 1em) / 2); + padding-block: calc(var(--gap) / 4 + (1rlh - 1em) / 2); } label:has(> &) { diff --git a/src/components.css b/src/components.css index b5827b2..87267b9 100644 --- a/src/components.css +++ b/src/components.css @@ -107,7 +107,7 @@ details, --full-width: calc(100vi - var(--sidebar-width)); --eff-line-length: min( - calc(var(--full-width) - (2 * var(--rhythm, 1rlh))), + calc(var(--full-width) - 2rlh), var(--line-length) ); padding-block-start: var(--gap); @@ -131,7 +131,7 @@ details, --full-width: calc(100vi - var(--sidebar-width)); --eff-line-length: min( - calc(var(--full-width) - (2 * var(--rhythm, 1rlh))), + calc(var(--full-width) - 2rlh), var(--line-length) ); padding-block-start: var(--gap); @@ -174,12 +174,12 @@ details, font-family: var(--secondary-font); border: var(--chip-border-width) var(--chip-border-style) var(--accent); background: var(--box-bg); - border-radius: calc(var(--rhythm, 1rlh) / 2); - padding-inline: calc(var(--rhythm, 1rlh) / 2); + border-radius: 0.5rlh; + padding-inline: 0.5rlh; } .navbar { - padding: var(--rhythm, 1rlh); + padding: 1rlh; font-family: var(--secondary-font); @@ -223,7 +223,7 @@ details, & nav ul[role=list] { display: flex; flex-flow: row; - gap: var(--rhythm, 1rlh); + gap: 1rlh; padding-inline-start: 0; & * { flex-shrink: 0 } @@ -277,7 +277,7 @@ details, color: currentcolor; padding: 0; box-shadow: none; - line-height: var(--rhythm, 1rlh); + line-height: 1rlh; font-size: var(--wcag-target-size-aa); inline-size: var(--wcag-target-size-aa); block-size: var(--wcag-target-size-aa); @@ -325,9 +325,9 @@ aside[role=note] { 0px, calc( 0px - min( - var(--gutter-width) - var(--rhythm, 1rlh), - var(--sidenote-width) + var(--rhythm, 1rlh) - ) + var(--rhythm, 1rlh) - 1ch + var(--gutter-width) - 1rlh, + var(--sidenote-width) + 1rlh + ) + 1rlh - 1ch ) ); --density: 0.5; diff --git a/src/layout.css b/src/layout.css index edf3f00..9297652 100644 --- a/src/layout.css +++ b/src/layout.css @@ -47,7 +47,7 @@ .big, .\ { font-size: 1.4em; - line-height: calc(1.5 * var(--rhythm, 1rlh)); + line-height: 1.5rlh; } /*** @@ -57,7 +57,7 @@ .container { --eff-line-length: min( - calc(var(--full-width) - (2 * var(--rhythm, 1rlh))), + calc(var(--full-width) - 2rlh), var(--line-length) ); diff --git a/src/main.css b/src/main.css index 6f5e604..420475f 100644 --- a/src/main.css +++ b/src/main.css @@ -6,7 +6,7 @@ html { font-family: var(--main-font); - line-height: var(--rhythm, 1.4rem); + line-height: 1.4rem; color-scheme: light dark; background: var(--bg); @@ -46,8 +46,8 @@ nav { aside { font-size: .8em; - line-height: calc(var(--rhythm, 1rlh) * 2 / 3); - --gap: calc(var(--rhythm, 1rlh) * var(--density) * 2 / 3); + line-height: 0.66rlh; + --gap: calc(0.66rlh * var(--density)) border-block-start: var(--border-block-start-width) var(--border-block-start-style) var(--graphical-fg); border-block-end: var(--border-block-end-width) var(--border-block-end-style) var(--graphical-fg); @@ -76,7 +76,7 @@ aside { border-inline-start: var(--border-inline-start-width) var(--border-inline-start-style) var(--muted-fg); border-radius: 0; padding: 0; - padding-inline-start: var(--rhythm, 1rlh); + padding-inline-start: 1rlh; font-style: italic; color: var(--accent); } @@ -93,26 +93,26 @@ h1, h2, h3, h4, h5, h6, h1, .\ { font-size: 2em; text-transform: none; - line-height: calc(2 * var(--rhythm, 1rlh)); + line-height: 2rlh; letter-spacing: 0; } h2, .\ { font-size: 1.6em; text-transform: none; - line-height: calc(1.5 * var(--rhythm, 1rlh)); + line-height: 1.5rlh; letter-spacing: 0; } h3, .\ { font-size: 1.17em; - line-height: calc(1 * var(--rhythm, 1rlh)); + line-height: 1rlh; } h4, .\, h5, .\, h6, .\ { font-size: 1em; text-transform: none; - line-height: calc(1 * var(--rhythm, 1rlh)); + line-height: 1rlh; letter-spacing: 0; margin-block-start: var(--gap); } @@ -157,7 +157,7 @@ header { footer { font-family: var(--secondary-font); font-size: .8em; - line-height: calc(var(--rhythm, 1rlh) * 2 / 3); + line-height: 0.66rlh; border-block-start: var(--border-block-start-width) var(--border-block-start-style) var(--graphical-fg); } @@ -166,10 +166,10 @@ body > footer, main + footer { --eff-line-length: min( - calc(var(--full-width) - (2 * var(--rhythm, 1rlh))), + calc(var(--full-width) - 2rlh)), var(--line-length) ); - padding-block: var(--rhythm, 1rlh); + padding-block: 1rlh; padding-inline: calc((var(--full-width) - var(--eff-line-length)) / 2); } @@ -202,7 +202,7 @@ hr { pre { font-family: var(--mono-font); font-size: .9em; - line-height: var(--rhythm, 1rlh); + line-height: 1rlh; tab-size: 2; margin-block: var(--gap); @@ -217,7 +217,7 @@ blockquote { margin-block: var(--gap); font-size: 1.1em; - line-height: var(--rhythm, 1rlh); + line-height: 1rlh; font-style: italic; border-inline-start: var(--border-inline-start-width) var(--border-inline-start-style) var(--graphical-fg); @@ -233,7 +233,7 @@ blockquote { } ul, ol { - padding-inline-start: var(--rhythm, 1rlh); + padding-inline-start: 1rlh; margin-block: var(--gap); & & { @@ -261,7 +261,7 @@ dt { } dd { - margin-inline-start: var(--rhythm, 1rlh); + margin-inline-start: 1rlh; } @supports selector(li::marker) { @@ -286,7 +286,7 @@ figcaption { main { --eff-line-length: min( - calc(var(--full-width) - (2 * var(--rhythm, 1rlh))), + calc(var(--full-width) - 2rlh), var(--line-length) ); max-inline-size: var(--eff-line-length); @@ -329,7 +329,7 @@ a, .\ { small, .\ { font-size: .8em; - line-height: calc(var(--rhythm, 1rlh) * 2 / 3); + line-height: 0.66rlh; } s { @@ -463,7 +463,7 @@ td, th { vertical-align: top; &:not(:last-child) { - padding-inline-end: var(--rhythm, 1rlh); + padding-inline-end: 1rlh; } } @@ -496,14 +496,14 @@ label :is(input, select):not([specificity-hack]) { display: inline-flex; align-items: center; padding-block: 0; - padding-inline: calc(var(--rhythm, 1rlh) / 4); + padding-inline: 0.25rlh; vertical-align: middle; box-sizing: border-box; font-size: .8rem; line-height: 1.125em; font-family: var(--secondary-font); - min-block-size: var(--rhythm, 1rlh); + min-block-size: 1rlh; background: var(--interactive-bg); color: var(--fg); @@ -562,10 +562,10 @@ label :is(input, select):not([specificity-hack]) { } &:is(.big, .\) { - min-block-size: calc(1.5 * var(--rhythm, 1rlh)); + min-block-size: 1.5rlh; font-size: 1rem; - padding-inline: calc(.5 * var(--rhythm, 1rlh)); - line-height: var(--rhythm, 1rlh); + padding-inline: 0.5rlh; + line-height: 1rlh; } } a.\:not([specificity-hack]) { @@ -629,14 +629,14 @@ input::file-selector-button { display: inline-flex; align-items: center; padding-block: 0; - padding-inline: calc(var(--rhythm, 1rlh) / 4); + padding-inline: 0.25rlh; vertical-align: middle; box-sizing: border-box; font-size: .8rem; line-height: 1.125em; font-family: var(--secondary-font); - min-block-size: var(--rhythm, 1rlh); + min-block-size: 1rlh; background: var(--interactive-bg); color: var(--fg); @@ -662,10 +662,10 @@ input:disabled::file-selector-button { box-shadow: var(--shadow-disabled); } input:is(.big, .\)::file-selector-button { - min-block-size: calc(1.5 * var(--rhythm, 1rlh)); + min-block-size: 1.5rlh; font-size: 1rem; - padding-inline: calc(.5 * var(--rhythm, 1rlh)); - line-height: var(--rhythm, 1rlh); + padding-inline: 0.5rlh; + line-height: 1rlh; } strong > input::file-selector-button { background: var(--accent); @@ -699,7 +699,7 @@ input[type=datetime-local], input[type=number], select, textarea { - padding: calc(var(--rhythm, 1rlh) / 4); + padding: 0.25rlh; vertical-align: top; font-size: 1rem; @@ -734,7 +734,7 @@ input[type=range] { input[type=color] { padding: 0; margin: 0; - block-size: calc(1.5 * var(--rhythm, 1rlh)); + block-size: 1.5rlh; border: none; background: none; @@ -744,7 +744,7 @@ input[type=file] { padding-block: calc(var(--gap) / 4); padding-inline: 0; font: inherit; - line-height: calc(var(--rhythm, 1rlh) / 2); + line-height: 0.5rlh; &::file-selector-button { margin-block: .1em 0; margin-inline-end: 1ch; @@ -782,7 +782,7 @@ select { --hover-color: color-mix(currentColor 10%, transparent); --checked-color: color-mix(var(--graphical-fg) 50%, var(--box-bg)); --active-color: color-mix(var(--graphical-fg) 75%, var(--box-bg)); - --padding: calc(var(--rhythm, 1rlh) / 4); + --padding: 0.25rlh; --indented: 1em; &[multiple], diff --git a/src/utils.css b/src/utils.css index 50db577..9eaf73e 100644 --- a/src/utils.css +++ b/src/utils.css @@ -50,7 +50,7 @@ .massivetext { --eff-line-length: min( - calc(var(--full-width) - (2 * var(--rhythm, 1rlh))), + calc(var(--full-width) - 2rlh), var(--line-length) ); font-size: calc(.13 * var(--eff-line-length)); diff --git a/src/variables.css b/src/variables.css index ad18efa..8339a96 100644 --- a/src/variables.css +++ b/src/variables.css @@ -34,7 +34,6 @@ --muted-accent: light-dark(var(--blue-7), var(--blue-5)); /* Muted accent color. Will not be used for text. */ /* Lengths */ - --rhythm: 1.4rem; /* Deprecated, but must provide in case people use it in calc() */ --line-length: 40rem; /* Maximum line length for prose. */ --input-inline-size: 20ch; /* Default size for text inputs and selects. */ @@ -104,5 +103,5 @@ } * { - --gap: calc(var(--rhythm, 1rlh) * var(--density)); + --gap: calc(1rlh * var(--density)); } diff --git a/www/docs/60-variables.md b/www/docs/60-variables.md index a5796f8..aaf3bcc 100644 --- a/www/docs/60-variables.md +++ b/www/docs/60-variables.md @@ -109,10 +109,6 @@ these are grouped together at the bottom, in addition to being mentioned in the ## Lengths -~~`--rhythm`~~ {#var-rhythm} -: ~~Vertical rhythm, line height.~~ **Deprecated:**{.bad .color} Will be removed in version 2.0. - Set a value for the `line-height`{.token .attr-name} property on the `html` element instead. - `--line-length` {#var-line-length} : Maximum line length for prose. From 65e369b10afece2e3ffc7f0ef370db7a501c0462 Mon Sep 17 00:00:00 2001 From: Geoffrey Eisenbarth Date: Sat, 4 Apr 2026 14:28:41 -0500 Subject: [PATCH 06/11] Remove grid system, closes #99 --- MIGRATION.md | 3 + src/grid.css | 122 --------------------------------------- src/main.css | 4 +- src/missing.css | 1 - src/utils.css | 4 +- www/demos/grid.html | 10 ---- www/docs/60-variables.md | 8 --- www/docs/A0-grid.md | 57 ------------------ 8 files changed, 7 insertions(+), 202 deletions(-) delete mode 100644 src/grid.css delete mode 100644 www/demos/grid.html delete mode 100644 www/docs/A0-grid.md diff --git a/MIGRATION.md b/MIGRATION.md index 6989721..e3b97c7 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -8,6 +8,7 @@ The migration guide is a work in progress. - `.-dark-theme`: Set `html { color-sheme: dark; }` instead. - `.-no-light-theme`: Set `html { color-sheme: light; }` instead. - `.all:initial` +- `.grid`: Use new helper, **TODO** ## Renamed classes - `.f-row` -> `.flex-row` @@ -17,6 +18,8 @@ The migration guide is a work in progress. ## Removed variables - `--rhythm`: Set a value for the `line-height`{.token .attr-name} property on the `html` element instead. +- `--grid-row-width`: +- `--grid-col-width`: ## Rename variables diff --git a/src/grid.css b/src/grid.css deleted file mode 100644 index 6cd9abf..0000000 --- a/src/grid.css +++ /dev/null @@ -1,122 +0,0 @@ - -.grid { - display: grid; - grid-auto-columns: var(--grid-col-width, 1fr); - grid-auto-rows: var(--grid-row-width, auto); - gap: var(--gap); - - & > * { margin: 0 } -} - -.grid-even-rows { --grid-row-width: 1fr; } -.grid-variable-cols { --grid-col-width: auto; } - -[data-cols^="1 " ] { grid-column-start: 1 } [data-cols$=" 1" ] { grid-column-end: 2 } [data-cols="1" ] { grid-column: 1 } -[data-cols^="2 " ] { grid-column-start: 2 } [data-cols$=" 2" ] { grid-column-end: 3 } [data-cols="2" ] { grid-column: 2 } -[data-cols^="3 " ] { grid-column-start: 3 } [data-cols$=" 3" ] { grid-column-end: 4 } [data-cols="3" ] { grid-column: 3 } -[data-cols^="4 " ] { grid-column-start: 4 } [data-cols$=" 4" ] { grid-column-end: 5 } [data-cols="4" ] { grid-column: 4 } -[data-cols^="5 " ] { grid-column-start: 5 } [data-cols$=" 5" ] { grid-column-end: 6 } [data-cols="5" ] { grid-column: 5 } -[data-cols^="6 " ] { grid-column-start: 6 } [data-cols$=" 6" ] { grid-column-end: 7 } [data-cols="6" ] { grid-column: 6 } -[data-cols^="7 " ] { grid-column-start: 7 } [data-cols$=" 7" ] { grid-column-end: 8 } [data-cols="7" ] { grid-column: 7 } -[data-cols^="8 " ] { grid-column-start: 8 } [data-cols$=" 8" ] { grid-column-end: 9 } [data-cols="8" ] { grid-column: 8 } -[data-cols^="9 " ] { grid-column-start: 9 } [data-cols$=" 9" ] { grid-column-end: 10 } [data-cols="9" ] { grid-column: 9 } -[data-cols^="10 "] { grid-column-start: 10 } [data-cols$=" 10"] { grid-column-end: 11 } [data-cols="10"] { grid-column: 10 } -[data-cols^="11 "] { grid-column-start: 11 } [data-cols$=" 11"] { grid-column-end: 12 } [data-cols="11"] { grid-column: 11 } -[data-cols^="12 "] { grid-column-start: 12 } [data-cols$=" 12"] { grid-column-end: 13 } [data-cols="12"] { grid-column: 12 } - -[data-rows^="1 " ] { grid-row-start: 1 } [data-rows$=" 1" ] { grid-row-end: 2 } [data-rows="1" ] { grid-row: 1 } -[data-rows^="2 " ] { grid-row-start: 2 } [data-rows$=" 2" ] { grid-row-end: 3 } [data-rows="2" ] { grid-row: 2 } -[data-rows^="3 " ] { grid-row-start: 3 } [data-rows$=" 3" ] { grid-row-end: 4 } [data-rows="3" ] { grid-row: 3 } -[data-rows^="4 " ] { grid-row-start: 4 } [data-rows$=" 4" ] { grid-row-end: 5 } [data-rows="4" ] { grid-row: 4 } -[data-rows^="5 " ] { grid-row-start: 5 } [data-rows$=" 5" ] { grid-row-end: 6 } [data-rows="5" ] { grid-row: 5 } -[data-rows^="6 " ] { grid-row-start: 6 } [data-rows$=" 6" ] { grid-row-end: 7 } [data-rows="6" ] { grid-row: 6 } -[data-rows^="7 " ] { grid-row-start: 7 } [data-rows$=" 7" ] { grid-row-end: 8 } [data-rows="7" ] { grid-row: 7 } -[data-rows^="8 " ] { grid-row-start: 8 } [data-rows$=" 8" ] { grid-row-end: 9 } [data-rows="8" ] { grid-row: 8 } -[data-rows^="9 " ] { grid-row-start: 9 } [data-rows$=" 9" ] { grid-row-end: 10 } [data-rows="9" ] { grid-row: 9 } -[data-rows^="10 "] { grid-row-start: 10 } [data-rows$=" 10"] { grid-row-end: 11 } [data-rows="10"] { grid-row: 10 } -[data-rows^="11 "] { grid-row-start: 11 } [data-rows$=" 11"] { grid-row-end: 12 } [data-rows="11"] { grid-row: 11 } -[data-rows^="12 "] { grid-row-start: 12 } [data-rows$=" 12"] { grid-row-end: 13 } [data-rows="12"] { grid-row: 12 } - -@media (max-width: 768px) { - [data-cols\@s^="1 " ] { grid-column-start: 1 } [data-cols\@s$=" 1" ] { grid-column-end: 2 } [data-cols\@s="1" ] { grid-column: 1 } - [data-cols\@s^="2 " ] { grid-column-start: 2 } [data-cols\@s$=" 2" ] { grid-column-end: 3 } [data-cols\@s="2" ] { grid-column: 2 } - [data-cols\@s^="3 " ] { grid-column-start: 3 } [data-cols\@s$=" 3" ] { grid-column-end: 4 } [data-cols\@s="3" ] { grid-column: 3 } - [data-cols\@s^="4 " ] { grid-column-start: 4 } [data-cols\@s$=" 4" ] { grid-column-end: 5 } [data-cols\@s="4" ] { grid-column: 4 } - [data-cols\@s^="5 " ] { grid-column-start: 5 } [data-cols\@s$=" 5" ] { grid-column-end: 6 } [data-cols\@s="5" ] { grid-column: 5 } - [data-cols\@s^="6 " ] { grid-column-start: 6 } [data-cols\@s$=" 6" ] { grid-column-end: 7 } [data-cols\@s="6" ] { grid-column: 6 } - [data-cols\@s^="7 " ] { grid-column-start: 7 } [data-cols\@s$=" 7" ] { grid-column-end: 8 } [data-cols\@s="7" ] { grid-column: 7 } - [data-cols\@s^="8 " ] { grid-column-start: 8 } [data-cols\@s$=" 8" ] { grid-column-end: 9 } [data-cols\@s="8" ] { grid-column: 8 } - [data-cols\@s^="9 " ] { grid-column-start: 9 } [data-cols\@s$=" 9" ] { grid-column-end: 10 } [data-cols\@s="9" ] { grid-column: 9 } - [data-cols\@s^="10 "] { grid-column-start: 10 } [data-cols\@s$=" 10"] { grid-column-end: 11 } [data-cols\@s="10"] { grid-column: 10 } - [data-cols\@s^="11 "] { grid-column-start: 11 } [data-cols\@s$=" 11"] { grid-column-end: 12 } [data-cols\@s="11"] { grid-column: 11 } - [data-cols\@s^="12 "] { grid-column-start: 12 } [data-cols\@s$=" 12"] { grid-column-end: 13 } [data-cols\@s="12"] { grid-column: 12 } - - [data-rows\@s^="1 " ] { grid-row-start: 1 } [data-rows\@s$=" 1" ] { grid-row-end: 2 } [data-rows\@s="1" ] { grid-row: 1 } - [data-rows\@s^="2 " ] { grid-row-start: 2 } [data-rows\@s$=" 2" ] { grid-row-end: 3 } [data-rows\@s="2" ] { grid-row: 2 } - [data-rows\@s^="3 " ] { grid-row-start: 3 } [data-rows\@s$=" 3" ] { grid-row-end: 4 } [data-rows\@s="3" ] { grid-row: 3 } - [data-rows\@s^="4 " ] { grid-row-start: 4 } [data-rows\@s$=" 4" ] { grid-row-end: 5 } [data-rows\@s="4" ] { grid-row: 4 } - [data-rows\@s^="5 " ] { grid-row-start: 5 } [data-rows\@s$=" 5" ] { grid-row-end: 6 } [data-rows\@s="5" ] { grid-row: 5 } - [data-rows\@s^="6 " ] { grid-row-start: 6 } [data-rows\@s$=" 6" ] { grid-row-end: 7 } [data-rows\@s="6" ] { grid-row: 6 } - [data-rows\@s^="7 " ] { grid-row-start: 7 } [data-rows\@s$=" 7" ] { grid-row-end: 8 } [data-rows\@s="7" ] { grid-row: 7 } - [data-rows\@s^="8 " ] { grid-row-start: 8 } [data-rows\@s$=" 8" ] { grid-row-end: 9 } [data-rows\@s="8" ] { grid-row: 8 } - [data-rows\@s^="9 " ] { grid-row-start: 9 } [data-rows\@s$=" 9" ] { grid-row-end: 10 } [data-rows\@s="9" ] { grid-row: 9 } - [data-rows\@s^="10 "] { grid-row-start: 10 } [data-rows\@s$=" 10"] { grid-row-end: 11 } [data-rows\@s="10"] { grid-row: 10 } - [data-rows\@s^="11 "] { grid-row-start: 11 } [data-rows\@s$=" 11"] { grid-row-end: 12 } [data-rows\@s="11"] { grid-row: 11 } - [data-rows\@s^="12 "] { grid-row-start: 12 } [data-rows\@s$=" 12"] { grid-row-end: 13 } [data-rows\@s="12"] { grid-row: 12 } -} - -@media (min-width: 1024px) { - [data-cols\@l^="1 " ] { grid-column-start: 1 } [data-cols\@l$=" 1" ] { grid-column-end: 2 } [data-cols\@l="1" ] { grid-column: 1 } - [data-cols\@l^="2 " ] { grid-column-start: 2 } [data-cols\@l$=" 2" ] { grid-column-end: 3 } [data-cols\@l="2" ] { grid-column: 2 } - [data-cols\@l^="3 " ] { grid-column-start: 3 } [data-cols\@l$=" 3" ] { grid-column-end: 4 } [data-cols\@l="3" ] { grid-column: 3 } - [data-cols\@l^="4 " ] { grid-column-start: 4 } [data-cols\@l$=" 4" ] { grid-column-end: 5 } [data-cols\@l="4" ] { grid-column: 4 } - [data-cols\@l^="5 " ] { grid-column-start: 5 } [data-cols\@l$=" 5" ] { grid-column-end: 6 } [data-cols\@l="5" ] { grid-column: 5 } - [data-cols\@l^="6 " ] { grid-column-start: 6 } [data-cols\@l$=" 6" ] { grid-column-end: 7 } [data-cols\@l="6" ] { grid-column: 6 } - [data-cols\@l^="7 " ] { grid-column-start: 7 } [data-cols\@l$=" 7" ] { grid-column-end: 8 } [data-cols\@l="7" ] { grid-column: 7 } - [data-cols\@l^="8 " ] { grid-column-start: 8 } [data-cols\@l$=" 8" ] { grid-column-end: 9 } [data-cols\@l="8" ] { grid-column: 8 } - [data-cols\@l^="9 " ] { grid-column-start: 9 } [data-cols\@l$=" 9" ] { grid-column-end: 10 } [data-cols\@l="9" ] { grid-column: 9 } - [data-cols\@l^="10 "] { grid-column-start: 10 } [data-cols\@l$=" 10"] { grid-column-end: 11 } [data-cols\@l="10"] { grid-column: 10 } - [data-cols\@l^="11 "] { grid-column-start: 11 } [data-cols\@l$=" 11"] { grid-column-end: 12 } [data-cols\@l="11"] { grid-column: 11 } - [data-cols\@l^="12 "] { grid-column-start: 12 } [data-cols\@l$=" 12"] { grid-column-end: 13 } [data-cols\@l="12"] { grid-column: 12 } - - [data-rows\@l^="1 " ] { grid-row-start: 1 } [data-rows\@l$=" 1" ] { grid-row-end: 2 } [data-rows\@l="1" ] { grid-row: 1 } - [data-rows\@l^="2 " ] { grid-row-start: 2 } [data-rows\@l$=" 2" ] { grid-row-end: 3 } [data-rows\@l="2" ] { grid-row: 2 } - [data-rows\@l^="3 " ] { grid-row-start: 3 } [data-rows\@l$=" 3" ] { grid-row-end: 4 } [data-rows\@l="3" ] { grid-row: 3 } - [data-rows\@l^="4 " ] { grid-row-start: 4 } [data-rows\@l$=" 4" ] { grid-row-end: 5 } [data-rows\@l="4" ] { grid-row: 4 } - [data-rows\@l^="5 " ] { grid-row-start: 5 } [data-rows\@l$=" 5" ] { grid-row-end: 6 } [data-rows\@l="5" ] { grid-row: 5 } - [data-rows\@l^="6 " ] { grid-row-start: 6 } [data-rows\@l$=" 6" ] { grid-row-end: 7 } [data-rows\@l="6" ] { grid-row: 6 } - [data-rows\@l^="7 " ] { grid-row-start: 7 } [data-rows\@l$=" 7" ] { grid-row-end: 8 } [data-rows\@l="7" ] { grid-row: 7 } - [data-rows\@l^="8 " ] { grid-row-start: 8 } [data-rows\@l$=" 8" ] { grid-row-end: 9 } [data-rows\@l="8" ] { grid-row: 8 } - [data-rows\@l^="9 " ] { grid-row-start: 9 } [data-rows\@l$=" 9" ] { grid-row-end: 10 } [data-rows\@l="9" ] { grid-row: 9 } - [data-rows\@l^="10 "] { grid-row-start: 10 } [data-rows\@l$=" 10"] { grid-row-end: 11 } [data-rows\@l="10"] { grid-row: 10 } - [data-rows\@l^="11 "] { grid-row-start: 11 } [data-rows\@l$=" 11"] { grid-row-end: 12 } [data-rows\@l="11"] { grid-row: 11 } - [data-rows\@l^="12 "] { grid-row-start: 12 } [data-rows\@l$=" 12"] { grid-row-end: 13 } [data-rows\@l="12"] { grid-row: 12 } -} - -@media print { - [data-cols\@p^="1 " ] { grid-column-start: 1 } [data-cols\@p$=" 1" ] { grid-column-end: 2 } [data-cols\@p="1" ] { grid-column: 1 } - [data-cols\@p^="2 " ] { grid-column-start: 2 } [data-cols\@p$=" 2" ] { grid-column-end: 3 } [data-cols\@p="2" ] { grid-column: 2 } - [data-cols\@p^="3 " ] { grid-column-start: 3 } [data-cols\@p$=" 3" ] { grid-column-end: 4 } [data-cols\@p="3" ] { grid-column: 3 } - [data-cols\@p^="4 " ] { grid-column-start: 4 } [data-cols\@p$=" 4" ] { grid-column-end: 5 } [data-cols\@p="4" ] { grid-column: 4 } - [data-cols\@p^="5 " ] { grid-column-start: 5 } [data-cols\@p$=" 5" ] { grid-column-end: 6 } [data-cols\@p="5" ] { grid-column: 5 } - [data-cols\@p^="6 " ] { grid-column-start: 6 } [data-cols\@p$=" 6" ] { grid-column-end: 7 } [data-cols\@p="6" ] { grid-column: 6 } - [data-cols\@p^="7 " ] { grid-column-start: 7 } [data-cols\@p$=" 7" ] { grid-column-end: 8 } [data-cols\@p="7" ] { grid-column: 7 } - [data-cols\@p^="8 " ] { grid-column-start: 8 } [data-cols\@p$=" 8" ] { grid-column-end: 9 } [data-cols\@p="8" ] { grid-column: 8 } - [data-cols\@p^="9 " ] { grid-column-start: 9 } [data-cols\@p$=" 9" ] { grid-column-end: 10 } [data-cols\@p="9" ] { grid-column: 9 } - [data-cols\@p^="10 "] { grid-column-start: 10 } [data-cols\@p$=" 10"] { grid-column-end: 11 } [data-cols\@p="10"] { grid-column: 10 } - [data-cols\@p^="11 "] { grid-column-start: 11 } [data-cols\@p$=" 11"] { grid-column-end: 12 } [data-cols\@p="11"] { grid-column: 11 } - [data-cols\@p^="12 "] { grid-column-start: 12 } [data-cols\@p$=" 12"] { grid-column-end: 13 } [data-cols\@p="12"] { grid-column: 12 } - - [data-rows\@p^="1 " ] { grid-row-start: 1 } [data-rows\@p$=" 1" ] { grid-row-end: 2 } [data-rows\@p="1" ] { grid-row: 1 } - [data-rows\@p^="2 " ] { grid-row-start: 2 } [data-rows\@p$=" 2" ] { grid-row-end: 3 } [data-rows\@p="2" ] { grid-row: 2 } - [data-rows\@p^="3 " ] { grid-row-start: 3 } [data-rows\@p$=" 3" ] { grid-row-end: 4 } [data-rows\@p="3" ] { grid-row: 3 } - [data-rows\@p^="4 " ] { grid-row-start: 4 } [data-rows\@p$=" 4" ] { grid-row-end: 5 } [data-rows\@p="4" ] { grid-row: 4 } - [data-rows\@p^="5 " ] { grid-row-start: 5 } [data-rows\@p$=" 5" ] { grid-row-end: 6 } [data-rows\@p="5" ] { grid-row: 5 } - [data-rows\@p^="6 " ] { grid-row-start: 6 } [data-rows\@p$=" 6" ] { grid-row-end: 7 } [data-rows\@p="6" ] { grid-row: 6 } - [data-rows\@p^="7 " ] { grid-row-start: 7 } [data-rows\@p$=" 7" ] { grid-row-end: 8 } [data-rows\@p="7" ] { grid-row: 7 } - [data-rows\@p^="8 " ] { grid-row-start: 8 } [data-rows\@p$=" 8" ] { grid-row-end: 9 } [data-rows\@p="8" ] { grid-row: 8 } - [data-rows\@p^="9 " ] { grid-row-start: 9 } [data-rows\@p$=" 9" ] { grid-row-end: 10 } [data-rows\@p="9" ] { grid-row: 9 } - [data-rows\@p^="10 "] { grid-row-start: 10 } [data-rows\@p$=" 10"] { grid-row-end: 11 } [data-rows\@p="10"] { grid-row: 10 } - [data-rows\@p^="11 "] { grid-row-start: 11 } [data-rows\@p$=" 11"] { grid-row-end: 12 } [data-rows\@p="11"] { grid-row: 11 } - [data-rows\@p^="12 "] { grid-row-start: 12 } [data-rows\@p$=" 12"] { grid-row-end: 13 } [data-rows\@p="12"] { grid-row: 12 } -} diff --git a/src/main.css b/src/main.css index 420475f..bbdb545 100644 --- a/src/main.css +++ b/src/main.css @@ -49,7 +49,7 @@ aside { line-height: 0.66rlh; --gap: calc(0.66rlh * var(--density)) - border-block-start: var(--border-block-start-width) var(--border-block-start-style) var(--graphical-fg); + border-block-start: var(--border-block-start-width) var(--border-block-start-style) var(--graphical-fg); border-block-end: var(--border-block-end-width) var(--border-block-end-style) var(--graphical-fg); padding-block: var(--gap); margin-block: calc(var(--gap) * 3 / 2); @@ -167,7 +167,7 @@ main + footer { --eff-line-length: min( calc(var(--full-width) - 2rlh)), - var(--line-length) + var(--line-length) ); padding-block: 1rlh; padding-inline: calc((var(--full-width) - var(--eff-line-length)) / 2); diff --git a/src/missing.css b/src/missing.css index 0b1d4ec..8bdbc51 100644 --- a/src/missing.css +++ b/src/missing.css @@ -10,4 +10,3 @@ @import url(layout.css); @import url(utils.css); @import url(flex.css); -@import url(grid.css); diff --git a/src/utils.css b/src/utils.css index 9eaf73e..9033401 100644 --- a/src/utils.css +++ b/src/utils.css @@ -102,11 +102,11 @@ .block\@print { display: block; + /* TODO: Do we need to add the new grid util here? */ & :is( .flex-row, .flex-column, - .flex-switch, - .grid + .flex-switch ) > * { margin: revert; } } diff --git a/www/demos/grid.html b/www/demos/grid.html deleted file mode 100644 index 6c82dc1..0000000 --- a/www/demos/grid.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -draft: true -title: Grid ---- - -
-
Sidebar
-
Main
-
Auxiliary
-
diff --git a/www/docs/60-variables.md b/www/docs/60-variables.md index aaf3bcc..9766a9b 100644 --- a/www/docs/60-variables.md +++ b/www/docs/60-variables.md @@ -261,14 +261,6 @@ these are grouped together at the bottom, in addition to being mentioned in the : Sets the width of the sidebar for the `.sidebar-layout` component. Default is `25ch`{.token .attr-value}. -`--grid-row-width` {#var-grid-row-width} -: Sets the width of a row in a `.grid`. - Default is `1fr`{.token .attr-value}. - -`--grid-col-width` {#var-grid-col-width} -: Sets the width of a column in a `.grid`. - Default is `1fr`{.token .attr-value}. - `--sidebar-width` {#var-sidebar-width} : Sets the width of the sidebar for the `.sidebar-layout` component. Default is `25ch`{.token .attr-value}. diff --git a/www/docs/A0-grid.md b/www/docs/A0-grid.md deleted file mode 100644 index c82ae43..0000000 --- a/www/docs/A0-grid.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Grid -url: ./grid/ ---- - -# Grid - -To create a CSS Grid-based layout in missing.css, use the `.grid` class. - -By default, the grid will have equal-width columns but uneven rows. -To override these, you have the `.grid-even-rows` and `.grid-variable-cols` classes. - -To specify the row and column an element should occupy, use the `data-cols`{.token .attr-name} and `data-rows`{.token .attr-name} attributes: - -`data-cols="1"` -: Element will take up first column, next available row - -`data-cols="1 3"` -: Element will take up columns 1 to 3 (both 1 and 3 included), next available row - -`data-cols="1 3" data-rows="2 3"` -: Element will take up a 3×2 space, with a 1 column gap above - -**Warning**: Our column specifications are based on _rows_, not _lines_. -This means `
`{.language-html} spans two columns, as opposed to `grid-column: 1 / 2;`{.language-css} which spans only one. -{.box .warn} - -We support columns up to 12. - -To change the layout based on viewport size, -add `@s` (small, ≤768px) or `@l` (large, ≥1024px) to the end of the attributes: - -`data-cols@s="1" data-cols="1 2" data-cols@l="1 3"` -: Element will take 1 column in small screens, 2 columns on medium screens and 3 on large screens. - -To change the layout for printing, add `@p` to the end of the attributes. - -
-
Example: Grid markup for even rows
- - ~~~ html -
-
Sidebar
-
Main
-
Aux
-
- ~~~ - -
- -
-
Sidebar
-
Main
-
Aux
-
- -
From c2dbdae4d31d06033a60e07cd4530e36143d31e9 Mon Sep 17 00:00:00 2001 From: Geoffrey Eisenbarth Date: Sat, 4 Apr 2026 14:39:44 -0500 Subject: [PATCH 07/11] Remove .big, closes #160 --- MIGRATION.md | 1 + src/components.css | 2 +- src/layout.css | 2 +- src/main.css | 6 +++--- www/docs/80-utils.md | 2 -- 5 files changed, 6 insertions(+), 7 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index e3b97c7..2669cdf 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -15,6 +15,7 @@ The migration guide is a work in progress. - `.f-col` -> `.flex-col` - `.f-switch` -> `.flex-switch` - `.primary-font` -> `.main-font` +- `.big` -> `.` ## Removed variables - `--rhythm`: Set a value for the `line-height`{.token .attr-name} property on the `html` element instead. diff --git a/src/components.css b/src/components.css index 87267b9..194cb77 100644 --- a/src/components.css +++ b/src/components.css @@ -306,7 +306,7 @@ details, color: var(--accent); } - &:is(.big, .\) { + &.\ { font-size: var(--wcag-target-size-aaa); inline-size: var(--wcag-target-size-aaa); block-size: var(--wcag-target-size-aaa); diff --git a/src/layout.css b/src/layout.css index 9297652..51958f7 100644 --- a/src/layout.css +++ b/src/layout.css @@ -45,7 +45,7 @@ .align-content\:center { align-content: center } .align-content\:end { align-content: end } -.big, .\ { +.\ { font-size: 1.4em; line-height: 1.5rlh; } diff --git a/src/main.css b/src/main.css index bbdb545..5e2f092 100644 --- a/src/main.css +++ b/src/main.css @@ -69,7 +69,7 @@ aside { letter-spacing: normal; } - &:is(.big, .\) { + &.\ { /* Pull quote */ background: none; border: none; @@ -561,7 +561,7 @@ label :is(input, select):not([specificity-hack]) { box-shadow: var(--shadow-disabled); } - &:is(.big, .\) { + &.\ { min-block-size: 1.5rlh; font-size: 1rem; padding-inline: 0.5rlh; @@ -661,7 +661,7 @@ input:disabled::file-selector-button { --fg: var(--muted-fg); box-shadow: var(--shadow-disabled); } -input:is(.big, .\)::file-selector-button { +input.\::file-selector-button { min-block-size: 1.5rlh; font-size: 1rem; padding-inline: 0.5rlh; diff --git a/www/docs/80-utils.md b/www/docs/80-utils.md index 18c823e..6d1cc9d 100644 --- a/www/docs/80-utils.md +++ b/www/docs/80-utils.md @@ -219,8 +219,6 @@ The following classes can be used to make one element look like another: To get a smaller font size, use the `.` masquerade. The `.` class makes things bigger, with special treatment for some elements. -**Deprecated:**{.bad .color} We have converted our `.big` class to a masquerade in honor of W3C deprecating the ``{.language-html} HTML tag. -The `.big` class will be removed in version 2.0.
Example: Masquerade markups
From 23560ea10158679aa2e41b5c6b47d6373b12cd7b Mon Sep 17 00:00:00 2001 From: Geoffrey Eisenbarth Date: Sat, 4 Apr 2026 17:52:28 -0500 Subject: [PATCH 08/11] Default to .nested-list, closes #30 --- MIGRATION.md | 1 + src/layout.css | 2 -- src/main.css | 2 ++ www/docs/70-layout.md | 63 ------------------------------------------- 4 files changed, 3 insertions(+), 65 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 2669cdf..346432a 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -9,6 +9,7 @@ The migration guide is a work in progress. - `.-no-light-theme`: Set `html { color-sheme: light; }` instead. - `.all:initial` - `.grid`: Use new helper, **TODO** +- `.nested-list`: This utility class is now the default (nested `
    ` and `
      ` do not get extra spacing). To get the old behavior, add `.margin-block` to the nested `
        ` or `
          `. ## Renamed classes - `.f-row` -> `.flex-row` diff --git a/src/layout.css b/src/layout.css index 51958f7..ba571f8 100644 --- a/src/layout.css +++ b/src/layout.css @@ -201,8 +201,6 @@ } } -.nested-list :where(ul, ol, dl) { margin-block: 0 } - .inline { display: inline } .block { display: block } .contents { display: contents } diff --git a/src/main.css b/src/main.css index 5e2f092..5798911 100644 --- a/src/main.css +++ b/src/main.css @@ -238,6 +238,7 @@ ul, ol { & & { padding-inline-start: var(--gap); + margin-block: 0; } &[role=list], &[role=listbox] { @@ -255,6 +256,7 @@ ol { dl { margin-block: var(--gap); } + dt { font-weight: bold; font-family: var(--secondary-font); diff --git a/www/docs/70-layout.md b/www/docs/70-layout.md index 3e29246..32090f8 100644 --- a/www/docs/70-layout.md +++ b/www/docs/70-layout.md @@ -205,69 +205,6 @@ Borders can be removed by using `.border:none` or one of the followin {.textcolumns} -*** - -~~The `.nested-list` class removes extraneous margins in nested lists.~~ -**Deprecated:**{.bad .color} Will be removed in version 2.0. -In the future, nested lists will not have margins by default. -You can add them back in using `

        1. `{.language-html} as needed. - -

          -
          Example: Nested list markup
          - - ~~~html -
          -
          - Regular list -
          • Items -
            • Item 1 -
            • Item 2
            -
          • Widgets -
            • Widget 1 -
            • Widget 2
            -
          -
          -
          - Nested list -
            -
          • Items -
            • Item 1 -
            • Item 2
            -
          • Widgets -
            • Widget 1 -
            • Widget 2
            -
          -
          -
          - ~~~ - -
          -
          - Regular list -
          • Items -
            • Item 1 -
            • Item 2
            -
          • Widgets -
            • Widget 1 -
            • Widget 2
            -
          -
          -
          - Nested list -
            -
          • Items -
            • Item 1 -
            • Item 2
            -
          • Widgets -
            • Widget 1 -
            • Widget 2
            -
          -
          -
          - -
          - - ## Aspect Ratio To set the aspect ratio of an element, use the `aspect-ratio`{.token .attr-name} CSS property: From cf3fa664d35decfe6cb746137fcc5c67f0a42d8a Mon Sep 17 00:00:00 2001 From: Geoffrey Eisenbarth Date: Wed, 29 Apr 2026 11:38:45 -0500 Subject: [PATCH 09/11] Add border-radius to .border --- src/colorways.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/colorways.css b/src/colorways.css index 4ecdfe3..8687e73 100644 --- a/src/colorways.css +++ b/src/colorways.css @@ -46,30 +46,37 @@ border-block-end: var(--border-block-end-width) var(--border-block-end-style) var(--graphical-fg); border-inline-start: var(--border-inline-start-width) var(--border-inline-start-style) var(--graphical-fg); border-inline-end: var(--border-inline-end-width) var(--border-inline-end-style) var(--graphical-fg); + border-radius: var(--border-radius); } .border-block\:none { border-block: none } .border-block { border-block-start: var(--border-block-start-width) var(--border-block-start-style) var(--graphical-fg); border-block-end: var(--border-block-end-width) var(--border-block-end-style) var(--graphical-fg); + border-radius: var(--border-radius); } .border-block-start\:none { border-block-start: none } .border-block-start { border-block-start: var(--border-block-start-width) var(--border-block-start-style) var(--graphical-fg); + border-radius: var(--border-radius); } .border-block-end\:none { border-block-end: none } .border-block-end { border-block-end: var(--border-block-end-width) var(--border-block-end-style) var(--graphical-fg); + border-radius: var(--border-radius); } .border-inline\:none { border-inline: none } .border-inline { border-inline-start: var(--border-inline-start-width) var(--border-inline-start-style) var(--graphical-fg); border-inline-end: var(--border-inline-end-width) var(--border-inline-end-style) var(--graphical-fg); + border-radius: var(--border-radius); } .border-inline-start\:none { border-inline-start: none } .border-inline-start { border-inline-start: var(--border-inline-start-width) var(--border-inline-start-style) var(--graphical-fg); + border-radius: var(--border-radius); } .border-inline-end\:none { border-inline-end: none } .border-inline-end { border-inline-end: var(--border-inline-end-width) var(--border-inline-end-style) var(--graphical-fg); + border-radius: var(--border-radius); } From 14b7f8bf06a94864150acbc92f58db62f766ed00 Mon Sep 17 00:00:00 2001 From: Geoffrey Eisenbarth Date: Wed, 29 Apr 2026 11:39:38 -0500 Subject: [PATCH 10/11] calc typo --- src/main.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/main.css b/src/main.css index 5798911..5babd91 100644 --- a/src/main.css +++ b/src/main.css @@ -166,8 +166,8 @@ body > footer, main + footer { --eff-line-length: min( - calc(var(--full-width) - 2rlh)), - var(--line-length) + calc(var(--full-width) - 2rlh), + var(--line-length) ); padding-block: 1rlh; padding-inline: calc((var(--full-width) - var(--eff-line-length)) / 2); From e17a59e36009edbf0f28dbbbdcdbf78cf61833ed Mon Sep 17 00:00:00 2001 From: Geoffrey Eisenbarth Date: Wed, 29 Apr 2026 11:41:28 -0500 Subject: [PATCH 11/11] Add new grid helpers, closes #161 --- src/grid.css | 40 +++++++++ src/missing.css | 1 + src/variables.css | 13 +-- www/docs/60-variables.md | 12 ++- www/docs/A0-grid.md | 180 +++++++++++++++++++++++++++++++++++++++ 5 files changed, 236 insertions(+), 10 deletions(-) create mode 100644 src/grid.css create mode 100644 www/docs/A0-grid.md diff --git a/src/grid.css b/src/grid.css new file mode 100644 index 0000000..7b9e9ac --- /dev/null +++ b/src/grid.css @@ -0,0 +1,40 @@ +.layout-grid { + display: grid; + gap: var(--gap); + grid-auto-flow: column; + grid-auto-columns: 1fr; + margin-block: var(--gap); + + @media (max-width: 768px) { + display: flex; + flex-flow: column nowrap; + } + + @supports (grid-area: attr(id type())) { + & [id] { grid-area: attr(id type()) } + } + + & > * { margin: 0; } +} + +.flow-grid { + display: grid; + --cell-length: var(--card-length); + grid-template-columns: repeat( + auto-fill, minmax(min(100%, var(--cell-length)), 1fr) + ); + gap: var(--gap); + + & > * { margin: 0 } +} + +.row-grid { + display: grid; + inline-size: max-content; + max-inline-size: 100%; + gap: var(--gap); + + @media not (max-width: 768px) { + grid: 1fr / auto-flow 1fr; + } +} diff --git a/src/missing.css b/src/missing.css index 8bdbc51..0b1d4ec 100644 --- a/src/missing.css +++ b/src/missing.css @@ -10,3 +10,4 @@ @import url(layout.css); @import url(utils.css); @import url(flex.css); +@import url(grid.css); diff --git a/src/variables.css b/src/variables.css index 8339a96..1b988d7 100644 --- a/src/variables.css +++ b/src/variables.css @@ -36,6 +36,13 @@ /* Lengths */ --line-length: 40rem; /* Maximum line length for prose. */ --input-inline-size: 20ch; /* Default size for text inputs and selects. */ + --card-length: 18rem; /* Default length for cards. */ + + /* Widths */ + --full-width: 100vi; + --sidebar-width: 25ch; + --wcag-target-size-aa: 24px; + --wcag-target-size-aaa: 44px; /* Borders */ --border-width: 1px; /* Single value; set for uniform border widths */ @@ -81,12 +88,6 @@ /* Density */ --density: 1; - /* Width */ - --full-width: 100vi; - --sidebar-width: 25ch; - --wcag-target-size-aa: 24px; - --wcag-target-size-aaa: 44px; - /* Icons: https://lucide.dev/ */ --chevron-down-icon: url( 'data:image/svg+xml;utf8,' diff --git a/www/docs/60-variables.md b/www/docs/60-variables.md index 9766a9b..db2f419 100644 --- a/www/docs/60-variables.md +++ b/www/docs/60-variables.md @@ -117,6 +117,10 @@ these are grouped together at the bottom, in addition to being mentioned in the Defaults to `20ch`{.token .attr-value}. Can be overridden by using ``{.language-html}, `