[Updating: numbers in three CSS indexes, README.md, data/metadata.json, package.json, and package-lock.json (twice).]
- Refactored
<h1>
through<h6>
line heights, spacing. - Removed
hyphens: auto; overflow-wrap: break-word
from the<body>
tag. - Refactored
container
and max-width utilitieswxxs
throughwxl
to include their own--vmax
variable. (So that their onboard--vmax
works as a modifier forcontainer
and the newgrid
.) - Removed
expand-right
andexpand-left
from the content grid. - BREAKING CHANGE: removed Baselayer 1’s columnar grid system.
- NEW improved grid system with media queries AND container queries for reverting to a single flexbox column at smaller (viewport or container) widths.
- HSL colors (from Baselayer 1) are now refactored and moved to their own partial file
colors-hsl.css
. This is done so that HSL colors can be not-included fromindex.css
when you no longer need to support older browsers that do not have an interpreter for OKLCH colors. - NEW OKLCH color system in file
colors-oklch.css
using the same CSS classes and theme variable names, it is a drop-in replacement for the Baselayer 1’s HSL color system. HSL is still present as an option (not a fallback) for pre-OKLCH browsers in Baselayer 2. - NEW built-in dark themes for Baselayer core, OKLCH and HSL -- controllable by a JS toggle.
- And a load of minor improvements.
- Removed smooth scrolling.
- Removed
gap
alias fromgap2
.
- Added
gap1
throughgap4
for flexbox and grid layouts.
- Activated focus ring on buttons only for
:focus-visible
.
- Font weight utilities
lighter
,normal
,semibold
,bold
,heavy
-- all controlled by CSS variables.
font-size: 100%
set on the<html>
tag, not the<body>
tag (defaulting as 16px).- Base line heights simply set at 1.5 (not increasing by a built-in clamp).
- Line heights of headings no longer controlled by
calc(1em + 0.5rem)
but by a manual calculation:{font-size} * (1 + (1/{font-size} * 10))
(rounded). Therefore line heights will properly scale with the headings if they are wrapped in thelongread
utility. - Improved font elements and buttons: now font-size scalable.
- Added
[class*=grid] { display:grid }
to ensure thatgrid gap
works at all viewport widths. - Added
expand-right
andexpand-left
to the content grid for e.g. asymmetrical blockquotes. - Improved dimensions, including width variables now in 7 × 256px increments,
xxs
256pxxs
512pxsm
768pxmd
1024pxlg
1280pxxl
1440pxxxl
1600 px (same as max-width ofcontainer
)
- Another tier of invisibility classes:
lg
. - Improved form elements.
- Improved typography.
- Improved tables: now borderlines around all cells, not simple hotizontal lines between table rows. Cell text left-aligned.
- Added
--b4
tier for borders - Refactored border radius to
--r2
through--r4
to pair with borders--b2
through--b4
. And now both are set in pixels. (There is no--r1
because no need for a 1px border radius.) - Removed the forced left-alignment of the first column of cells in
<table>
.
- Added hover states of colors, so hover can change a color (not only change a shade).
- Added hover transition states for links and buttons.
- Improvements to tables: removing cell borders; adding border-bottom to
thead
andtr
. - Further improvements to forms and buttons.
- Added
hmax100vh
. - Added
inlineflex
.
- Renamed
.article
(the content grid class) as.contentgrid
.
- Improvements to list item spacing.
- Improvements to forms and buttons.
- Initial public release -- GitHub repo.