mCSS 1.1.0

[minimaldesign]

mCSS 1.1.0 folds CardList and FeatureGrid into a single container-responsive list component, Tiles. The same markup fits as many columns as the column it sits in can hold, so a list is 2-up in a docs column and 4-up in a wide one at the same window size, no viewport breakpoints involved. Read the Tiles docs.

mCSS follows the copy-it-you-own-it model: there is no package to update. Grab dist/mcss.css (or mcss.min.css), copy the pieces you want, and edit them like anything else you wrote.

What's new

• Tiles (component.tiles.css, Tiles.astro): one container-responsive list for cards, feature items, pricing tiers, anything repeated at one size. Columns appear as the nearest size container crosses the tile size's thresholds, so the count answers the width of the column the list sits in, not the viewport. Sizes name the tile: .tiles / .tiles-md for card-sized tiles, .tiles-sm for icon + blurb items. No column cap, and --tiles-columns on a hook class pins the count when you need to.
• Every .layout scaffold now declares its main column as a named size container (container: main / inline-size), which is what Tiles responds to inside a scaffold, and what your own @container main (…) rules can use. Outside a scaffold, wrap a list in .tiles_container.
• The blog index goes 4-up on a laptop purely by widening its page column (--layout-content-width), no per-list tuning: the pattern to copy for wide listing pages.

Breaking changes

• .cardList and .featureGrid are gone, replaced by Tiles. <ul class="cardList grid" col="1" col-md="2" col-lg="3"> becomes <ul class="tiles">, and <ul class="featureGrid grid" …> becomes <ul class="tiles tiles-sm">. The .featureItem markup inside is unchanged.
• The lists no longer ride on the .grid attribute system (unchanged for your own grids): you pick the tile size, and the container's width decides the columns.
• CardList.astro / FeatureGrid.astro are replaced by Tiles.astro (size="sm" for the former FeatureGrid); the cols prop is gone.

Fixed

• getInitials (the Avatar byline helper) doubled the first letter of a single-word name, so "Yann" rendered as "YY". Single-word names now yield one initial; pre-computed initials like "SR" still pass through untouched. (Fix single-word avatar initials #51)
• The wireframe theme's per-element sketch tilt is live again: postcss-preset-env's random-function polyfill is disabled, so native random() passes through instead of freezing into one static value (which also churned dist/ on every edit).

The full list is in the changelog. Built something with mCSS? Come show it off in the discussions.

---

This discussion was created from the release mCSS 1.1.0.