~/skills/html-css

HTML / CSS

everything on the web ends up here eventually, including this site.

semantic markup, custom properties, container queries and nothing clever in JavaScript. the card on the right is styled by the CSS on the left.

used in CHC Review Studio

html / css · styled by the css it shows

ui mutation lab

build log

one card, every width

no media queries here: the card asks its container how much room it has, and the theme and density are just variables.

semantic
container queries
custom properties

what the page actually set

.demo-frame[style] {
  --frame-w: 420px;
  --spacing: 1;
  --card-radius: 14px;
  --card-border-w: 1px;
  --type-scale: 1;
}
data-theme="light" data-density="normal"
data-align="start" data-shadow="none"

tab + arrows slidersclick a preset for quick widths

how this works

the controls only write custom properties and data attributes. the card is the markup in card.html, adapting through app/demo-card.css: variables for the numbers, a container query for the layout. the one thing the lab will not stop you doing is making it worse.

1<!-- the lab sets the data-* attributes and the style attribute; the card never changes. -->2<div class="demo-frame" data-theme="light" data-density="normal" data-align="start" data-shadow="none" style="--frame-w: 420px; --spacing: 1; --card-radius: 14px">3  <article class="demo-card" aria-labelledby="demo-card-title">4    <div class="demo-card-art" aria-hidden="true"></div>5    <div class="demo-card-body">6      <p class="demo-card-kicker">build log</p>7      <h3 id="demo-card-title">one card, every width</h3>8      <p>no media queries here: the card asks its container how much room it has, and the theme and density are just variables.</p>9      <ul class="demo-card-tags">10        <li>semantic</li>11        <li>container queries</li>12        <li>custom properties</li>13      </ul>14      <a class="demo-card-link" href="#demo-card-title">read more</a>15    </div>16  </article>17</div>