accurat / yogurt-layout Goto Github PK

We need to define a couple things:

• Should the properties add between each other, or be exclusive?
• How should the gap work?
  • @ivanross suggests an approach like div > * + * { margin-left: x } where it's placed between childs only if the children are >1.
• Should gap be number | [number, number], to allow vertical/horizontal?

cc @ivanross @marcofugaro @gsimone (#1)

Hey! 👋 Great little lib, I'm playing around with it and react-three-fiber, since laying stuff out is usually painful: https://codesandbox.io/s/blissful-lake-84hxp (<= this might explode while I work on it :D )

Here's a couple of quick things:

1. gap and margin properties. In the example I wanted to add some gap between items, it would be great being able to do it without having to add a container
2. direction could default to row like flex-direction does in css
3. height and width defaults (auto probably), just to reduce boilerplate

Anyway, main message is: Kudos, this is great!

cc @ivanross

Some functions (called for example debugSVG or debugCanvas) that print a debug grid around every block and margin/padding/gap.