@chassis-ui/css v0.7.0

Minor Changes

• 1a54d5d: Container-query variants of the grid classes and the layout utilities, and a grid whose gutter follows its container.

  • @md: variants. Every placement class of .grid has a variant per container width under the @ prefix, Tailwind's container variant: .@md:col-span-4, .@lg:col-start-3, .@md:col-end-13, .@md:col-auto, .@md:row-span-2. It applies when the nearest query container (.contains-inline, set-container(), a .navbar) is at least as wide as the breakpoint, where .md:col-span-4 follows the viewport. The prefixes are @sm: to @2xl:; an unprefixed class is the layout below sm and of an element with no query container above it. Where a breakpoint class and a container class both apply to an element, the container class wins
  • The layout utilities have the same variants: d-*, flex-*, order-*, justify-content-*, align-items-*, align-content-*, align-self-*, gap-*, row-gap-*, column-gap-*, place-items-*, place-content-*, place-self-*, justify-items-*, justify-self-*, grid-cols-*, grid-rows-*, grid-flow-*, auto-cols-*, auto-rows-*, space-x-*, space-y-*, divide-x, divide-y, w-{n}/12, w-100, w-auto, text-start / text-center / text-end, float-* and object-fit-* (.@md:d-flex, .@md:flex-row, .@md:w-6/12)
  • .grid.contained and .grid-fill.contained take --cx-grid-gutter and --cx-grid-columns from the breakpoint of the query container, not of the viewport: a grid in a narrow column of a wide page has the gutter of a narrow page. --cx-grid-gap, a gap utility and grid-cols-* still override them, and without a query container above it the grid keeps the values of the viewport, as a plain .grid does: the first breakpoint's values are declared in @container (width >= 0), which matches any container and nothing else. Plain .grid is unchanged
  • Utilities API: a container key, boolean. container: true generates the @ variants of a utility, after its responsive ones. The utilities above set it; margin, padding, font size and icon size set container: false, and a map.merge of $utilities turns it on for them
  • Sass: the option $enable-container-queries (true by default) governs the @ variants and the modifier. New: container-breakpoint-prefix(), make-cssgrid-container() and grid-container-vars()
  • Tailwind entry: nothing new to import. @md:col-span-4 and @md:d-flex are Tailwind's own container variants there, at the Chassis breakpoints, for every utility; .grid.contained is plain CSS of the entry
  • chassis.min.css is 693 KB, from 628 KB in 0.6.0 (84.5 KB gzipped, from 78.6 KB): 20 KB less for the flexbox grid, 85 KB more for the new grid classes at six breakpoints and for five container widths of 63 placement rules and 217 utility rules. $enable-container-queries: false leaves the container widths out. The grid bundle is 206 KB, from 156 KB (21.9 KB gzipped, from 16.9 KB), with the utilities it gained

• 789615b: Fixes from a review of the grid system.

  • .grid-fill wraps without a minimum set. Its columns are at least 12rem wide ($grid-min, the fallback of --cx-grid-min), where the minimum of 0 put every child in one row, whatever their number. --cx-grid-min still sets the width of one grid. In a grid narrower than the minimum, the one column that fits takes the width of the grid instead of overflowing it
  • place-items-* has a variant per breakpoint and per container width (.md:place-items-center, .@md:place-items-center), which its documentation described and the build did not generate
  • The grid bundle (chassis-grid.css) has .contains-inline, without which its .contained modifier and @md: classes had no query container to read, and the fraction widths (.w-6/12) with their variants. Its utility list named a justify-items key that does not exist; map-get-multiple() now warns about a key the map lacks
  • grid-root-vars() and grid-container-vars() check their maps. A map with no value for the first breakpoint ($grid-gutters: (md: 1.5rem)) stops the compile, where it left --cx-grid-gutter undefined below md; a key that is no breakpoint is reported with a warning and ignored, as before
  • tailwind/merge.js exports overrideClassGroups. tailwind-merge lists grid, table, inline, list-item, collapse and static in its display, visibility and position groups, and in the Tailwind entry they are Chassis classes, so twMerge('grid gap-md', 'd-flex') dropped .grid. Pass override: { classGroups: overrideClassGroups } beside extend: { classGroups } to extendTailwindMerge, and the Chassis class stays
  • Navbar: the rule of a container inside a .navbar listed .sm\:container to .2xl\:container, classes that do not exist (the variants are .container.sm, which .navbar > .container matches). The selectors are removed
  • Tailwind entry: with those selectors gone, sm:container to 2xl:container are no longer names of Chassis classes, and the entry no longer excludes them from Tailwind: lg:container is Tailwind's own container utility under its lg: variant, where it generated nothing. container alone stays the Chassis class

