Michael Czechowski
b4d2f52d50
- 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)
101 lines
4.5 KiB
JSON
101 lines
4.5 KiB
JSON
{
|
|
"$schema": "../schemas/code-crispies-module-schema.json",
|
|
"id": "layouts",
|
|
"title": "Layouts",
|
|
"description": "Master modern CSS layout techniques with Flexbox and Grid for responsive, powerful designs.",
|
|
"difficulty": "intermediate",
|
|
"lessons": [
|
|
{
|
|
"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 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 {",
|
|
"initialCode": "",
|
|
"codeSuffix": "}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{ "type": "contains", "value": "display", "message": "Use 'display: flex'", "options": { "caseSensitive": false } },
|
|
{ "type": "contains", "value": "justify-content", "message": "Use 'justify-content: center'", "options": { "caseSensitive": false } },
|
|
{ "type": "contains", "value": "align-items", "message": "Use 'align-items: center'", "options": { "caseSensitive": false } }
|
|
]
|
|
},
|
|
{
|
|
"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 .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 {",
|
|
"initialCode": "",
|
|
"codeSuffix": "}\n.item { }",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{ "type": "contains", "value": "flex-wrap: wrap", "message": "Use 'flex-wrap: wrap'", "options": { "caseSensitive": false } },
|
|
{
|
|
"type": "regex",
|
|
"value": ".item.*flex:\\s*1\\s+1\\s+100px",
|
|
"message": "Set flex: 1 1 100px on items",
|
|
"options": { "caseSensitive": false }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "layouts-3",
|
|
"title": "Grid Basics",
|
|
"description": "Define grid containers, set rows and columns, and place items in a structured grid.",
|
|
"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 {",
|
|
"initialCode": "",
|
|
"codeSuffix": "}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{ "type": "contains", "value": "display: grid", "message": "Use 'display: grid'", "options": { "caseSensitive": false } },
|
|
{
|
|
"type": "contains",
|
|
"value": "grid-template-columns",
|
|
"message": "Define 'grid-template-columns'",
|
|
"options": { "caseSensitive": false }
|
|
},
|
|
{
|
|
"type": "regex",
|
|
"value": "grid-template-columns:\\s*repeat\\(3,\\s*1fr\\)\\s*",
|
|
"message": "Create three equal columns",
|
|
"options": { "caseSensitive": false }
|
|
},
|
|
{ "type": "contains", "value": "gap", "message": "Use 'gap' property", "options": { "caseSensitive": false } }
|
|
]
|
|
},
|
|
{
|
|
"id": "layouts-4",
|
|
"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\"><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": "",
|
|
"codeSuffix": "}",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{ "type": "contains", "value": "grid-column", "message": "Use 'grid-column' property", "options": { "caseSensitive": false } },
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "grid-column", "expected": "1 / span 2" },
|
|
"message": "Span across 2 columns",
|
|
"options": { "caseSensitive": false }
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|