coreui / coreui-pro / 32542423505

93%

main: 94%

push

github

feat(Utilities): grid track, flow and inline-axis alignment utilities (#836)

* feat(Utilities): grid track, flow and inline-axis alignment utilities

We cover `align-items`, `align-self` and `align-content` but none of their
inline-axis counterparts, so a grid could be aligned on one axis with a class
and needed custom CSS for the other. `justify-items`, `justify-self` and
`place-items` close that; they are grid-only, since flex has no `justify-items`
and ignores `justify-self`.

Alongside them, the track utilities upstream added: `.grid-cols-{1,2,3,4,6}`
and `.grid-cols-subgrid` set the container's track list, `.grid-cols-fill`
spans an item across whatever tracks the container ended up with, and
`.grid-auto-flow-*` decides how unplaced items fill in. On our own `.grid` the
count is already settable through `--cui-columns`; the classes are the shortcut
for the counts people reach for, and they work on any `display: grid` element.

New docs page, `utilities/grid`, because these belong with neither the flex
page (they do nothing in flex) nor the CSS Grid layout page (they are not tied
to `.grid`).

The four CSS budgets go up by the cost of the additions: `coreui.css` 63.13 →
64.02 kB, its minified twin 52.79 → 53.45 kB, and the utilities bundle 15.44 →
16.31 kB. Of that, 584 bytes is the responsive variants across six
breakpoints — 0.9% of the stylesheet for the whole set.

* docs(Utilities): colour the grid demos the way the CSS Grid page does

The examples used hand-rolled `.p-2 .border` on each item, which reads as grey
boxes with no relation to the rest of the docs. The engine already has
`docs-example-cssgrid` — a violet tint plus border on `[class*="grid"] > *` —
and the CSS Grid layout page uses it. Same treatment here, and the markup in
the shown snippet gets shorter for it.

4537 of 5095 branches covered (89.05%)

Branch coverage included in aggregate %.

8661 of 9055 relevant lines covered (95.65%)

399.9 hits per line