html

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

Posted in html
15
5:38 am, December 23, 2020

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>
CSS Grid Testing
🌙 Dark

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
Posted in html
15
5:38 am, December 23, 2020

View Statistics
This Week
181
This Month
433
This Year
0

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in html
content editable p tag with spell check enabled get directions from google maps form embed Common and Uncommon Meta Tag's and Social Meta Tags Input Suggestions using a datalist Add custom symbol to ul li list and align text items using the kbd html tag twitter social sharing meta tags test image url that always changes unsplash placeholder set the amount of lines to show in a textarea field Scroll down indicator css javascript and html a page with two images Aligning Images in TinyMCE or Floating them left and right (code) test page for the custom css 12 grid used on this site easy twitter embed code Custom JS Tabs - No Jquery or Jquery UI scroll to top html css and js hide parts of a form until the 1st item is selected load a youtube video in a fancybox modal add google captcha to enable and disable a form button template for testing and live reloading html files toggle div function with chevron up down toggle Bootstrap Card Formatting HTML and CSS - Header and Footer Applied Accessibility - Tab Index Applied Accessibility - Access Keys Dropdown Box with Searchable Text meta keywords tag meta description tag favicon code meta tag foundation includes cdnjs Form elements New Zealand region list video embed no controls video embed tag video embed full screen all screen sizes del youtube embed iframe emoji data take full page screenshot screencapture using chrome dev tools flexbox layout template simple dropdown navigation ul li css responsive viewport meta tag (responsive meta tag) youtube embed no controls auto play iframe make all links target new window lorem ipsum copy image to data uri using chrome base64 encode youtube extract thumbnail from video link using foundation 6.4 xy grid basics meta refresh reload page layout homepage random emojis copy and paste link to an external stylesheet
Related Search Terms
html hidden 2
html text 1
html css grid 6
html custom 7
html mode 3
html above 5
html order 8
html post 8
html font 10
html pop 10
html onclick 8
html the 8
html element 9
html placeholder 17
html email 16
html drop 21
html Small 21
html Shadow 20
html Phones 10
html Phone 17
html Other 20
html Element 14
html Custom 20
html theme 21
html category 28
html Javascript 16
html Email 20
html CSS 17
html large 23
html test 27
html java 20
html things 27
html page 19
html list 26
html content 28
html name 28
html grid-x 31
html thing 30
html Document 24
html grid 35
html action 28
html mail 29
html weight 40
html other 38
html car 42
html menu 41
html input 43
html item 41
html pre 41
html code 44
html gins 34
html ones 29
html Theme 39
html false 46
html search 45
html normal 45
html shows 55
html value 48
html form 49
html Order 54
html testing 53
html phones 28
html button 45
html overflow 43
html from 43
html border 51
html small 46
html Placeholder 48
html this 36
html your 57
html collection 40
html help 35
html toggle 46
html document 53
html Collection 36
html margin 61
html header 48
html href 55
html card 56
html click 60
html Testing 65
html flow 59
html dark 52
html shadow 63
html JavaScript 59
html head 67
html dark mode 51
html html 68
html core 94
html css 58
html custom css 12 grid 63
html phone 79
html asp 99
html javascript 61
Other Categories in Code
c testing apache apps asp bat bootstrap bootstrap templates core css css grid design elements fancybox fonts foundation framework gimp git html icons ideas images javascript jquery js linux mac nginx node php php functions php simple html dom pi400 python react sections site bugs site documentation sql sqlite sublime svg templates tools virtual box webdev windows wordpress
Code Articles Forster Links Tools
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.

Join me on Substack if you want me to send you a collection of the things i have done or found or read for the week. Or follow me on twitter if you prefer, i dont post much but i probably should!

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

Random Quote
When I realized that, no individual step is hard in any process. Building this airport I'm standing in right now started with a guy writing the architectural plans on paper. That's not hard for him to do. Then laying the first beam isn't had. The whole thing is really hard. So, just take each step kind of piece by piece and when I was able to do that and stop trying to chase this prize and started putting in the work, things just started coming together.
Unknown