index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Box</title>
    <link rel="stylesheet" href="css-box.css">
  </head>
  <body>
    <main class="container stack p2">
      <header class="cluster justify-between brdb pb2">
        <div>
          <h1 class="m0">CSS Box</h1>
          <p class="muted">A modern KISS CSS toolbox.</p>
        </div>
        <a class="btn btn-mini" href="https://fontawesome.com" rel="noreferrer">
          <i class="fa-solid fa-icons" aria-hidden="true"></i>
          Font Awesome 7
        </a>
        <a class="btn btn-mini btn-outline" href="examples.html">
          <i class="fa-solid fa-layer-group" aria-hidden="true"></i>
          Examples
        </a>
      </header>

      <section class="grid grid-3 gap3">
        <article class="brd radius p3 shadow-sm">
          <h2 class="m0 txt120"><i class="fa-solid fa-table-cells-large blu" aria-hidden="true"></i> Layout</h2>
          <p class="mt2">Modern flex, grid, stack, cluster, and container helpers.</p>
        </article>
        <article class="brd radius p3 shadow-sm">
          <h2 class="m0 txt120"><i class="fa-solid fa-palette ora" aria-hidden="true"></i> Tokens</h2>
          <p class="mt2">Colors, radii, shadows, and spacing are driven by CSS custom properties.</p>
        </article>
        <article class="brd radius p3 shadow-sm">
          <h2 class="m0 txt120"><i class="fa-solid fa-mobile-screen-button gre" aria-hidden="true"></i> Responsive</h2>
          <p class="mt2">Legacy utility names are preserved while mobile behavior is improved.</p>
        </article>
      </section>

      <section class="alert success">
        <i class="fa-solid fa-circle-check" aria-hidden="true"></i>
        normalize.css 8.0.1 and Font Awesome Free 7.2.0 are bundled locally.
      </section>
    </main>
  </body>
</html>