101 lines
4.7 KiB
JSON
101 lines
4.7 KiB
JSON
{
|
|
"$schema": "../schemas/code-crispies-module-schema.json",
|
|
"id": "layouts",
|
|
"title": "Flexbox & Grid",
|
|
"description": "Master modern CSS layout techniques with Flexbox and Grid for responsive, powerful designs.",
|
|
"difficulty": "intermediate",
|
|
"lessons": [
|
|
{
|
|
"id": "layouts-1",
|
|
"title": "Flexbox Fundamentals",
|
|
"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; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "/* Enable and center Flexbox */\n.flex-container {",
|
|
"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": "Flexbox Advanced Features",
|
|
"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; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "/* Enable wrap and flexible items */\n.flex-container {",
|
|
"initialCode": "",
|
|
"codeSuffix": "}\n.flex-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",
|
|
"message": "Set flex: 1 1 100px on items",
|
|
"options": { "caseSensitive": false }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "layouts-3",
|
|
"title": "Grid Layout 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; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "/* Define Grid */\n.grid-container {",
|
|
"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 Item 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; }",
|
|
"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 }
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|