Cuicui logoCuicui - Best all in one React component library
Star Icon869Star Cuicui on GitHub
  • Why another library?

  • Getting Started

  • Contribute

  • Changelog

  • Sponsored by Armony Logo

    Armony Logo

    A Single Subscription. Unlimited AI Power.

    By Damien Schneider

    View my GitHub
    cuicui.day/snippets/html

    Grid Layout with Navigation

    csslayoutstickygridfull-height
    <!DOCTYPE html>
    <html>
      <head>
        <style>
          body {
            margin: 0;
            min-height: 100vh;
            display: grid;
            grid-template-rows: auto 1fr auto;
            background: red; /* Shouldn't be visible */
          }
    
          .header {
            background: #3b82f6;
            padding: 1rem;
            display: flex;
            & .menu {
              margin-left: auto;
            }
            & .menu ul {
              margin-left: auto;
              display: flex;
              gap: 1rem;
            }
          }
    
          .main {
            background: #f3f4f6;
            padding: 1rem;
          }
    
          .footer {
            background: #1f2937;
            padding: 1rem;
          }
        </style>
      </head>
      <body>
        <div class="header">
          Header
          <nav class="menu">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </nav>
        </div>
        <div class="main">Main Content</div>
        <div class="footer">Footer</div>
      </body>
    </html>
    
    ...

    Sticky Header-Footer Layout

    csslayoutstickyflexboxviewport
    <!DOCTYPE html>
    <html style="margin: 0">
      <head>
        <style type="text/css">
          body {
            margin: 0;
            display: flex;
            flex-direction: column;
            min-height: 100svh; /* Smallest viewport height */
            min-height: 100vh;  /* Standard viewport height */
            min-height: 100dvh; /* Dynamic viewport height */
            min-height: 100lvh; /* Largest viewport height */
            background-color: red;
          }
    
          .header {
            position: sticky;
            top: 0;
            left: 0;
            right: 0;
            background-color: blue;
          }
    
          .body {
            flex-grow: 1;
            background-color: whitesmoke;
          }
    
          .footer {
            position: sticky;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: blue;
          }
        </style>
      <head>
      <body>
        <div class="header">header</div>
        <div class="body">body/content</div>
        <div class="footer">footer</div>
      </body>
    </html>
    
    ...
    Star Icon869Star Cuicui on GitHub