lowlighter/matcha

Utility CSS classes

Closed this issue · 3 comments

owahltinez commented

I recently discovered this project and I would love to replace any other CSS libraries + my own custom CSS altogether. The main thing that I'm missing currently are the utility libraries e.g., p-4 ==> padding: 4rm (or whatever the actual unit is in Tailwind CSS).

Is that something that could be considered in scope for this project? What would the implementation look like? I really like the idea of simply plopping a tag into the <head> element, and I don't care if that is a <script> or a <style> tag.

lowlighter commented

Hi !

Yes there's actually a few one already defined in styles/@utilities/mod.css but it's really limited currently

I was already thinking about integrating more because I'd encounter the need several times in my projects, so I'd like to integrate the "most useful" ones, which I think would be the following:

  • flex: row, colum, wrap, reverse, grow, shrink
    • justify, align
  • display: block, inline-block
  • margin, padding (scaled in rem probably)
  • text-align: center, left, right
  • rounded (border-radius)
  • cursor: pointer, not-allowed
  • background-color (counter-parts of current defined colors)

If you think of some more that may be useful, don't hesitate to post them.
Ideally they'd be compatible with tailwind (in notation) or existing framework to make even less friction when migrating out of matcha for people that were just using it for prototyping

However I don't plan on implementing too much utilities classes, because if you really need specific ones, then I think it'd be better to directly use a framework instead (or include it along with matcha), or just adding them in a seperate custom stylesheet

It's not planned to include <script> tags with this library (it's intended to remain pure css)

owahltinez commented

I'd like to integrate the "most useful" ones, which I think would be the following

Those sound like a great subset. Perhaps add foreground colors as well, and consider the very handy margin-x-*, space-x-*, gap-x-*, etc. Text modifiers like underline, bold, italic... are probably not needed since that should be covered by the semantic use of tags like <u>, <b> and <i>, right?

Stuff like disabled: and hover: are very handy as well, but I don't know if that's feasible without blowing up all the possible combinations. That's why I'm suggesting a <script> tag version.

It's not planned to include <script> tags with this library (it's intended to remain pure css)

Does it have to be one or the other? Maybe the script tag version can be a superset of the base css, and both can be provided.

lowlighter commented

It's not planned to include <script> tags with this library (it's intended to remain pure css)

Does it have to be one or the other? Maybe the script tag version can be a superset of the base css, and both can be provided.

It could, but I'm not entirely sure whether this would be in-scope of this library.

The aim of matcha is still to be semantic-first rather than utility-first (because for the later there are far more complete and better libs suited for this).

The subset of utility classes in #21 has been added because I think it brings more value than it would to just being mindlessly stuck on the classless/semantic-first paradigm, but for a more complete set of utility classes, I think it'd be better for users to just switch already to utility-first libs (like adding <script src="https://cdn.tailwindcss.com"></script>)

matcha should still be compatible along others libraries of that kind I think