bigskysoftware / missing Goto Github PK

Both <link rel="stylesheet" href="https://unpkg.com/[email protected]"> and <link rel="stylesheet" href="https://the.missing.style"> result in a 404.

When I include the nav example <script type="module" src="https://unpkg.com/missing.css@/js/overflow-nav.js"></script> in my site the script is loaded, and visiting the URL in my browser gives {"error":"Invalid URL: /missing.css@/js/overflow-nav.js"}. Still works if I serve 19.js and overflow-nav.js myself, but just thought I should flag it 😄

Style the element

The docs say "lets authors customize it easily, even create multiple themes" but don't really expand on what that means. Some simple examples might be useful. I guess I can give values to variables; some examples of that in the "variables" section of the doc might be helpful if that was what was intended? Anything else?

I was following the docs and implemented the navbar as described and followed the same dom as used on the main missing.css site but somehow I couldn't get it to align at the center as the missing.css site shows.

After some try outs, removing and changing the dom, it seems the actual problem is that I was using the .min.css file instead of just the .css file.

It seems the .min.css if broken and applies different rules which make the navbar aligned to the right, only on firefox. It seems on chromium it shows ok.

reproduction:

• open firefox (I'm using latest version 124.0.1 on linux)
• go to https://missing.style/docs/
• open the debug/dom view
• change the line with <link rel="stylesheet" href="/dist/missing.css"> to <link rel="stylesheet" href="/dist/missing.min.css">
• see the navbar alignment changing

the fix was in my case to stop using the .min.css version and use the .css version.

On the intro page for the docs, it suggests using the following to include the styles on a page:

<link rel="stylesheet" href="https://the.missing.style/1.0.0/missing.min.css">
<!-- Prism theme (https://prismjs.com/): -->
<link rel="stylesheet" href="https://the.missing.style/1.0.0/missing-prism.min.css">

But visiting the links directly shows they're returning 404s:

• https://the.missing.style/1.0.0/missing.min.css
• https://the.missing.style/1.0.0/missing-prism.min.css

I wanted to have <details> styling be derived from missing-card. This is not possible in any standardized CSS without adding , details to card.css, or duplicating styles.

In CSS preprocessors, we have things like extends, but I'd prefer if we stuck to a CSS dialect that will probably be standard in the future.

Just a minor thing, but scrollbars seem a little out of place out of the box. It would be nice if they followed var(--graphical-fg) and var(--interactive-bg), and the border radiusing.

Style forms and associated elements, completing src/elemsnts/forms.css.

When I click on the second or third tab the first tab stays open.

It's common to author content in markdown, and then programmatically generate html from it.
Markdown compilers typically do not include ways to add custom classes to their output.
Consequently, missing.css is relatively unusable with markdown generators when the content includes nested lists, since there's no easy way to add the class.
The potential content-side solutions include:

• using javascript to inject the class; this does not seem like an appropriate use for js
• parsing the output html and modifying it in-line; this is extremely complex for a script that otherwise just shells out to cmark (for example)
• overriding the missing.css css in a second file

Since one of the goals of missing.css is to "build common components using plain, semantic HTML", and generated markdown is about as plain and semantic as it gets, this seems to be a good fit.
Of additional note, it's also a notable downgrade from classless css libraries, since those typically handle this use-case fine.

Potential solutions include:

• having the nested-list behavior be the default
• have an override that handles something like ul:has(li ul)

I am working on an experimental port of a webapp, and I'm finding that out of the box, sections and articles are cramped. As semantic elements, should these have a bit more styling OOB?

This project is currently using sanitize.css which is not updated for 3 years.

overflow-wrap: break-word too offensive but it's ok.

Points against using sanitize.css:

Unnecessary declarations that opinionated and not needed:

1. background-repeat: no-repeat;, no need to set this, it should be using default behavior which is repeat to be more predictable.

2. text-decoration: inherit; text-decoration property used in those elements: a, s, u, del, ins, strike and there is no need to set the inheritance over ::before, ::after, same for vertical-align: inherit.

3. cursor: default in most elements cursor: default is a default value and another things like cursor: auto for input, textarea, so it's no need to set up, let the browser do its thing.

4. In abbr[title] there is 2 declarations indeed duplicated: underline then underline dotted as values, underline dotted used by Firefox as default (so it should be used as only declaration):

abbr[title], acronym[title] {
  text-decoration: dotted underline;
}

5. small font-size: 80% unneeded because it's font set it up 2 see: main.css = font-size: .8em;

6. margin: 0 to button, input, select elements: not needed because button, margin has no margin and input[type="*"] have some margins but not big numbers so something like Stack layout would be adorable and it wouldn't need us to set margin to 0. ( .stack>+{ margin-block-start: 1rem } )

7. -webkit-appearance: button should be avoided to use.

8. border: 1px solid #a0a0a0 set for fieldset to achieve "Change the inconsistent appearance in all browsers (opinionated)." but actually there is no inconsistency: see https://browserdefaultstyles.com/#fieldset default value is border: groove 2px ThreeDFace

9. margin: 0 to textarea: textarea has no margin by default: https://browserdefaultstyles.com/#textarea

10. input[type="search"] no need for those declarations because outline-offset is 0 by default see: https://browserdefaultstyles.com/#[type=search]

11. In fact vendor specific things should be avoided...

12. :focus-visible isn't needed but :target is fine but no need for z-index: 2

13. summary declaration is ok but it's better to use just summary and not details > summary:first-of-type because website authors themselves shouldn't add more then one summary to details element and for not increasing specificity it's better to stick with summary.

14. datalist { display: none } unnecessary it's default see: https://browserdefaultstyles.com/#datalist

Running with the latest version

docker run --rm -ti -v .:/app denoland/deno:alpine sh
# cd /app
# deno task css
Task css deno run -qA tool/css.ts src/missing.css && deno run -qA tool/css.ts src/missing-prism.css
error: Top-level await promise never resolved
const compile = await bundleAsync({
                ^
    at <anonymous> (file:///app/tool/css.ts:15:17)

for comparison, using an older version

docker run --rm -ti -v .:/app denoland/deno:alpine-1.35.3 sh
# cd /app
# deno task css
Task css deno run -qA tool/css.ts src/missing.css && deno run -qA tool/css.ts src/missing-prism.css
#

Hi, thanks for missing.style!

I seem to have a regression between 1.0.9 and 1.1.0 with the following markup:

    <header class="navbar">
      <div>
        <a href="/" class="allcaps">
          Reactor⚡
        </a>
      </div>
      <nav aria-label="Dashboard sections">
        <ul role="list">
          <li>
            <a href="/climate/">
              Climate
            </a>
          </li>
          <li>
            <a href="/energy/">
              Energy
            </a>
          </li>
          <li>
            <a href="/system/logs/">
              System
            </a>
          </li>
        </ul>
      </nav>
    </header>

On 1.0.9 it looks like this:

On 1.1.0 it looks like this:

(in other words, the navbar is now right-aligned rather than centred).

Hi,

we have following code:

<div class="box">
  <div class="block titlebar">
    <strong>pike</strong>
  </div>
  <p>
    node is git
    <span class="float:right">
      <a href="#">ssh</a> |
      <a href="/systems/1/nodes/2">→ goto</a>
    </span>
  </p>
</div>

This is how it looks on Edge - as it should:

And this is how it looks on Firefox:

Notice how letter "p" goes just a little bit out of titlebar. There is also more shadow under it.

I guess it's intended, but it looks like https://the.missing.style is not cached at all while unpkg of course is.

The instructions on GitHub and missing.style differ in the URL and it took me a few minutes to figure out that's the reason caching is not working.

Maybe a hint in README.md would suffice.

Note: Don't go head-first into styling this. These elements are used for a wide range of meanings, in a wide range of contexts. More discussion is needed.