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

This is my testing page for the grid used on this site, it shows elements and other things for use on the grid and other general formatting.

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>

Elements

Search Code
Search Code by entering your search text above.

Introduction

need to prefix all the elements with dark-mode and light-mode e.g the card . also add a code element

A Primary Button

todo's
buttons
card
dark mode

Fix UL Margins

  • m# : margin pixels number, set all margins of an element
  • mt# : margin top pixels
  • mb# : margin bottom pixels
  • ml# : margin left pixels
  • mr# : margin right pixels

Normal grid-x

large-4 cell
large-6 cell
large-2 cell
large-2 cell
large-6 cell
large-4 cell

no-wrap grid-x

large-4 cell
large-6 cell
large-2 cell
large-2 cell
large-6 cell
large-4 cell

no-wrap grid-x-no-gap

large-4 cell
large-6 cell
large-2 cell
large-2 cell
large-6 cell
large-4 cell

no-wrap grid-x all sizes

large-1
large-2 cell
large-3 cell
large-4 cell
large-5 cell
large-6 cell
large-7 cell
large-8 cell
large-9 cell
large-10 cell
large-11 cell
large-12 cell

Page Views

This page has been viewed 68 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

âĪðŸ‘Đ‍ðŸ’ŧðŸ•đ

Random Quote
You want to be the best, you MUST put the long yards in! Nothing comes easy in life so stop wishing and start DOING! So many people would rather bitch and moan than help themselves. Dont be one of those negative drainers, start today, make a small change and keep going forwards with this attitude!
Unknown