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

refactor: shorten class names in layout lessons for easier typing

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 42e9d06705
commit b4d2f52d50
7 changed files with 109 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
lessons/05-units-variables.json
View File

@@ -22,7 +22,11 @@
{ "type": "contains", "value": "width", "message": "Use <kbd>width</kbd> property", "options": { "caseSensitive": false } },
{ "type": "property_value", "value": { "property": "width", "expected": "80%" }, "message": "Set width to <kbd>80%</kbd>" },
{ "type": "contains", "value": "max-width", "message": "Use <kbd>max-width</kbd> property", "options": { "caseSensitive": false } },
{ "type": "property_value", "value": { "property": "max-width", "expected": "37.5rem" }, "message": "Set max-width to <kbd>37.5rem</kbd>" }
{
"type": "property_value",
"value": { "property": "max-width", "expected": "37.5rem" },
"message": "Set max-width to <kbd>37.5rem</kbd>"
}
]
},
{
@@ -39,8 +43,18 @@
"solution": " --main-color: #6200ee;\n}\n.var-box {\n border-color: var(--main-color);",
"previewContainer": "preview-area",
"validations": [
{ "type": "contains", "value": "--main-color", "message": "Define <kbd>--main-color</kbd> in :root", "options": { "caseSensitive": false } },
{ "type": "contains", "value": "var(--main-color)", "message": "Use <kbd>var(--main-color)</kbd>", "options": { "caseSensitive": false } },
{
"type": "contains",
"value": "--main-color",
"message": "Define <kbd>--main-color</kbd> in :root",
"options": { "caseSensitive": false }
},
{
"type": "contains",
"value": "var(--main-color)",
"message": "Use <kbd>var(--main-color)</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "border", "expected": "var(--main-color)" },