refactor: shorten compound class names to single words
Some checks failed
Deploy static content to Pages / deploy (push) Has been cancelled
Some checks failed
Deploy static content to Pages / deploy (push) Has been cancelled
- box-model: .margin-box→.outer, .border-box→.sized, .shorthand-box→.spaced, .padding-box→.padded, .border-demo→.line - units-variables: .unit-box→.box, .var-box→.themed, .calc-box→.sized, .viewport-box→.view - responsive: .responsive-box→.panel, .fluid-text→.text, .grid-responsive→.cards - Move expected toggle below preview area - Update German translations with same changes
This commit is contained in:
@@ -52,11 +52,11 @@
|
||||
"id": "box-model-3",
|
||||
"title": "Adding Margins",
|
||||
"description": "Margins create space between elements, controlling how they relate to one another within a layout. Unlike padding (which affects internal spacing), margins exist outside the element's border.",
|
||||
"task": "Add <kbd>margin: 1rem</kbd> to <kbd>.margin-box</kbd> to create space between it and the adjacent element.",
|
||||
"previewHTML": "<div class=\"container\"><div class=\"margin-box\">This box needs margins</div><div class=\"neighbor\">Adjacent element</div></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .margin-box { background-color: plum; padding: 1rem; border: 2px solid orchid; } .neighbor { background-color: lightblue; padding: 1rem; border: 2px solid steelblue; }",
|
||||
"task": "Add <kbd>margin: 1rem</kbd> to <kbd>.outer</kbd> to create space between it and the adjacent element.",
|
||||
"previewHTML": "<div class=\"container\"><div class=\"outer\">This box needs margins</div><div class=\"neighbor\">Adjacent element</div></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .outer { background-color: plum; padding: 1rem; border: 2px solid orchid; } .neighbor { background-color: lightblue; padding: 1rem; border: 2px solid steelblue; }",
|
||||
"sandboxCSS": "",
|
||||
"codePrefix": ".margin-box {\n ",
|
||||
"codePrefix": ".outer {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"solution": "margin: 1rem;",
|
||||
@@ -73,11 +73,11 @@
|
||||
"id": "box-model-4",
|
||||
"title": "Box Sizing: Border-Box",
|
||||
"description": "The <kbd>box-sizing</kbd> property determines how element dimensions are calculated. The default <kbd>content-box</kbd> excludes padding and border from width/height, while <kbd>border-box</kbd> includes them, making layout calculations more intuitive.",
|
||||
"task": "Add <kbd>box-sizing: border-box</kbd> to <kbd>.border-box</kbd> so padding and border are included in its width.",
|
||||
"previewHTML": "<div class=\"sizing-demo\"><div class=\"box content-box\">Content-box (default)</div><div class=\"box border-box\">Border-box</div></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .sizing-demo { display: flex; gap: 1rem; } .box { width: 200px; padding: 1rem; border: 4px solid teal; background: lightcyan; } .content-box { box-sizing: content-box; }",
|
||||
"task": "Add <kbd>box-sizing: border-box</kbd> to <kbd>.sized</kbd> so padding and border are included in its width.",
|
||||
"previewHTML": "<div class=\"sizing-demo\"><div class=\"box default\">Content-box (default)</div><div class=\"box sized\">Border-box</div></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .sizing-demo { display: flex; gap: 1rem; } .box { width: 200px; padding: 1rem; border: 4px solid teal; background: lightcyan; } .default { box-sizing: content-box; }",
|
||||
"sandboxCSS": "",
|
||||
"codePrefix": ".border-box {\n ",
|
||||
"codePrefix": ".sized {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"solution": "box-sizing: border-box;",
|
||||
@@ -115,11 +115,11 @@
|
||||
"id": "box-model-6",
|
||||
"title": "Margin Shorthand Notation",
|
||||
"description": "The margin shorthand can set all four sides at once. Two values set vertical (top/bottom) and horizontal (left/right) margins respectively.",
|
||||
"task": "Add <kbd>margin: 1rem 2rem</kbd> to <kbd>.shorthand-box</kbd> for 1rem top/bottom and 2rem left/right.",
|
||||
"previewHTML": "<div class=\"container\"><div class=\"shorthand-box\">This box needs margins: 1rem top/bottom, 2rem left/right</div></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .shorthand-box { background-color: honeydew; border: 2px solid mediumseagreen; padding: 1rem; }",
|
||||
"task": "Add <kbd>margin: 1rem 2rem</kbd> to <kbd>.spaced</kbd> for 1rem top/bottom and 2rem left/right.",
|
||||
"previewHTML": "<div class=\"container\"><div class=\"spaced\">This box needs margins: 1rem top/bottom, 2rem left/right</div></div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .container { background-color: whitesmoke; padding: 8px; } .spaced { background-color: honeydew; border: 2px solid mediumseagreen; padding: 1rem; }",
|
||||
"sandboxCSS": "",
|
||||
"codePrefix": ".shorthand-box {\n ",
|
||||
"codePrefix": ".spaced {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"solution": "margin: 1rem 2rem;",
|
||||
@@ -137,11 +137,11 @@
|
||||
"id": "box-model-7",
|
||||
"title": "Padding Shorthand Notation",
|
||||
"description": "Like margin, padding shorthand allows setting all sides at once. A single value applies to all four sides equally.",
|
||||
"task": "Add <kbd>padding: 1.5rem</kbd> to <kbd>.padding-box</kbd> to add equal padding on all sides.",
|
||||
"previewHTML": "<div class=\"padding-box\">This box needs equal padding on all sides</div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .padding-box { background-color: papayawhip; border: 2px solid orange; }",
|
||||
"task": "Add <kbd>padding: 1.5rem</kbd> to <kbd>.padded</kbd> to add equal padding on all sides.",
|
||||
"previewHTML": "<div class=\"padded\">This box needs equal padding on all sides</div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .padded { background-color: papayawhip; border: 2px solid orange; }",
|
||||
"sandboxCSS": "",
|
||||
"codePrefix": ".padding-box {\n ",
|
||||
"codePrefix": ".padded {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"solution": "padding: 1.5rem;",
|
||||
@@ -158,11 +158,11 @@
|
||||
"id": "box-model-8",
|
||||
"title": "Border on Specific Sides",
|
||||
"description": "For granular control, you can target specific sides with <kbd>border-top</kbd>, <kbd>border-right</kbd>, <kbd>border-bottom</kbd>, or <kbd>border-left</kbd>.",
|
||||
"task": "Add <kbd>border-bottom: 4px solid dodgerblue</kbd> to <kbd>.border-demo</kbd>.",
|
||||
"previewHTML": "<div class=\"border-demo\">This element needs only a bottom border</div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .border-demo { padding: 1rem; background-color: aliceblue; }",
|
||||
"task": "Add <kbd>border-bottom: 4px solid dodgerblue</kbd> to <kbd>.line</kbd>.",
|
||||
"previewHTML": "<div class=\"line\">This element needs only a bottom border</div>",
|
||||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .line { padding: 1rem; background-color: aliceblue; }",
|
||||
"sandboxCSS": "",
|
||||
"codePrefix": ".border-demo {\n ",
|
||||
"codePrefix": ".line {\n ",
|
||||
"initialCode": "",
|
||||
"codeSuffix": "\n}",
|
||||
"solution": "border-bottom: 4px solid dodgerblue;",
|
||||
|
||||
Reference in New Issue
Block a user