3 ms·

You have a goal in mind here (cleaning up your automation server’s styling) so with that in mind, any reason why other options didn’t work? Or starting with som

You have a goal in mind here (cleaning up your automation server’s styling) so with that in mind, any reason why other options didn’t work? Or starting with something like tailwind which has all of the hyper-boring single property .text-lg/.background-red/etc classes made for you. Could extend off of it with your own styles, but allow tweaking with tailwind. Going even further, just tweaking with style= and writing inline css instead of the single value configuration classes. If it’s just because it’s a fun challenge, also good :)

eternityforest 3y ago
I looked at tailwind, but they're missing any kind of semantic classes, and I don't really want . background-red style classes. My set of utility classes is mostly for things where the content or the layout inherently suggests some of the styling, but I'd rather do the actual visual details with semantic selectors. Almost all my utility classes have to do with layout or sizing, and a lot of those are still as semantic as possible. .margin adds "some" amount of margin, but a theme can choose how much. This is meant to run lighting and puzzles for themed events and escape rooms, so it's useful to be able to completely change fonts and colors without touching markup. Bootstrap was the one I spent the most time looking into, but I didn't like how the markup winds up really bloated, and you have to apply classes to basically every tag, and how they don't make use of HTML5 semantic elements. Using button class="button" seems a little excessive for a ~50k line total project, maybe it makes more sense if you're building the next Trello or GitHub!
- spdustin 3y ago
  > This is meant to run lighting and puzzles for themed events and escape rooms, so it's useful to be able to completely change fonts and colors without touching markup. If you're "in control" of the interface, and accessibility isn't a concern, have you considered just "making up" your UI elements? Like an old-school version of custom components [0]. If semantics is what you're after, and if you're running the UI in a browser kiosk mode, why limit yourself to HTML5? [0]: https://codepen.io/spdustin/pen/VwgmXWw https://codepen.io/spdustin/pen/VwgmXWw
  - eternityforest 3y ago
    Accessibility is a semi-concern, it's an open source app that someone theoretically might want to use for something accessible, but that's a really good idea. Doesn't get much more semantic than that!

eternityforest 3y ago

I looked at tailwind, but they're missing any kind of semantic classes, and I don't really want . background-red style classes. My set of utility classes is mostly for things where the content or the layout inherently suggests some of the styling, but I'd rather do the actual visual details with semantic selectors. Almost all my utility classes have to do with layout or sizing, and a lot of those are still as semantic as possible. .margin adds "some" amount of margin, but a theme can choose how much. This is meant to run lighting and puzzles for themed events and escape rooms, so it's useful to be able to completely change fonts and colors without touching markup. Bootstrap was the one I spent the most time looking into, but I didn't like how the markup winds up really bloated, and you have to apply classes to basically every tag, and how they don't make use of HTML5 semantic elements. Using button class="button" seems a little excessive for a ~50k line total project, maybe it makes more sense if you're building the next Trello or GitHub!

spdustin 3y ago
> This is meant to run lighting and puzzles for themed events and escape rooms, so it's useful to be able to completely change fonts and colors without touching markup. If you're "in control" of the interface, and accessibility isn't a concern, have you considered just "making up" your UI elements? Like an old-school version of custom components [0]. If semantics is what you're after, and if you're running the UI in a browser kiosk mode, why limit yourself to HTML5? [0]: https://codepen.io/spdustin/pen/VwgmXWw https://codepen.io/spdustin/pen/VwgmXWw
- eternityforest 3y ago
  Accessibility is a semi-concern, it's an open source app that someone theoretically might want to use for something accessible, but that's a really good idea. Doesn't get much more semantic than that!