@daydreamui/good-css 0.0.0-stage → 0.3.0

package/playgrounds/container-queries-with-container-units.css

@@ -0,0 +1,10 @@
+.slot { container-type: inline-size; }
+
+.card h2 { font-size: clamp(1.25rem, 1rem + 2cqi, 2rem); }
+
+@container (width > 30rem) {
+  .card {
+    display: grid;
+    grid-template-columns: 12rem 1fr;
+  }
+}

package/playgrounds/container-queries-with-container-units.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Container query card</title>
+<link rel="stylesheet" href="base.css">
+<link rel="stylesheet" href="container-queries-with-container-units.css">
+</head>
+<body>
+<h1>Container query card</h1><main class="slot"><article class="card"><h2>A responsive card</h2><p>Above 30rem of container space the title and text sit side by side. The heading also scales with the container.</p></article></main>
+</body>
+</html>

package/playgrounds/content-grid-with-breakouts.css

@@ -0,0 +1,21 @@
+.content-grid {
+  --gutter: 1.5rem;
+  --content: 64rem;
+  --breakout: 80rem;
+
+  display: grid;
+  grid-template-columns:
+    [full-width-start] minmax(var(--gutter), 1fr)
+    [breakout-start] minmax(0, calc((var(--breakout) - var(--content)) / 2))
+    [content-start] min(100% - var(--gutter) * 2, var(--content)) [content-end]
+    minmax(0, calc((var(--breakout) - var(--content)) / 2)) [breakout-end]
+    minmax(var(--gutter), 1fr) [full-width-end];
+}
+
+:is(.content-grid, .full-width) > * { grid-column: content; }
+:is(.content-grid, .full-width) > .breakout { grid-column: breakout; }
+:is(.content-grid, .full-width) > .full-width {
+  grid-column: full-width;
+  display: grid;
+  grid-template-columns: inherit;
+}

package/playgrounds/content-grid-with-breakouts.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Content grid with breakouts</title>
+<link rel="stylesheet" href="base.css">
+<link rel="stylesheet" href="content-grid-with-breakouts.css">
+</head>
+<body>
+<h1>Content grid with breakouts</h1><main class="content-grid"><section class="panel"><h2>Content width</h2><p>The default column.</p></section><section class="panel breakout"><h2>Breakout width</h2></section><section class="full-width"><h2>Full width</h2><p>Its child returns to the content column.</p></section></main>
+</body>
+</html>

package/playgrounds/fixtures.json

@@ -0,0 +1,32 @@
+[
+  {
+    "slug": "intrinsic-grid",
+    "title": "Intrinsic grid",
+    "body": "<h1>Intrinsic grid</h1>\n<main class=\"grid\"><article><h2>Card 1</h2><p>Content determines how the row wraps.</p></article>\n<article><h2>Card 2</h2><p>Content determines how the row wraps.</p></article>\n<article><h2>Card 3</h2><p>Content determines how the row wraps.</p></article>\n<article><h2>Card 4</h2><p>Content determines how the row wraps.</p></article>\n<article><h2>Card 5</h2><p>Content determines how the row wraps.</p></article>\n<article><h2>Card 6</h2><p>Content determines how the row wraps.</p></article></main>",
+    "experiment": "Resize from 960 to 320px. Columns wrap at their 16rem minimum without a media query; change that minimum and compare auto-fit with auto-fill."
+  },
+  {
+    "slug": "sidebar-that-wraps-on-its-own",
+    "title": "Wrapping sidebar",
+    "body": "<h1>Wrapping sidebar</h1><div class=\"with-sidebar\"><aside class=\"sidebar\">Sidebar with an ideal width</aside><main class=\"main\"><h2>Article</h2><p>The main content keeps at least half the available row and sends the sidebar onto its own row when space runs out.</p></main></div>",
+    "experiment": "Resize from 960 to 320px. The sidebar and article wrap into separate rows. Adjust flex-basis and min-inline-size to move the wrap point."
+  },
+  {
+    "slug": "subgrid-rows-shared-across-cards",
+    "title": "Aligned card rows",
+    "body": "<h1>Aligned card rows</h1><main class=\"cards\"><article class=\"card\"><h2>Short heading</h2><p>A brief summary.</p><footer>Details</footer></article><article class=\"card\"><h2>A heading long enough to wrap onto several lines</h2><p>More content, with a longer description to make the row heights visibly shared across neighboring cards.</p><footer>Details</footer></article><article class=\"card\"><h2>Third card</h2><p>Another summary.</p><footer>Details</footer></article></main>",
+    "experiment": "At 960px, card headings, descriptions and footers share rows despite different text lengths. At 320px cards form a single column. Edit a heading to see its neighbors respond."
+  },
+  {
+    "slug": "container-queries-with-container-units",
+    "title": "Container query card",
+    "body": "<h1>Container query card</h1><main class=\"slot\"><article class=\"card\"><h2>A responsive card</h2><p>Above 30rem of container space the title and text sit side by side. The heading also scales with the container.</p></article></main>",
+    "experiment": "Resize the slot above and below 30rem. The card changes layout against its ancestor container, while its title scales with cqi. Change the slot width independently of the viewport."
+  },
+  {
+    "slug": "content-grid-with-breakouts",
+    "title": "Content grid with breakouts",
+    "body": "<h1>Content grid with breakouts</h1><main class=\"content-grid\"><section class=\"panel\"><h2>Content width</h2><p>The default column.</p></section><section class=\"panel breakout\"><h2>Breakout width</h2></section><section class=\"full-width\"><h2>Full width</h2><p>Its child returns to the content column.</p></section></main>",
+    "experiment": "Compare the content, breakout and full-width tracks at 1440px and 320px. Change --content, --breakout and --gutter; every child stays on a named track."
+  }
+]

