public/code-crispies
2
1
Fork 0
Code Issues 7 Pull Requests Actions Activity

refactor: shorten class names in layout lessons for easier typing
Some checks failed
Deploy static content to Pages / deploy (push) Has been cancelled
Details

Browse Source 
- flexbox.json: .flex-container → .wrap
- grid.json: .grid-container → .grid, .grid-layout → .page,
  .responsive-grid → .cards, .align-grid → .cells, .overlap-grid → .stack
- 07-layouts.json: .flex-container → .flex, .flex-item → .item,
  .grid-container → .grid
- CLAUDE.md: add short class names rule (1-2 syllables max)
This commit is contained in:
Michael Czechowski
2025-12-30 16:47:31 +01:00
parent 42a35895af
commit 87ece530eb
7 changed files with 109 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
lessons/07-layouts.json
View File

@@ -9,11 +9,11 @@
"id": "layouts-1",
"title": "Flex Basics",
"description": "Learn the core properties of Flexbox to align, distribute space, and order items in a container.",
"task": "Set .flex-container to display: flex, and center its children both horizontally and vertically.",
"previewHTML": "<div class=\"flex-container\"><div>1</div><div>2</div><div>3</div></div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .flex-container > div { background: #eceff1; margin: 0.5rem; padding: 1rem; }",
"task": "Set .flex to display: flex, and center its children both horizontally and vertically.",
"previewHTML": "<div class=\"flex\"><div>1</div><div>2</div><div>3</div></div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .flex > div { background: #eceff1; margin: 0.5rem; padding: 1rem; }",
"sandboxCSS": "",
"codePrefix": "/* Enable and center Flexbox */\n.flex-container {",
"codePrefix": "/* Enable and center Flexbox */\n.flex {",
"initialCode": "",
"codeSuffix": "}",
"previewContainer": "preview-area",
@@ -27,19 +27,19 @@
"id": "layouts-2",
"title": "Flex Advanced",
"description": "Control wrapping, ordering, and flexible growth/shrink of items in a flex container.",
"task": "Allow items to wrap and set .flex-item to flex: 1 1 100px.",
"previewHTML": "<div class=\"flex-container\"><div class=\"flex-item\">A</div><div class=\"flex-item\">B</div><div class=\"flex-item\">C</div></div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .flex-item { background: #c5cae9; margin: 0.5rem; padding: 1rem; }",
"task": "Allow items to wrap and set .item to flex: 1 1 100px.",
"previewHTML": "<div class=\"flex\"><div class=\"item\">A</div><div class=\"item\">B</div><div class=\"item\">C</div></div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .item { background: #c5cae9; margin: 0.5rem; padding: 1rem; }",
"sandboxCSS": "",
"codePrefix": "/* Enable wrap and flexible items */\n.flex-container {",
"codePrefix": "/* Enable wrap and flexible items */\n.flex {",
"initialCode": "",
"codeSuffix": "}\n.flex-item { }",
"codeSuffix": "}\n.item { }",
"previewContainer": "preview-area",
"validations": [
{ "type": "contains", "value": "flex-wrap: wrap", "message": "Use 'flex-wrap: wrap'", "options": { "caseSensitive": false } },
{
"type": "regex",
"value": ".flex-item.*flex:\\s*1\\s+1\\s+100px",
"value": ".item.*flex:\\s*1\\s+1\\s+100px",
"message": "Set flex: 1 1 100px on items",
"options": { "caseSensitive": false }
}
@@ -49,11 +49,11 @@
"id": "layouts-3",
"title": "Grid Basics",
"description": "Define grid containers, set rows and columns, and place items in a structured grid.",
"task": "Set .grid-container to display: grid with three equal columns and a 1rem gap.",
"previewHTML": "<div class=\"grid-container\"><div>1</div><div>2</div><div>3</div><div>4</div></div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .grid-container > div { background: #ffe082; padding: 1rem; }",
"task": "Set .grid to display: grid with three equal columns and a 1rem gap.",
"previewHTML": "<div class=\"grid\"><div>1</div><div>2</div><div>3</div><div>4</div></div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .grid > div { background: #ffe082; padding: 1rem; }",
"sandboxCSS": "",
"codePrefix": "/* Define Grid */\n.grid-container {",
"codePrefix": "/* Define Grid */\n.grid {",
"initialCode": "",
"codeSuffix": "}",
"previewContainer": "preview-area",
@@ -79,8 +79,8 @@
"title": "Grid Placement",
"description": "Control the span and position of grid items with grid-column and grid-row.",
"task": "Span the first grid item across 2 columns using grid-column: 1 / span 2.",
"previewHTML": "<div class=\"grid-container\"><div class=\"item1\">Featured</div><div>2</div><div>3</div><div>4</div></div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .grid-container > div { background: #c8e6c9; padding: 1rem; }",
"previewHTML": "<div class=\"grid\"><div class=\"item1\">Featured</div><div>2</div><div>3</div><div>4</div></div>",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .grid > div { background: #c8e6c9; padding: 1rem; }",
"sandboxCSS": "",
"codePrefix": "/* Span item */\n.item1 {",
"initialCode": "",