|
394 | 394 | } |
395 | 395 | ] |
396 | 396 | }, |
| 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 | + }, |
397 | 528 | { |
398 | 529 | "language": "javascript", |
399 | 530 | "categoryName": "Basics", |
|
0 commit comments