Broken styles #48

ShaneSaw1705 · 2024-12-29T11:08:21Z

ShaneSaw1705
Dec 29, 2024

the older version worked great but now when I install it im getting an issue where the styling is broken e.g bad harsh borders around inputs that used to look amazing and the buttons just look wrong. Is this me?

sveltecult · 2024-12-29T11:30:38Z

sveltecult
Dec 29, 2024
Maintainer

What version? The 2.0 is not yet ready. It's just a preview of what's coming. Also, please add screenshots. Thanks.

1 reply

ShaneSaw1705 Dec 29, 2024
Author

im using version 1.1.0 - ive tried using the cdn and the npm install and im still stuck with these colors. also I have tried it served from a go server and my current laravel proj

sveltecult · 2024-12-29T23:33:37Z

sveltecult
Dec 29, 2024
Maintainer

Without any code provided, I'm really just guessing here. Also, everything works fine and I haven't changed anything since September for v1.1. Here, try my kitchen sink. It's a bit dirty and outdated but will give you idea on what's not working for you.

My hunch is you forgot this section on your <head> tag:

<script>
  const htmlElement = document.documentElement;

  if (
    localStorage.getItem("mode") === "dark" ||
    (!("mode" in localStorage) &&
      window.matchMedia("(prefers-color-scheme: dark)").matches)
  ) {
    htmlElement.classList.add("dark");
  } else {
    htmlElement.classList.remove("dark");
  }

  htmlElement.classList.add(
    localStorage.getItem("theme") || "uk-theme-zinc",
  );
</script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Franken UI</title>
    <link rel="preconnect" href="https://rsms.me/" />
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />

    <style>
      :root {
        font-family: Inter, sans-serif;
        font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */
      }
      @supports (font-variation-settings: normal) {
        :root {
          font-family: InterVariable, sans-serif;
        }
      }
    </style>

   <link
  rel="stylesheet"
  href="https://unpkg.com/franken-ui@1.1.0/dist/css/core.min.css"
/>

    <script src="https://unpkg.com/franken-ui@1.1.0/dist/js/core.iife.js" type="module"></script>
<script src="https://unpkg.com/franken-ui@1.1.0/dist/js/icon.iife.js" type="module"></script>
    
    <script>
  const htmlElement = document.documentElement;

  if (
    localStorage.getItem("mode") === "dark" ||
    (!("mode" in localStorage) &&
      window.matchMedia("(prefers-color-scheme: dark)").matches)
  ) {
    htmlElement.classList.add("dark");
  } else {
    htmlElement.classList.remove("dark");
  }

  htmlElement.classList.add(
    localStorage.getItem("theme") || "uk-theme-zinc",
  );
