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

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

View Demo Full Screen View Demo New Tab

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

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>