• 588e601: The rest of the grid vocabulary, under Tailwind's names and with its declarations, each with a variant per breakpoint and per container width.

  • End lines: .col-end-{1…13} and .col-end-auto (grid-column-end), .row-end-{1…7} and .row-end-auto. .col-span-3 .col-end-13 places three tracks against the end edge of the grid. They are generated one line past $grid-columns and $grid-rows
  • .col-auto and .row-auto (grid-column: auto, grid-row: auto) take a span and a line off an item at a breakpoint: .col-span-full .md:col-auto. .col-auto was a class of the flexbox grid until this release; markup that still carries it gets an item of one track
  • Tracks: .grid-cols-none, .grid-rows-none and .grid-rows-subgrid, and .auto-cols-{auto,min,max,fr} and .auto-rows-{auto,min,max,fr} for the size of the tracks a grid adds beyond its template (grid-auto-columns, grid-auto-rows)
  • Alignment: .justify-items-{start,end,center,stretch}, .justify-self-{auto,start,end,center,stretch}, .place-self-{auto,start,end,center,stretch} and .place-content-{start,end,center,between,around,evenly,stretch}
  • Sass: $grid-min, the minimum column width of .grid-fill (12rem) and the fallback of --cx-grid-min, beside $grid-columns and $grid-rows; @chassis-ui/tokens has no token for it yet
  • Tailwind entry: nothing changes for a project that used Tailwind's utilities of these names. The end lines and the auto resets are Tailwind's own; the track and alignment utilities are Chassis utilities equal to Tailwind's, in the groups of tailwind-merge of the same names (grid-flow, auto-cols, auto-rows, justify-items, justify-self, place-content, place-self)
  • The grid bundle (chassis-grid.css) has all of them

• 69f7c98: Breaking: the page margins and the column counts of the grid come from @chassis-ui/tokens, and the compiled CSS has the values of tokens 0.7.0: wider page margins, new gutters, and lighter text colors in the dark theme.

  • $margin-xsmall to $margin-2xlarge and $columns-xsmall to $columns-2xlarge of scss/tokens/_grid.scss read $cx-grid-margin-* and $cx-grid-columns-*, where they held .75rem and 12. A project that compiles the Sass needs @chassis-ui/tokens 0.7.0 or later, and a token source of its own (_chassis-tokens.scss) needs the twelve variables: without them the compile stops at an undefined variable
  • The padding of .container (--cx-container-padding) is 1rem, and 1.5rem from md, where it was 0.75rem at every breakpoint. Set $container-paddings, or the $margin-* variables, to keep the old padding
  • The gap of .grid and .grid-fill (--cx-grid-gutter) is 1rem, and 1.5rem from md, where it was 0.5rem, 1rem, 1.5rem, 2rem, 2.5rem and 3rem from xs to 2xl. Set $grid-gutters, or the $gutter-* variables, to keep the old gaps
  • The column counts stay 12 at every breakpoint
  • --cx-opacity-fg-subtle is 0.6 where it was 0.5, and --cx-opacity-icon-subtle 0.5 where it was 0.4, with every fg-subtle and icon-subtle color, the spinner-opacity-subtle and text-decoration-opacity-subtle utilities and the idle icon of the switch. The fg-subtle of the primary, secondary, neutral, danger, success, warning and info contexts has an alpha of 0.7
  • In the dark theme, fg-main, fg-highlight, link-main, link-hover and link-active of the same seven contexts are lighter shades of their palette, and so are the colors made from them (fg-subtle, fg-slight, border-subtle, icon-subtle, the valid and invalid icons of the forms)