package/playgrounds/intrinsic-grid.css

@@ -0,0 +1,5 @@
+.grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+}

package/playgrounds/intrinsic-grid.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Intrinsic grid</title>
+<link rel="stylesheet" href="base.css">
+<link rel="stylesheet" href="intrinsic-grid.css">
+</head>
+<body>
+<h1>Intrinsic grid</h1>
+<main class="grid"><article><h2>Card 1</h2><p>Content determines how the row wraps.</p></article>
+<article><h2>Card 2</h2><p>Content determines how the row wraps.</p></article>
+<article><h2>Card 3</h2><p>Content determines how the row wraps.</p></article>
+<article><h2>Card 4</h2><p>Content determines how the row wraps.</p></article>
+<article><h2>Card 5</h2><p>Content determines how the row wraps.</p></article>
+<article><h2>Card 6</h2><p>Content determines how the row wraps.</p></article></main>
+</body>
+</html>

package/playgrounds/sidebar-that-wraps-on-its-own.css

@@ -0,0 +1,16 @@
+.with-sidebar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.sidebar {
+  flex-basis: 20rem;
+  flex-grow: 1;
+}
+
+.main {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-inline-size: 50%;
+}

package/playgrounds/sidebar-that-wraps-on-its-own.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Wrapping sidebar</title>
+<link rel="stylesheet" href="base.css">
+<link rel="stylesheet" href="sidebar-that-wraps-on-its-own.css">
+</head>
+<body>
+<h1>Wrapping sidebar</h1><div class="with-sidebar"><aside class="sidebar">Sidebar with an ideal width</aside><main class="main"><h2>Article</h2><p>The main content keeps at least half the available row and sends the sidebar onto its own row when space runs out.</p></main></div>
+</body>
+</html>

package/playgrounds/subgrid-rows-shared-across-cards.css

@@ -0,0 +1,12 @@
+.cards {
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+}
+
+.card {
+  display: grid;
+  grid-row: span 3;
+  grid-template-rows: subgrid;
+  row-gap: 0.5rem;
+}

package/playgrounds/subgrid-rows-shared-across-cards.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Aligned card rows</title>
+<link rel="stylesheet" href="base.css">
+<link rel="stylesheet" href="subgrid-rows-shared-across-cards.css">
+</head>
+<body>
+<h1>Aligned card rows</h1><main class="cards"><article class="card"><h2>Short heading</h2><p>A brief summary.</p><footer>Details</footer></article><article class="card"><h2>A heading long enough to wrap onto several lines</h2><p>More content, with a longer description to make the row heights visibly shared across neighboring cards.</p><footer>Details</footer></article><article class="card"><h2>Third card</h2><p>Another summary.</p><footer>Details</footer></article></main>
+</body>
+</html>

package/upstream/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vojta Holik
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/upstream/lock.json

@@ -0,0 +1,7 @@
+{
+  "revision": "6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef",
+  "files": {
+    "PRACTICES.md": "6083f4e3cb69d78cfd34815d2e941ef580328ce96cd4b6ab109608e0909cab70",
+    "LICENSE": "dcdeb88707627233bbc76f69febd77ef78a665424a0e0194b3416a473d33cede"
+  }
+}