🧠💭 98.css thoughts

[jdan]

Posting this for further discussion!

If I were to redo 98.css today here's what I'd do:

• Write as a series of utility classes a la tailwind (i.e. class="border-raised-left ... instead of <button />)
  • Potentially this can even be a shadcn config or something
  • LLMs do a great job of generating this type of markup as they are trained on many tailwind examples
• React components (maybe separate repo)
  • I originally stood firm that the designs were framework agnostic. A valiant goal, but some react examples to actually use these things enables more developers to make more things
• Extensibility
  • We can't cover everything, and people have wild ideas. It should be very easy for these styles to be portable/extendable. Maybe through more CSS variables

[brandongregoryscott]

I think CSS variables + utility classes would be quite useful for extensibility.

I wrote a small virtual desktop application using this library as the base, but there were a few cases where I wanted access to the underlying colors or border styles for creating elements like a task bar and clock. I noticed that the source CSS actually defines variables, but they end up being stripped out in the distributed CSS by the build process, which is quite a bummer. I ended up vendorizing the distributed CSS file and adding the source CSS variables back in so I could reference them in my project.

[icidasset]

Some custom elements would be great here, that way you can keep it framework agnostic.

[lordrip]

@icidasset, that could be a good idea; the downside, perhaps, could be how to wire different components together. For instance, connecting the "maximize button" with the "window component".

Or maybe this is not a concern, is it?

[icidasset]

Yeah good question @lordrip. Shouldn’t be a problem, there’s enough pieces in the standard web platform nowadays to build what you need. Except maybe a few utilities, eg. for rendering; hence why https://lit.dev exists (also a good place to learn about custom elements).

I guess it also depends on what you mean exactly with “wire together”, to me this means the following standard browser features:

• Nesting components, see templates + slots.
• The maximize button dispatching a bubbling event so any parent can listen for it.
• Extending the custom element classes to add your own functionality.

Don’t think anything fancy is needed for a project like this though. People can extend the custom elements and add their own reactivity layer from there.

[lordrip]

Ah, right, I forgot about the events. I guess that would be enough to let's say, clicking on the maximize button will increase the <div> element to fill the available size.