test page for the custom css 12 grid used on this site

HTML

<div class='bg-dark overflow-hidden mb10 p5 shadow'>
      <div class='grid-x'>
        <div class='large-2 cell'>CSS Grid Testing</div>
        <div class='large-9 cell'>
          <ul class="navbar-nav mr-auto">
                  <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="dropdowncode" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="A Collection of Code">Code</a>
            <div class="dropdown-menu" aria-labelledby="dropdowncode">

                    <a href="/list-category/code/" class="dropdown-item">List Code by Category</a>
                    <a href="/list/code/" class="dropdown-item">List Code</a>
                    <a href="/list-table/code/" class="dropdown-item">List Table Code</a>
                    <a href="/search/code/" class="dropdown-item">Search Code</a>


              <!-- <a class="dropdown-item" href="#">Action</a> -->
            </div>
          </li><li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="dropdowncontent" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="A Collection of Content">Content</a>
            <div class="dropdown-menu" aria-labelledby="dropdowncontent">

                    <a href="/list-category/content/" class="dropdown-item">List Content by Category</a>
                    <a href="/list/content/" class="dropdown-item">List Content</a>
                    <a href="/list-table/content/" class="dropdown-item">List Table Content</a>
                    <a href="/search/content/" class="dropdown-item">Search Content</a>


              <!-- <a class="dropdown-item" href="#">Action</a> -->
            </div>
          </li><li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="dropdowncoredocs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Documentation on Core">Core Docs</a>
            <div class="dropdown-menu" aria-labelledby="dropdowncoredocs">

                    <a href="/list-category/coredocs/" class="dropdown-item">List Core Docs by Category</a>
                    <a href="/list/coredocs/" class="dropdown-item">List Core Docs</a>
                    <a href="/list-table/coredocs/" class="dropdown-item">List Table Core Docs</a>
                    <a href="/search/coredocs/" class="dropdown-item">Search Core Docs</a>


              <!-- <a class="dropdown-item" href="#">Action</a> -->
            </div>
          </li><li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="dropdownlinx" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="A Collection of Bookmarks (linx)">Linx</a>
            <div class="dropdown-menu" aria-labelledby="dropdownlinx">

                    <a href="/list-category/linx/" class="dropdown-item">List Linx by Category</a>
                    <a href="/list/linx/" class="dropdown-item">List Linx</a>
                    <a href="/list-table/linx/" class="dropdown-item">List Table Linx</a>
                    <a href="/search/linx/" class="dropdown-item">Search Linx</a>


              <!-- <a class="dropdown-item" href="#">Action</a> -->
            </div>
          </li><li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="dropdownphones" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="A Collection of Phones">Phones</a>
            <div class="dropdown-menu" aria-labelledby="dropdownphones">

                    <a href="/list-category/phones/" class="dropdown-item">List Phones by Category</a>
                    <a href="/list/phones/" class="dropdown-item">List Phones</a>
                    <a href="/list-table/phones/" class="dropdown-item">List Table Phones</a>
                    <a href="/search/phones/" class="dropdown-item">Search Phones</a>


              <!-- <a class="dropdown-item" href="#">Action</a> -->
            </div>
          </li><li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="dropdowntv" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="A Collection of TV Shows from the 80s and 90s">TV Shows</a>
            <div class="dropdown-menu" aria-labelledby="dropdowntv">

                    <a href="/list-category/tv/" class="dropdown-item">List TV Shows by Category</a>
                    <a href="/list/tv/" class="dropdown-item">List TV Shows</a>
                    <a href="/list-table/tv/" class="dropdown-item">List Table TV Shows</a>
                    <a href="/search/tv/" class="dropdown-item">Search TV Shows</a>


              <!-- <a class="dropdown-item" href="#">Action</a> -->
            </div>
          </li>
                </ul>
        </div>
        <div class='large-1 cell'>
          <a href="javascript:void()" class="btn btn-outline-info btn-lg ml-auto font-weight-bold" id="theme-toggler" onclick="toggleTheme()">🌙 Dark</a>
        </div>
      </div>
    </div>

    <div class='wrap mb10'>
      <div class='grid-x'>
        <div class='large-3 cell'>
          <div class='left-nav border-radius-10 card shadow mb10'>
            <div class='card-header p10 pl15'>
              <h3>Elements</h3>
            </div>
            <div class="p15">
              <ul>
                <li>
                  <a href="#reset">Reset</a>
                </li>
              </ul>
            </div>
          </div>

          <div class="card">
            <h5 class="card-header">Search Code</h5>
            <div class="card-body">
              <form class="search-form mb-3" method="post" action="/search/code/">
                <div class="form-group">
                  <input type="search" id="search" name="search" class="form-control" aria-describedby="search_help" placeholder="Search Text">
                	<input type="hidden" name="p" value="/search/code/">
                  <small id="emailHelp" class="form-text text-muted">Search Code by entering your search text above. </small>
                </div>
                <button type="submit" class="btn btn-primary">Search</button>
              </form>
            </div>
          </div>
                    
        </div>
        <div class='large-9 cell'>
          <div class='content'>
            <div class='card border-radius-10 shadow'>
              <div class='card-header p10 pl15'>
                <h1>Introduction</h1>
              </div>
              <div class="p15">
                <p>
                  need to prefix all the elements with <code>dark-mode</code> and light-mode e.g the card
                . also add a code element
                </p>

                <p>
                  <a href="#!" class='btn btn-primary'>A Primary Button</a>
                </p>

                <p>
                  todo's<br />
                  buttons<br />
                  card<br />
                  dark mode<br />
                  <img src='https://i.imgur.com/bn5oiqT.png' /><br />
                </p>

                <h2>Fix UL Margins</h2>
                <ul>
                <li>m# : margin pixels number, set all margins of an element</li>
                <li>mt# : margin top pixels</li>
                <li>mb# : margin bottom pixels</li>
                <li>ml# : margin left pixels</li>
                <li>mr# : margin right pixels</li>
                </ul>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>



    <div class='wrap mb10'>
      <div class='grid-x'>
        <div class='large-12 cell'>
          <h1 class='mb10 mt10'>Normal grid-x</h1>
        </div>
        <div class='large-4 cell'>
          <div class='test-box'>large-4 cell</div>
        </div>
        <div class='large-6 cell'>
          <div class='test-box'>large-6 cell</div>
        </div>
        <div class='large-2 cell'>
          <div class='test-box'>large-2 cell</div>
        </div>
        <div class='large-2 cell'>
          <div class='test-box'>large-2 cell</div>
        </div>
        <div class='large-6 cell'>
          <div class='test-box'>large-6 cell</div>
        </div>
        <div class='large-4 cell'>
          <div class='test-box'>large-4 cell</div>
        </div>
      </div>
    </div>

    <div class='no-wrap pl5 pr5 mb10'>
      <div class='grid-x'>
        <div class='large-12 cell'>
          <h1 class='mb10 mt10'>no-wrap grid-x</h1>
        </div>
        <div class='large-4 cell'>
          <div class='test-box'>large-4 cell</div>
        </div>
        <div class='large-6 cell'>
          <div class='test-box'>large-6 cell</div>
        </div>
        <div class='large-2 cell'>
          <div class='test-box'>large-2 cell</div>
        </div>
        <div class='large-2 cell'>
          <div class='test-box'>large-2 cell</div>
        </div>
        <div class='large-6 cell'>
          <div class='test-box'>large-6 cell</div>
        </div>
        <div class='large-4 cell'>
          <div class='test-box'>large-4 cell</div>
        </div>
      </div>
    </div>

    <div class='no-wrap pl5 pr5 mb10'>
      <div class='grid-x-no-gap'>
        <div class='large-12 cell'>
          <h1 class='mb10 mt10'>no-wrap grid-x-no-gap</h1>
        </div>
        <div class='large-4 cell'>
          <div class='test-box'>large-4 cell</div>
        </div>
        <div class='large-6 cell'>
          <div class='test-box'>large-6 cell</div>
        </div>
        <div class='large-2 cell'>
          <div class='test-box'>large-2 cell</div>
        </div>
        <div class='large-2 cell'>
          <div class='test-box'>large-2 cell</div>
        </div>
        <div class='large-6 cell'>
          <div class='test-box'>large-6 cell</div>
        </div>
        <div class='large-4 cell'>
          <div class='test-box'>large-4 cell</div>
        </div>
      </div>
    </div>

    <div class='no-wrap pl5 pr5 mb10'>
      <div class='grid-x'>
        <div class='large-12 cell'>
          <h1 class='mb10 mt10'>no-wrap grid-x all sizes</h1>
        </div>
        <div class='large-1 cell'>
          <div class='test-box'>large-1</div>
        </div>
        <div class='large-2 cell'>
          <div class='test-box'>large-2 cell</div>
        </div>
        <div class='large-3 cell'>
          <div class='test-box'>large-3 cell</div>
        </div>
        <div class='large-4 cell'>
          <div class='test-box'>large-4 cell</div>
        </div>
        <div class='large-5 cell'>
          <div class='test-box'>large-5 cell</div>
        </div>
        <div class='large-6 cell'>
          <div class='test-box'>large-6 cell</div>
        </div>
        <div class='large-7 cell'>
          <div class='test-box'>large-7 cell</div>
        </div>
        <div class='large-8 cell'>
          <div class='test-box'>large-8 cell</div>
        </div>
        <div class='large-9 cell'>
          <div class='test-box'>large-9 cell</div>
        </div>
        <div class='large-10 cell'>
          <div class='test-box'>large-10 cell</div>
        </div>
        <div class='large-11 cell'>
          <div class='test-box'>large-11 cell</div>
        </div>
        <div class='large-12 cell'>
          <div class='test-box'>large-12 cell</div>
        </div>
      </div>
    </div>