Utilities on Socle

Overview

Mon, 01 Jan 0001 00:00:00 +0000

One utility, in its own layer.

Page	Class	Purpose
Scrollsnap	`.scrollsnap`	Turns a grid into a horizontal snap carousel

Why it is not a component

.scrollsnap changes the grid-template-columns that a component such as .items declares for itself in @layer components. A later layer beats an earlier one regardless of specificity, so putting it in @layer utilities is what lets a single class opt an existing component into carousel behaviour without rewriting the component.

Scrollsnap

Mon, 01 Jan 0001 00:00:00 +0000

Turns a grid into a horizontal carousel with snap points. Items keep their own width, the grid stops wrapping, and the row scrolls sideways, bleeding into the gutter so the next item peeks in.

<div class="items scrollsnap-md">
 <article class="card">...</article>
 <article class="card">...</article>
 <article class="card">...</article>
</div>

It is opt-in, applied to the element that owns the grid, so the same component is a carousel in one context and a plain grid in another.