• 1a54d5d: grid-rows-{1…6}: the number of explicit rows of a grid as a class, with the declaration of Tailwind's utility of the same name (grid-template-rows: repeat(n, minmax(0, 1fr))).

  • .grid-rows-2 sets the rows of one grid, and takes the place of --cx-grid-rows, which this release removes. The classes are generated up to $grid-rows and have a variant per breakpoint (.md:grid-rows-3) and per container width (.@md:grid-rows-3), as grid-cols-* has. The grid bundle has them too
  • Tailwind entry: grid-rows-{1…6} are Chassis utilities equal to Tailwind's own, so nothing changes for a project that used Tailwind's; tailwind/merge.js has a grid-row-counts group
  • 4 KB of chassis.min.css (0.3 KB gzipped), counted in the sizes of the container-query changeset

• 1cbbc47: Breaking: the flexbox grid, deprecated in 0.6.0, is removed. .grid is the only grid of Chassis.

  • Classes removed: .row, .col, .col-auto, .col-{1…12}, .offset-{0…11}, .row-cols-auto, .row-cols-{1…6}, .g-{size}, .gx-{size} and .gy-{size}, with their breakpoint variants. Migrate .row to .grid, .col-4 to .col-span-4, .col-12 (or a column with no class below a breakpoint) to .col-span-full, .offset-2 to .col-start-3, .md:offset-0 to .md:col-start-auto, .row-cols-3 to .grid-cols-3, .g-md to .gap-md, .gx-* and .gy-* to .column-gap-* and .row-gap-*, .col to .grid-fill on the parent or .d-flex with .flex-fill, and .col-auto to .d-flex on the parent. Outside a row, .col-{n} used as a width becomes .w-{n}/12, .col becomes .flex-fill and .col-auto becomes .w-auto. An item of a .grid with no span class is one track wide, not full width
  • .grid no longer declares a row. It set one explicit row of minmax(0, 1fr) (--cx-grid-rows, 1 by default), which took all the free space of a grid with a set height and left the rows after it at their content height, or at nothing when the content was taller than the grid. The rows are now implicit, as tall as their content. --cx-grid-rows is gone: use .grid-rows-{n} or a grid-template-rows declaration. The internal --cx-columns, --cx-rows and --cx-gap that .grid set on itself, and its descendants inherited, are gone too
  • .col-start-13 and .row-start-7 are removed, with their breakpoint variants: an item that starts on the last line of the grid lies outside it, in an implicit track. The start classes go from 1 to $grid-columns and $grid-rows
  • $enable-cssgrid is $enable-grid-system, and governs the whole grid system: with false the grid utilities (grid-cols-*, grid-rows-*, grid-flow-*, auto-cols-*, auto-rows-*) and the grid rules of the card are left out too, where the old option removed .grid and its placement classes only. That is 33 KB of chassis.min.css (3.6 KB gzipped). The containers, the gap utilities, the fraction widths and the :root grid variables stay. A @use … with ($enable-cssgrid: …) no longer compiles
  • grid-auto-flow-* is grid-flow-*, Tailwind's name and values: .grid-auto-flow-row, .grid-auto-flow-column and .grid-auto-flow-dense become .grid-flow-row, .grid-flow-col and .grid-flow-dense, with .grid-flow-row-dense and .grid-flow-col-dense beside them. The entry of $utilities is "grid-flow", and the group of tailwind/merge.js with it
  • .order-first is order: -9999 and .order-last order: 9999, where they were -1 and 6: an order above 5, set inline or by an added class, no longer overtakes .order-last. In the Tailwind entry the two are equal to Tailwind's and lose their !important
  • .grid-cols-subgrid is a utility, the subgrid value of the column counts, in the utilities layer with .grid-cols-{n} where it was in layout, and with their variants (.md:grid-cols-subgrid). In the Tailwind entry it is no longer an excluded class but a Chassis utility equal to Tailwind's
  • The old names of the placement classes are removed: .g-col-{n} is .col-span-{n}, .g-start-{n} is .col-start-{n}, and .grid-cols-fill is .col-span-full
  • Sass removed: the mixins make-row(), make-col-ready(), make-col(), make-col-auto(), make-col-offset(), row-cols() and make-grid-columns(); the variables $grid-gutter-x, $grid-gutter-y, $grid-row-columns, $gutters and $container-padding-x; the option $enable-grid-classes; the $gutter parameter of make-container(). A @use … with (…) that configures one of them no longer compiles. Set $grid-gutters for the gap of .grid and $container-paddings for the padding of .container, both per breakpoint
  • .container pads with --cx-container-padding directly. It no longer sets --cx-gutter-x and --cx-gutter-y, and a --cx-gutter-x set on a container no longer changes its padding: set --cx-container-padding to the padding itself, half of the old value
  • --cx-card-group-margin, the space between the stacked cards of a .card-group, defaults to half of --cx-grid-gutter (0.5rem, and 0.75rem from md) where it was 0.75rem. $toast-spacing keeps its 1.5rem, now from $space-xlarge
  • Card: the rules of a .card-body that holds only an image match the items of a .grid (.grid > [class*="col-span-"]), no longer the columns of a .row
  • Tailwind entry: the flexbox grid utilities, the g-col-* and g-start-* aliases and the layout sublayer of utilities that held them are gone, so the entry emits no grid @utility at all. col-{n} and col-auto are Tailwind core's own utilities again (col-6 is grid-column: 6): markup that still carries a flexbox grid class compiles without an error and renders something else. scss/tailwind/mixins/_grid.scss is removed, with make-grid-columns-tailwind(), make-cssgrid-tailwind() and generate-tailwind-grid-merge-manifest()
  • tailwind/merge.js: the groups grid-col, grid-row-cols, grid-offset, grid-gutter, grid-gutter-x and grid-gutter-y are gone, and so are col-start-end and col-start, which held only the aliases. tailwind-merge resolves col-span-* and col-start-* by itself
  • The grid bundle (chassis-grid.css) has flex-fill and its breakpoint variants, which its utility list named by a key that did not exist. Its other flex, alignment and spacing utilities stay
  • The removal takes 20 KB off chassis.min.css (2.6 KB gzipped) and off the grid bundle. The sizes of the release are in the container-query entry

