Skip to content

Commit 6c98606

Browse files
actions-useractions-user
committed
Update consolidated snippets
1 parent e741ace commit 6c98606

File tree

1 file changed

+131
-0
lines changed

1 file changed

+131
-0
lines changed

‎public/consolidated/all_snippets.json

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -394,6 +394,137 @@
394394
}
395395
]
396396
},
397+
{
398+
"language": "html",
399+
"categoryName": "Basic Layouts",
400+
"snippets": [
401+
{
402+
"title": "Sticky Header-Footer Layout",
403+
"description": "Full-height layout with sticky header and footer, using modern viewport units and flexbox.",
404+
"code": [
405+
"<!DOCTYPE html>",
406+
"<html style=\"margin: 0\">",
407+
" <head>",
408+
" <style type=\"text/css\">",
409+
" body {",
410+
" margin: 0;",
411+
" display: flex;",
412+
" flex-direction: column;",
413+
" min-height: 100svh; /* Smallest viewport height */",
414+
" min-height: 100vh; /* Standard viewport height */",
415+
" min-height: 100dvh; /* Dynamic viewport height */",
416+
" min-height: 100lvh; /* Largest viewport height */",
417+
" background-color: red;",
418+
" }",
419+
"",
420+
" .header {",
421+
" position: sticky;",
422+
" top: 0;",
423+
" left: 0;",
424+
" right: 0;",
425+
" background-color: blue;",
426+
" }",
427+
"",
428+
" .body {",
429+
" flex-grow: 1;",
430+
" background-color: whitesmoke;",
431+
" }",
432+
"",
433+
" .footer {",
434+
" position: sticky;",
435+
" bottom: 0;",
436+
" left: 0;",
437+
" right: 0;",
438+
" background-color: blue;",
439+
" }",
440+
" </style>",
441+
" <head>",
442+
" <body>",
443+
" <div class=\"header\">header</div>",
444+
" <div class=\"body\">body/content</div>",
445+
" <div class=\"footer\">footer</div>",
446+
" </body>",
447+
"</html>"
448+
],
449+
"tags": [
450+
"html",
451+
"css",
452+
"layout",
453+
"sticky",
454+
"flexbox",
455+
"viewport"
456+
],
457+
"author": "GreenMan36"
458+
},
459+
{
460+
"title": "Grid Layout with Navigation",
461+
"description": "Full-height grid layout with header navigation using nesting syntax.",
462+
"code": [
463+
"<!DOCTYPE html>",
464+
"<html>",
465+
" <head>",
466+
" <style>",
467+
" body {",
468+
" margin: 0;",
469+
" min-height: 100vh;",
470+
" display: grid;",
471+
" grid-template-rows: auto 1fr auto;",
472+
" background: red; /* Shouldn't be visible */",
473+
" }",
474+
"",
475+
" .header {",
476+
" background: #3b82f6;",
477+
" padding: 1rem;",
478+
" display: flex;",
479+
" & .menu {",
480+
" margin-left: auto;",
481+
" }",
482+
" & .menu ul {",
483+
" margin-left: auto;",
484+
" display: flex;",
485+
" gap: 1rem;",
486+
" }",
487+
" }",
488+
"",
489+
" .main {",
490+
" background: #f3f4f6;",
491+
" padding: 1rem;",
492+
" }",
493+
"",
494+
" .footer {",
495+
" background: #1f2937;",
496+
" padding: 1rem;",
497+
" }",
498+
" </style>",
499+
" </head>",
500+
" <body>",
501+
" <div class=\"header\">",
502+
" Header",
503+
" <nav class=\"menu\">",
504+
" <ul>",
505+
" <li><a href=\"#\">Home</a></li>",
506+
" <li><a href=\"#\">About</a></li>",
507+
" <li><a href=\"#\">Contact</a></li>",
508+
" </ul>",
509+
" </nav>",
510+
" </div>",
511+
" <div class=\"main\">Main Content</div>",
512+
" <div class=\"footer\">Footer</div>",
513+
" </body>",
514+
"</html>"
515+
],
516+
"tags": [
517+
"html",
518+
"css",
519+
"layout",
520+
"sticky",
521+
"grid",
522+
"full-height"
523+
],
524+
"author": "GreenMan36"
525+
}
526+
]
527+
},
397528
{
398529
"language": "javascript",
399530
"categoryName": "Basics",

0 commit comments

Comments
 (0)