3 ms·
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 mo
by 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 agoAccessibility 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!