</script>


  </head>
  <body class="bg-background text-foreground">
    <!-- START CODING HERE -->
    <div
      class="uk-flex uk-flex-center bg-background uk-padding-small border-border"
      uk-sticky
      style="border-bottom-width: 1px"
    >
      <button class="uk-button uk-button-primary" id="theme-toggle">
        Toggle me
      </button>
    </div>

    <div class="uk-margin-top uk-margin-bottom uk-container">
      <ul class="uk-margin uk-accordion" uk-accordion>
        <li class="uk-open">
          <a class="uk-accordion-title" href>
            Item 1
            <span
              class="uk-accordion-icon"
              uk-icon="icon: chevron-down; ratio: 0.8"
            ></span>
          </a>
          <div class="uk-accordion-content">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
        </li>
        <li>
          <a class="uk-accordion-title" href>
            Item 2
            <span
              class="uk-accordion-icon"
              uk-icon="icon: chevron-down; ratio: 0.8"
            ></span>
          </a>
          <div class="uk-accordion-content">
            <p>
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
              reprehenderit.
            </p>
          </div>
        </li>
        <li>
          <a class="uk-accordion-title" href>
            Item 3
            <span
              class="uk-accordion-icon"
              uk-icon="icon: chevron-down; ratio: 0.8"
            ></span>
          </a>
          <div class="uk-accordion-content">
            <p>
              Duis aute irure dolor in reprehenderit in voluptate velit esse
              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
              cupidatat proident.
            </p>
          </div>
        </li>
      </ul>

      <div class="uk-margin uk-alert" uk-alert>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </div>

      <div class="uk-margin uk-alert uk-alert-danger" uk-alert>
        <div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt.
        </div>
      </div>

      <div class="uk-margin uk-alert">
        <svg
          width="15"
          height="15"
          viewBox="0 0 15 15"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          class="h-4 w-4"
        >
          <path
            d="M6.85357 3.85355L7.65355 3.05353C8.2981 2.40901 9.42858 1.96172 10.552 1.80125C11.1056 1.72217 11.6291 1.71725 12.0564 1.78124C12.4987 1.84748 12.7698 1.97696 12.8965 2.10357C13.0231 2.23018 13.1526 2.50125 13.2188 2.94357C13.2828 3.37086 13.2779 3.89439 13.1988 4.44801C13.0383 5.57139 12.591 6.70188 11.9464 7.34645L7.49999 11.7929L6.35354 10.6465C6.15827 10.4512 5.84169 10.4512 5.64643 10.6465C5.45117 10.8417 5.45117 11.1583 5.64643 11.3536L7.14644 12.8536C7.34171 13.0488 7.65829 13.0488 7.85355 12.8536L8.40073 12.3064L9.57124 14.2572C9.65046 14.3893 9.78608 14.4774 9.9389 14.4963C10.0917 14.5151 10.2447 14.4624 10.3535 14.3536L12.3535 12.3536C12.4648 12.2423 12.5172 12.0851 12.495 11.9293L12.0303 8.67679L12.6536 8.05355C13.509 7.19808 14.0117 5.82855 14.1887 4.58943C14.2784 3.9618 14.2891 3.33847 14.2078 2.79546C14.1287 2.26748 13.9519 1.74482 13.6035 1.39645C13.2552 1.04809 12.7325 0.871332 12.2045 0.792264C11.6615 0.710945 11.0382 0.721644 10.4105 0.8113C9.17143 0.988306 7.80189 1.491 6.94644 2.34642L6.32322 2.96968L3.07071 2.50504C2.91492 2.48278 2.75773 2.53517 2.64645 2.64646L0.646451 4.64645C0.537579 4.75533 0.484938 4.90829 0.50375 5.0611C0.522563 5.21391 0.61073 5.34954 0.742757 5.42876L2.69364 6.59928L2.14646 7.14645C2.0527 7.24022 2.00002 7.3674 2.00002 7.50001C2.00002 7.63261 2.0527 7.75979 2.14646 7.85356L3.64647 9.35356C3.84173 9.54883 4.15831 9.54883 4.35357 9.35356C4.54884 9.1583 4.54884 8.84172 4.35357 8.64646L3.20712 7.50001L3.85357 6.85356L6.85357 3.85355ZM10.0993 13.1936L9.12959 11.5775L11.1464 9.56067L11.4697 11.8232L10.0993 13.1936ZM3.42251 5.87041L5.43935 3.85356L3.17678 3.53034L1.80638 4.90074L3.42251 5.87041ZM2.35356 10.3535C2.54882 10.1583 2.54882 9.8417 2.35356 9.64644C2.1583 9.45118 1.84171 9.45118 1.64645 9.64644L0.646451 10.6464C0.451188 10.8417 0.451188 11.1583 0.646451 11.3535C0.841713 11.5488 1.1583 11.5488 1.35356 11.3535L2.35356 10.3535ZM3.85358 11.8536C4.04884 11.6583 4.04885 11.3417 3.85359 11.1465C3.65833 10.9512 3.34175 10.9512 3.14648 11.1465L1.14645 13.1464C0.95119 13.3417 0.951187 13.6583 1.14645 13.8535C1.34171 14.0488 1.65829 14.0488 1.85355 13.8536L3.85358 11.8536ZM5.35356 13.3535C5.54882 13.1583 5.54882 12.8417 5.35356 12.6464C5.1583 12.4512 4.84171 12.4512 4.64645 12.6464L3.64645 13.6464C3.45119 13.8417 3.45119 14.1583 3.64645 14.3535C3.84171 14.5488 4.1583 14.5488 4.35356 14.3535L5.35356 13.3535ZM9.49997 6.74881C10.1897 6.74881 10.7488 6.1897 10.7488 5.5C10.7488 4.8103 10.1897 4.25118 9.49997 4.25118C8.81026 4.25118 8.25115 4.8103 8.25115 5.5C8.25115 6.1897 8.81026 6.74881 9.49997 6.74881Z"
            fill="currentColor"
            fill-rule="evenodd"
            clip-rule="evenodd"
          ></path>
        </svg>
        <div class="uk-alert-title">Heads up!</div>
        <div class="uk-alert-description">
          You can add components to your app using the cli.
        </div>
      </div>

      <div
        class="uk-margin uk-child-width-1-2 uk-child-width-1-4@s uk-grid-match"
        uk-grid
      >
        <div class="uk-animation-toggle" tabindex="0">
          <div class="uk-card uk-card-default uk-card-body uk-animation-fade">
            <p class="uk-text-center">Fade</p>
          </div>
        </div>
        <div class="uk-animation-toggle" tabindex="0">
          <div
            class="uk-card uk-card-default uk-card-body uk-animation-scale-up"
          >
            <p class="uk-text-center">Scale Up</p>
          </div>
        </div>
        <div class="uk-animation-toggle" tabindex="0">
          <div
            class="uk-card uk-card-default uk-card-body uk-animation-scale-down"
          >
            <p class="uk-text-center">Scale Down</p>
          </div>
        </div>
        <div class="uk-animation-toggle" tabindex="0">
          <div class="uk-card uk-card-default uk-card-body uk-animation-shake">
            <p class="uk-text-center">Shake</p>
          </div>
        </div>
        <div class="uk-animation-toggle" tabindex="0">
          <div
            class="uk-card uk-card-default uk-card-body uk-animation-slide-left"
          >
            <p class="uk-text-center">Left</p>
          </div>
        </div>
        <div class="uk-animation-toggle" tabindex="0">
          <div
            class="uk-card uk-card-default uk-card-body uk-animation-slide-top"
          >
            <p class="uk-text-center">Top</p>
          </div>
        </div>
        <div class="uk-animation-toggle" tabindex="0">
          <div
            class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom"
          >
            <p class="uk-text-center">Bottom</p>
          </div>
        </div>
        <div class="uk-animation-toggle" tabindex="0">
          <div
            class="uk-card uk-card-default uk-card-body uk-animation-slide-right"
          >
            <p class="uk-text-center">Right</p>
          </div>
        </div>
        <div class="uk-animation-toggle" tabindex="0">
          <div
            class="uk-card uk-card-default uk-card-body uk-animation-slide-left-small"
          >
            <p class="uk-text-center">Left Small</p>
          </div>
        </div>
        <div class="uk-animation-toggle" tabindex="0">
          <div
            class="uk-card uk-card-default uk-card-body uk-animation-slide-top-small"
          >
            <p class="uk-text-center">Top Small</p>
          </div>
        </div>
        <div class="uk-animation-toggle" tabindex="0">
          <div
            class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-small"
          >
            <p class="uk-text-center">Bottom Small</p>
          </div>
        </div>
        <div class="uk-animation-toggle" tabindex="0">
          <div
            class="uk-card uk-card-default uk-card-body uk-animation-slide-right-small"
          >
            <p class="uk-text-center">Right Small</p>
          </div>
        </div>
        <div class="uk-animation-toggle" tabindex="0">
          <div
            class="uk-card uk-card-default uk-card-body uk-animation-slide-left-medium"
          >
            <p class="uk-text-center">Left Medium</p>
          </div>
        </div>
        <div class="uk-animation-toggle" tabindex="0">
          <div
            class="uk-card uk-card-default uk-card-body uk-animation-slide-top-medium"
          >
            <p class="uk-text-center">Top Medium</p>
          </div>
        </div>
        <div class="uk-animation-toggle" tabindex="0">
          <div
            class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-medium"
          >
            <p class="uk-text-center">Bottom Medium</p>
          </div>
        </div>
        <div class="uk-animation-toggle" tabindex="0">
          <div
            class="uk-card uk-card-default uk-card-body uk-animation-slide-right-medium"
          >
            <p class="uk-text-center">Right Medium</p>
          </div>
        </div>
      </div>

      <div class="uk-margin">
        <span class="uk-badge">1</span>
        <span class="uk-badge uk-badge-primary">100</span>
        <span class="uk-badge uk-badge-secondary">100</span>
        <span class="uk-badge uk-badge-danger">100</span>
      </div>

      <div class="uk-margin">
        <nav aria-label="Breadcrumb">
          <ul class="uk-breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Templates</a></li>
            <li class="uk-disabled"><a>Disabled Category</a></li>
            <li><span>Franken UI</span></li>
          </ul>
        </nav>
      </div>

      <div class="uk-margin">
        <button class="uk-button uk-button-default">Default</button>
        <button class="uk-button uk-button-primary">Primary</button>
        <button class="uk-button uk-button-secondary">Secondary</button>
        <button class="uk-button uk-button-danger">Danger</button>
        <button class="uk-button uk-button-text">Text</button>
        <button class="uk-button uk-button-link">Link</button>
      </div>

      <div class="uk-margin">
        <div class="uk-inline">
          <button class="uk-button uk-button-default" type="button">
            Dropdown
          </button>
          <div uk-dropdown>
            <ul class="uk-nav uk-dropdown-nav">
              <li class="uk-active"><a href="#">Active</a></li>
              <li><a href="#">Item</a></li>
              <li class="uk-nav-header">Header</li>
              <li><a href="#">Item</a></li>
              <li><a href="#">Item</a></li>
              <li class="uk-nav-divider"></li>
              <li><a href="#">Item</a></li>
            </ul>
          </div>
        </div>
      </div>

      <div class="uk-card uk-margin-auto" style="max-width: 350px">
        <div class="uk-card-header uk-padding-small">
          <h3 class="uk-card-title">Create project</h3>
          <p class="text-sm text-muted-foreground">
            Deploy your new project in one-click.
          </p>
        </div>
        <div class="uk-card-body uk-padding-small">
          <div class="">
            <label class="uk-form-label" for="name">Name</label>
            <input
              class="uk-input"
              id="name"
              type="text"
              aria-describedby="name-help-block"
              placeholder="Name"
            />
            <div id="name-help-block" class="uk-margin-small-top uk-form-help">
              The name of your project.
            </div>
          </div>

          <div class="uk-margin">
            <label class="uk-form-label" for="framework">Framework</label>
            <select class="uk-select" name="framework" id="framework">
              <option value="sveltekit">Sveltekit</option>
              <option value="sveltekit">Astro</option>
            </select>
          </div>
        </div>

        <div class="uk-card-footer uk-padding-small uk-flex uk-flex-between">
          <button class="uk-button uk-button-default">Cancel</button>
          <button class="uk-button uk-button-primary">Deploy</button>
        </div>
      </div>

      <hr class="uk-margin uk-divider-icon" />

      <form class="uk-margin">
        <fieldset class="uk-fieldset">
          <legend class="uk-legend">Legend</legend>

          <div class="uk-margin">
            <input
              class="uk-input"
              type="text"
              placeholder="Input"
              aria-label="Input"
            />
          </div>

          <div class="uk-margin">
            <select class="uk-select" aria-label="Select">
              <option>Option 01</option>
              <option>Option 02</option>
            </select>
          </div>

          <div class="uk-margin">
            <textarea
              class="uk-textarea"
              rows="5"
              placeholder="Textarea"
              aria-label="Textarea"
            ></textarea>
          </div>

          <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid">
            <label
              ><input class="uk-radio" type="radio" name="radio2" checked />
              A</label
            >
            <label
              ><input class="uk-radio" type="radio" name="radio2" /> B</label
            >
          </div>

          <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid">
            <label
              ><input class="uk-checkbox" type="checkbox" checked /> A</label
            >
            <label><input class="uk-checkbox" type="checkbox" /> B</label>
          </div>

          <div class="uk-margin">
            <input
              class="uk-range"
              type="range"
              value="2"
              min="0"
              max="10"
              step="0.1"
              aria-label="Range"
            />
          </div>
        </fieldset>
      </form>

      <h1 class="uk-heading-small">Small</h1>

      <h1 class="uk-heading-medium">Medium</h1>

      <h1 class="uk-heading-large">Large</h1>

      <h1 class="uk-heading-xlarge">X-Large</h1>

      <h1 class="uk-heading-2xlarge">2X-Large</h1>

      <h1 class="uk-heading-3xlarge">3X-Large</h1>

      <h1 class="uk-heading-divider">Heading Divider</h1>

      <h1 class="uk-heading-bullet">Heading Bullet</h1>

      <h1 class="uk-heading-line"><span>Heading Line</span></h1>

      <h1 class="uk-heading-line uk-text-center"><span>Heading Line</span></h1>

      <h1 class="uk-heading-line uk-text-right"><span>Heading Line</span></h1>

      <div class="uk-margin">
        <a
          href=""
          class="uk-icon-button uk-margin-small-right"
          uk-icon="icon: instagram; ratio: 0.8"
        ></a>
        <a
          href=""
          class="uk-icon-button uk-margin-small-right"
          uk-icon="icon: facebook; ratio: 0.8"
        ></a>
        <a
          href=""
          class="uk-icon-button"
          uk-icon="icon: youtube; ratio: 0.8"
        ></a>
      </div>

      <ul class="uk-margin uk-iconnav">
        <li><a href="#" uk-icon="icon: plus; ratio: 0.8"></a></li>
        <li><a href="#" uk-icon="icon: file-edit; ratio: 0.8"></a></li>
        <li><a href="#" uk-icon="icon: copy; ratio: 0.8"></a></li>
        <li>
          <a href="#" uk-icon="icon: bag; ratio: 0.8"></a>
        </li>
      </ul>

      <ul class="uk-margin uk-iconnav uk-iconnav-vertical">
        <li><a href="#" uk-icon="icon: plus; ratio: 0.8"></a></li>
        <li><a href="#" uk-icon="icon: file-edit; ratio: 0.8"></a></li>
        <li><a href="#" uk-icon="icon: copy; ratio: 0.8"></a></li>
        <li>
          <a href="#" uk-icon="icon: bag; ratio: 0.8"></a>
        </li>
      </ul>

      <div class="uk-margin">
        <span class="uk-label">Default</span>

        <span class="uk-label uk-label-primary">Primary</span>

        <span class="uk-label uk-label-secondary">Secondary</span>

        <span class="uk-label uk-label-danger">Danger</span>
      </div>

      <div class="uk-margin uk-grid-small" uk-grid>
        <div class="uk-width-expand" uk-leader>Lorem ipsum dolor sit amet</div>
        <div>$20.90</div>
      </div>

      <div class="uk-margin" uk-lightbox>
        <a
          class="uk-button uk-button-default"
          href="https://getuikit.com/docs/images/photo.jpg"
          >Open Lightbox</a
        >
      </div>

      <div class="uk-margin uk-child-width-expand@s" uk-grid>
        <div>
          <h4>Disc</h4>
          <ul class="uk-list uk-list-disc">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
          </ul>
        </div>

        <div>
          <h4>Circle</h4>
          <ul class="uk-list uk-list-circle">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
          </ul>
        </div>

        <div>
          <h4>Square</h4>
          <ul class="uk-list uk-list-square">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
          </ul>
        </div>

        <div>
          <h4>Decimal</h4>
          <ul class="uk-list uk-list-decimal">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
          </ul>
        </div>

        <div>
          <h4>Hyphen</h4>
          <ul class="uk-list uk-list-hyphen">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
          </ul>
        </div>

        <div>
          <h4>Image</h4>
          <ul class="uk-list uk-list-bullet">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
          </ul>
        </div>
      </div>

      <div class="uk-margin">
        <a class="uk-button uk-button-default" href="#modal-center" uk-toggle
          >Center Modal</a
        >

        <div id="modal-center" class="uk-flex-top" uk-modal>
          <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
            <button
              class="uk-modal-close-default"
              type="button"
              uk-close
            ></button>

            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </div>
        </div>

        <a class="uk-button uk-button-default" href="#modal-sections" uk-toggle
          >Header and Footer</a
        >

        <div id="modal-sections" uk-modal>
          <div class="uk-modal-dialog">
            <button
              class="uk-modal-close-default"
              type="button"
              uk-close
            ></button>
            <div class="uk-modal-header">
              <h2 class="uk-modal-title">Modal Title</h2>
            </div>
            <div class="uk-modal-body">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>
            </div>
            <div class="uk-modal-footer uk-text-right">
              <button
                class="uk-button uk-button-default uk-modal-close"
                type="button"
              >
                Cancel
              </button>
              <button class="uk-button uk-button-primary" type="button">
                Save
              </button>
            </div>
          </div>
        </div>

        <a class="uk-button uk-button-default" href="#modal-full" uk-toggle
          >Full</a
        >

        <div id="modal-full" class="uk-modal-full" uk-modal>
          <div class="uk-modal-dialog">
            <button
              class="uk-modal-close-full uk-close-large"
              type="button"
              uk-close
            ></button>
            <div
              class="uk-grid-collapse uk-child-width-1-2@s uk-flex-middle"
              uk-grid
            >
              <div
                class="uk-background-cover"
                style="
                  background-image: url('https://getuikit.com/docs/images/photo.jpg');
                "
                uk-height-viewport
              ></div>
              <div class="uk-padding-large">
                <h1>Headline</h1>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                  irure dolor in reprehenderit in voluptate velit esse cillum
                  dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                  cupidatat non proident, sunt in culpa qui officia deserunt
                  mollit anim id est laborum.
                </p>
              </div>
            </div>
          </div>
        </div>

        <a class="uk-button uk-button-default" href="#modal-overflow" uk-toggle
          >Overflow</a
        >

        <div id="modal-overflow" uk-modal>
          <div class="uk-modal-dialog">
            <button
              class="uk-modal-close-default"
              type="button"
              uk-close
            ></button>

            <div class="uk-modal-header">
              <h2 class="uk-modal-title">Headline</h2>
            </div>

            <div class="uk-modal-body" uk-overflow-auto>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>

              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>

              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>

              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>

              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>

              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>

              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>

              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>

              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>
            </div>

            <div class="uk-modal-footer uk-text-right">
              <button
                class="uk-button uk-button-default uk-modal-close"
                type="button"
              >
                Cancel
              </button>
              <button class="uk-button uk-button-primary" type="button">
                Save
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class="uk-margin uk-width-1-2@s uk-width-2-5@m">
        <ul class="uk-nav-default" uk-nav>
          <li class="uk-active"><a href="#">Active</a></li>
          <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
              <li><a href="#">Sub item</a></li>
              <li>
                <a href="#">Sub item</a>
                <ul>
                  <li><a href="#">Sub item</a></li>
                  <li><a href="#">Sub item</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
              <li><a href="#">Sub item</a></li>
              <li><a href="#">Sub item</a></li>
            </ul>
          </li>
        </ul>
      </div>

      <div class="uk-margin uk-width-1-2@s uk-width-2-5@m">
        <ul class="uk-nav-default" uk-nav>
          <li class="uk-active"><a href="#">Active</a></li>
          <li class="uk-nav-divider"></li>
          <li class="uk-parent">
            <a href="#">Parent <span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
              <li><a href="#">Sub item</a></li>
              <li>
                <a href="#">Sub item</a>
                <ul>
                  <li><a href="#">Sub item</a></li>
                  <li><a href="#">Sub item</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="uk-parent">
            <a href="#">Parent <span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
              <li><a href="#">Sub item</a></li>
              <li><a href="#">Sub item</a></li>
            </ul>
          </li>
        </ul>
      </div>

      <div class="uk-margin uk-width-1-2@s">
        <ul class="uk-nav-primary" uk-nav>
          <li class="uk-active"><a href="#">Active</a></li>
          <li class="uk-parent">
            <a href="#">Parent <span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
              <li><a href="#">Sub item</a></li>
              <li><a href="#">Sub item</a></li>
            </ul>
          </li>
          <li class="uk-parent">
            <a href="#">Parent <span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
              <li><a href="#">Sub item</a></li>
              <li><a href="#">Sub item</a></li>
            </ul>
          </li>
          <li><a href="#">Item</a></li>
        </ul>
      </div>

      <div class="uk-margin uk-width-1-2@s">
        <ul class="uk-nav-secondary" uk-nav>
          <li class="uk-active"><a href="#">Active</a></li>
          <li class="uk-parent">
            <a href="#">Parent <span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
              <li><a href="#">Sub item</a></li>
              <li><a href="#">Sub item</a></li>
            </ul>
          </li>
          <li class="uk-parent">
            <a href="#">Parent <span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
              <li><a href="#">Sub item</a></li>
              <li><a href="#">Sub item</a></li>
            </ul>
          </li>
          <li><a href="#">Item</a></li>
        </ul>
      </div>

      <div class="uk-margin">
        <button
          class="uk-button uk-button-default"
          type="button"
          onclick="UIkit.notification({message: 'Top Left…', pos: 'top-left'})"
        >
          Top Left
        </button>
        <button
          class="uk-button uk-button-default"
          type="button"
          onclick="UIkit.notification({message: 'Top Center…', pos: 'top-center'})"
        >
          Top Center
        </button>
        <button
          class="uk-button uk-button-default"
          type="button"
          onclick="UIkit.notification({message: 'Top Right…', pos: 'top-right'})"
        >
          Top Right
        </button>
        <button
          class="uk-button uk-button-default"
          type="button"
          onclick="UIkit.notification({message: 'Bottom Left…', pos: 'bottom-left'})"
        >
          Bottom Left
        </button>
        <button
          class="uk-button uk-button-default"
          type="button"
          onclick="UIkit.notification({message: 'Bottom Center…', pos: 'bottom-center'})"
        >
          Bottom Center
        </button>
        <button
          class="uk-button uk-button-default"
          type="button"
          onclick="UIkit.notification({message: 'Bottom Right…', pos: 'bottom-right'})"
        >
          Bottom Right
        </button>
        <button
          class="uk-button uk-button-default"
          type="button"
          onclick="UIkit.notification({message: 'Bottom Right…', pos: 'bottom-right', status: 'danger'})"
        >
          Danger
        </button>
      </div>

      <ul class="uk-margin uk-subnav uk-subnav-primary">
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
      </ul>

      <table class="uk-margin uk-table">
        <caption>
          Table Caption
        </caption>
        <thead>
          <tr>
            <th>Table Heading</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
          </tr>
          <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>Table Footer</td>
            <td>Table Footer</td>
            <td>Table Footer</td>
          </tr>
        </tfoot>
      </table>

      <table class="uk-margin uk-table uk-table-divider">
        <thead>
          <tr>
            <th>Table Heading</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
          </tr>
          <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
          </tr>
          <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
          </tr>
        </tbody>
      </table>

      <table class="uk-margin uk-table uk-table-striped">
        <thead>
          <tr>
            <th>Table Heading</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
          </tr>
          <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
          </tr>
          <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
          </tr>
        </tbody>
      </table>

      <table class="uk-margin uk-table uk-table-hover uk-table-divider">
        <thead>
          <tr>
            <th>Table Heading</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
          </tr>
          <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
          </tr>
          <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
          </tr>
        </tbody>
      </table>

      <table class="uk-margin uk-table uk-table-small uk-table-divider">
        <thead>
          <tr>
            <th>Table Heading</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
          </tr>
          <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
          </tr>
          <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
          </tr>
        </tbody>
      </table>

      <div class="uk-margin uk-overflow-auto">
        <table class="uk-table uk-table-small uk-table-divider">
          <thead>
            <tr>
              <th>Table Heading</th>
              <th>Table Heading</th>
              <th>Table Heading</th>
              <th>Table Heading</th>
              <th>Table Heading</th>
              <th>Table Heading</th>
              <th>Table Heading</th>
              <th>Table Heading</th>
              <th>Table Heading</th>
              <th>Table Heading</th>
              <th>Table Heading</th>
              <th>Table Heading</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
            </tr>
            <tr>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
            </tr>
            <tr>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
              <td>Table Data</td>
            </tr>
          </tbody>
        </table>
      </div>

      <table class="uk-margin uk-table uk-table-responsive uk-table-divider">
        <thead>
          <tr>
            <th>Table Heading</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
          </tr>
          <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
          </tr>
          <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
          </tr>
        </tbody>
      </table>

      <button class="uk-button uk-button-default" uk-tooltip="Hello World">
        Tooltip
      </button>
    </div>

    <!-- END -->
    <script>
      var themeToggleBtn = document.getElementById("theme-toggle");

      themeToggleBtn?.addEventListener("click", function () {
        // if set via local storage previously
        if (localStorage.getItem("color-theme")) {
          if (localStorage.getItem("color-theme") === "light") {
            document.documentElement.classList.add("dark");
            localStorage.setItem("color-theme", "dark");
          } else {
            document.documentElement.classList.remove("dark");
            localStorage.setItem("color-theme", "light");
          }

          // if NOT set via local storage previously
        } else {
          if (document.documentElement.classList.contains("dark")) {
            document.documentElement.classList.remove("dark");
            localStorage.setItem("color-theme", "light");
          } else {
            document.documentElement.classList.add("dark");
            localStorage.setItem("color-theme", "dark");
          }
        }
      });
    </script>
  </body>
</html>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Franken UI

Broken styles #48

{{title}}

Replies: 2 comments 1 reply

{{title}}

{{title}}

{{title}}

Select a reply

Franken UI

Broken styles #48

ShaneSaw1705 Dec 29, 2024

Replies: 2 comments · 1 reply

sveltecult Dec 29, 2024 Maintainer

ShaneSaw1705 Dec 29, 2024 Author

sveltecult Dec 29, 2024 Maintainer

ShaneSaw1705
Dec 29, 2024

Replies: 2 comments 1 reply

sveltecult
Dec 29, 2024
Maintainer

ShaneSaw1705 Dec 29, 2024
Author

sveltecult
Dec 29, 2024
Maintainer