Basket Kitchen Sink

A simple kitchen sink / examples of all of the basket styles applied to elements

by Omar Quazi

HTML

<!DOCTYPE html>
<html lang="en" data-theme="light">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basket CSS Framework</title>

    <meta name="author" content="Omar Quazi">
    <meta name="description" content="A simple, minimalistic CSS framework">

    <!-- Basket CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/basket.min.css" integrity="sha256-diZpcL3ZwrWdOSgIkTd9Lk7xorxHS4mT0I1UEfFi9a0=" crossorigin="anonymous" />

  </head>

  <body>


    <div class="hero hero-lg bg-grey align-items-center text-center">
      <div class="hero-body">
        <div class="darkmode-switch">
          Dark Mode Toggle
          <label class="switch">
            <input class="darkmode-toggler" type="checkbox">
            <span class="slider round"></span>
          </label>
        </div>
        <h1>Basket Examples</h1>
        <p class="lead">
          This is <i>MOST</i> of Basket's functionality shown in a page. Many things are either missing or not shown because it would be repetitive.
        </p>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col col-12">
          <a id="jsfiddle"></a>
          <h3>JS Fiddle</h3>
          Check out the JS Fiddle for the entire Kitchen Sink / Examples page
          <br>
          <a target="_blank" href="https://jsfiddle.net/blacksector/cwLvae6k" class="btn btn-dark">JSFiddle Example</a>
          <a id="typography"></a>
          <h3>Typography</h3>
          <p>
            Basket uses the Inter font designed by Rasmus Andersson and hosted by Google Fonts. We import it
            directly into our
            files so that you don't need to add another line of html or css in your code. Basket intends to be a
            simple drop-in solution.
          </p>
          <p class="lead...

CSS

.navDownloadButton {
        background: var(--dark);
      }

      .navDownloadButton:hover {
        background: var(--dark-hover) !important;
      }

      pre,
      pre>code {
        background: var(--dark);
        white-space: pre-wrap;
      }

      #grid-sample>.row>div>div {
        background: var(--grey);
        border-radius: 5px;
        display: block;
        font-size: 1.2rem;
        font-weight: 600;
        height: 40px;
        letter-spacing: .1rem;
        line-height: 4rem;
        margin-bottom: 1.0rem;
        text-align: center;
        /*margin: 0.5rem;*/
      }

      .switch {
        position: relative;
        display: inline-block;
        width: 40px;
        height: 24px;
      }

      .switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }

      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
      }

      .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
      }

      input:checked+.slider {
        background-color: #2196F3;
      }

      input:focus+.slider {
        box-shadow: 0 0 1px #2196F3;
      }

      input:checked+.slider:before {
        -webkit-transform: translateX(16px);
        -ms-transform: translateX(16px);
        transform: translateX(16px);
      }

      /* Rounded sliders */
      .slider.round {
        border-radius: 34px;
      }

      .slider.round:before {
        border-radius: 50%;
      }

      .darkmode-switch {
        /* position: fixed; */
        padding: 2em;
        margin: 0 auto;
        text-align: right;
      }

      .colors>div {
        float: left;
        width: 125px;
       ...