wa-stack requirements? All wa- classes seem like they're not working #138

bitsoflogic · 2025-01-11T17:40:07Z

bitsoflogic
Jan 11, 2025

Using the Vite+Lit starter template, I've updated the index.html and index.css to a very simple example. The components like wa-page work however the wa classes don't.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Lit</title>
    <link rel="stylesheet" href="./src/index.css" />
    <link rel="stylesheet" href="https://early.webawesome.com/[email protected]/dist/styles/themes/default.css" />
    <script type="module" src="https://early.webawesome.com/[email protected]/dist/webawesome.loader.js"></script>
    <script type="module" src="/src/my-element.js"></script>
  </head>
  <body>
    <wa-page>
      <my-element>
        <h1>Vite + Lit</h1>
      </my-element>
      <div class="wa-grid">
        <div class="wa-stack wa-gap-2xs">
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="wa-stack wa-gap-2xl">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </wa-page>
  </body>
</html>

and

html,
body {
  min-height: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

[class*='wa-stack'] div:empty {
  background-color: blue;
  border-radius: 25px;
  min-block-size: 2rem;
  min-inline-size: 2rem;
}

The page looks like this screenshot. I expected something like what I'm seeing here: https://backers.webawesome.com/docs/utilities/stack/

bitsoflogic · 2025-01-11T17:50:19Z

bitsoflogic
Jan 11, 2025
Author

Took a lot of digging, but found these "Layout" items require the "Style Utilities": <link rel="stylesheet" href="https://early.webawesome.com/[email protected]/dist/styles/webawesome.css" />.

See https://backers.webawesome.com/docs/utilities/#installation

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

wa-stack requirements? All wa- classes seem like they're not working #138

{{title}}

Replies: 1 comment

{{title}}

Select a reply

wa-stack requirements? All wa- classes seem like they're not working #138

bitsoflogic Jan 11, 2025

Replies: 1 comment

bitsoflogic Jan 11, 2025 Author

bitsoflogic
Jan 11, 2025

bitsoflogic
Jan 11, 2025
Author