zaydek / duomo Goto Github PK

See margin-gap position classes as those rely on &. Check that the generated classes is contained and works in a responsive context.

Ex: style-{style} weight-{weight} size-{integer} spread-x-{percent} spread-y-{decimal} color-{color}?

Ex: min-h-full min-h-screen.

This is the pattern we’re leveraging with sp which is really appealing. It makes sense how and why we would extend this reasoning to support w h .... Where this gets a little weird is if we’re using colors in our CSS, we need to remember to pass colors there too.

Make 0-32 since it’s easier to reason about than 24.

sorcery-scss/sorcery?

https://github.com/material-components/material-components-web/blob/master/packages/mdc-theme/_color-palette.scss

Via https://youtube.com/watch?v=vIJFJ_fDo-o. This yields tx-black bg-gray ....

Right now our m-gap implementation is a little naive because it uses some advanced techniques to achieve the desired effect, which of course has some side effects. Alternatively, using the lobotomized owl API is more predictable for -x and -y contexts, whereas what we currently have does make sense for the m- context.

Conversely, if you used mx-gap-16 my-gap-24 this would not work at all with the lobotomized owl API.

https://medium.com/free-code-camp/heres-my-favorite-weird-trick-to-debug-css-88529aa5a6a3
https://gist.github.com/zaydek-old/6b2e55258734deabbd2b4a284321d6f6

And learn about z-stack.

In theory we can use pure CSS for this. No need for SVGs.

With and without media queries to optimize payload sizes.

✅ Media queries are supported for this property.

Seems redundant now that we are universally using it. We may want to do the same for dark mode background colors but note that that is not currently stackable (maybe it shouldn’t be?).

Recommend using overflow on the parent container to prevent excess scrolling area.

The caveat with m-gap is that it should actually use 1/2 values for flex.

• Integrated debugger
• Staggered lines utilities
• Tooltip utilities
• Flexbox-first layout composition
• Tailwind CSS dialect — easy learning curve
• Prototype and production-grade code
• Design token introspection

Maybe want to specifically target [class*="hstack"] > *?

We can reasonably support up to like 32 paragraphs lines? Do we have to put a limit on this?

Then can pass spacing and grow?

Potentially better for muscle-memory.

Inspired by the following libraries:

• Tailwind CSS
• Bulma CSS
• Fortune CSS
• normalize.css

spacer doesn’t seem like it should be dynamic and can break .spacer:empty selectors.

Idea is that no- classes are not number-based and -0 classes are. Alternatively, -none could be used but no- seems more obvious.

Ex: overflow x-scroll y-scroll x-hidden y-hidden. Should inherently use -webkit-overflow-scrolling: touch;. overflow x-auto and y-auto may be desirable for resets.

These should be simple enough to implement: https://tailwindcss.com/docs/container#app.

grid-template-rows grid-template-columns grid-gap grid-row-gap grid-col-gap

This should be possible because of the nature of the $range functions.

Ex: no-shrink shrink.

Edit: no-flex-shrink and flex-shrink makes more sense because we don’t want to break out of the flex context.

If we add hover and or focus we can achieve the hover / focus pattern using hover-focus:...

m-gap min-h ...

Range can be from 0-4, maybe 8 max, but 4 seems more reasonable.

Should support:

• + xs
• + sm
• + md
• + lg
• + xl (this is all media queries)

The links should work similar to how the Google Fonts API works: e.g. ...@xs,sm,md,lg or @all (or omitted).

See stack-12-test.html.

Ex: non-retina retina blue-500 ....

s-auto could work.

Having <HStack> <VStack> <ZStack> <Spacer> pre-componentized would be really nice, esp. with support for implicit spacing and a spacing default (e.g. 4). <Spacer> could be further customized by by={n} or amount={n}?

See https://codepen.io/zaydek/pen/bGepyJN.

This is relevant to #10.

❌ Media queries are not supported for this property.

Pointer events should likely be responsive-enabled due to mobile concerns.

This is more consistent with margin and padding.