• c071ddb: fg-opacity-a11y sets the opacity of a foreground color to --cx-opacity-fg-a11y, the alpha that @chassis-ui/tokens 0.7.0 gives the fg-subtle color of the primary, secondary, neutral, danger, success, warning and info contexts. :root declares the custom property, from the new $opacity-fg-a11y, a key of $context-opacities and of $fg-opacities. In tailwind/merge.js the class is in the fg-opacity group.

• c071ddb: The subtle text of a context variant has the alpha of its context. %solid-context, %smooth-context and %outline-context computed --cx-fg-subtle with --cx-opacity-fg-subtle in every context, so a .badge.smooth or a .context.outline in a colored context had fainter subtle text than the fg-subtle token of that context, whose alpha @chassis-ui/tokens 0.7.0 raised.

  The context() mixin now sets --cx-context-opacity-fg-subtle, which the variants read: --cx-opacity-fg-a11y in the contexts of the new $a11y-contexts (primary, secondary, neutral, danger, success, warning and info), and --cx-opacity-fg-subtle in the others, which render as before.

• 3067e9e: w-100 and w-auto have a variant per breakpoint (md:w-100, lg:w-auto), like the fraction widths: w-6/12 lg:w-auto ends a fraction at a breakpoint. The two values moved from the width entry of $utilities to the responsive width-fraction entry; w-25, w-50 and w-75 stay without variants.

  Breaking: in tailwind/merge.js the width classes are in w, the width group of tailwind-merge, and the width and width-fraction groups are gone. A fraction now resolves against the other widths (twMerge('w-6/12', 'w-auto') is w-auto). Nothing changes for a project that passes classGroups to extendTailwindMerge whole.

Patch Changes

• 43764e3: The grid bundle (chassis-grid.css) declares the order of the cascade layers, as the reboot and utilities bundles do. Without the statement its layers were ordered as they appeared, so a bundle loaded after it put reboot above layout and utilities. The statement moved from scss/_root.scss to scss/_layer-order.scss, which _root.scss loads.

  The breakpoint and grid custom properties moved to the end of the :root rule, which their media query no longer splits in two.