Need help with augmented UI (I am a total noob with CSS, HTML and JS)

[TonkatsuRa]

So i tried different ways to get augmented UI to work but I keep failing at it. I even tried using ChatGPT4 to maybe find a way to fix it... but still no chance.

No matter what I do, the augmented-ui style isn't applied to the container border or any other element of my code. I am 100% sure it is my mistake and I just can't figure out the correct way. The page has full functionality and works well ... just the design is what makes me bite into my table...

Here is my git: https://github.com/TonkatsuRa/Comlink-Thread

[JaneOri]

Thanks for checking it out! This should help:

https://github.com/TonkatsuRa/Comlink-Thread/blob/main/comlink.html#L14
and
https://github.com/TonkatsuRa/Comlink-Thread/blob/main/comlink.html#L37

The attribute should be prefixed with data-

If you want to use augmented borders on the element, also pass in border within the attribute value like:
data-augmented-ui="border tl-clip br-clip"
It's best not to use the standard CSS border at the same time.

then to style it:

--aug-border-all: 3px;
--aug-border-bg: #FFFF00;

---

Make sure not to import it 3 times when done debugging!
https://github.com/TonkatsuRa/Comlink-Thread/blob/main/comlink.html#L8-L10
:P

---

It's easier to use classes instead but there's two notes here:
https://github.com/TonkatsuRa/Comlink-Thread/blob/main/comlink.css#L195

1. need data- prefix
2. It's not = that should be used but ~= instead (or just use a class name)

---

Lmk if you need anything else!

Thanks again!
// Jane

Oh and ping me on twitter when you're live, I'd love to see the finished work!

[TonkatsuRa]

Thank you so much for your reply! I was able to fix my issue so far. The augmented-ui is working now but it threw off everything else. I am currently trying to figure out how to fix it:
Edit: I manage to fix some things. But I can't figure out how to adjust the border color and change the clip styles like you explained on your website. It's driving me completely nuts

If you want, you can have a look: https://codepen.io/TonkatsuRa/pen/VwEMLpo

[JaneOri]

If you're doing this in codepen, remove this from your html:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/augmented-ui@2/augmented-ui.min.css">

and change the settings for your pen (settings cog in top right of codepen) and import the library from there.:

This IS super annoying (sorry).

_{We didn't have CSS layers or :where() selectors when v2 was released yet so everything in the library is heavy class-weight selectors.
That means the library defaults can override your selectors if you only use a single class and import the library after your custom styles. (which is what happens in codepen if you embed the link tag while using the codepen CSS box)}

Anyway, after that, the --aug-border-bg property will do what you expect:

[TonkatsuRa]

Thank you so much!
I learned a lot and I think I finally start to grasp how augmented-ui works.
The only thing I haven't been able to do, is changing the mixin size of the border cutouts etc.

[JaneOri]

looks like you made more progress since then too.

If you inset from the edges with clip, it causes a little pinching. You can fix the pinching like this:

  --aug-tl-inset1: 35%;
 
  --aug-tr-inset1: 20%;
  --aug-tr1-alt-join-in: initial;
  /* this fixes the pinch ^ that happens when you inset sometimes */

  --aug-tr-inset2: 10%;
  --aug-tr2-alt-join-out: initial;
  /* this fixes the pinch ^ that happens when you inset sometimes  */
  
  --aug-bl-inset2: 10%;

  --aug-br-inset2: 0%;
  
  /* change size of equipped augs */
  --aug-tr1: 10px;
  --aug-tr2: 30px;