flex col auto? about agnosticui HOT 4 CLOSED

Just to confirm, I hacked on the flexboxgrid2 demo page and got the same result by essentially doing:

.col {
/* Need these two to override /
flex: 1 1 auto;
max-width: initial;
}
.col:not(:last-child) {
margin-right: 24px; / creates the gap between the cards */
}

So my thought is that we'd need to provide something like:

<FlexCol sm={12} lg={auto}>...</FlexCol>

and the cards would stack at extra small and small, but then use auto from large upward

UPDATE: After learning of the auto width section of the original upstream library (see next comment), I don't think above idea is as good as adding opt in gutters.

from agnosticui.

Looking some more at https://evgenyrodionov.github.io/flexboxgrid2/ I'm reminded that the library automatically gives you magic gutters (which I've removed). So, if you look at their auto section it has the gutters inside if you don't supply any sizing classes for the columns. It does this by using padding-left and padding-right on the columns, and then negate corresponding margins on the row:

So perhaps what I need to do is provide a gutters={16} which can be used as an escape hatch to opt back in to gutters for use cases like cards. Then, divide by / 2 and do padding left 8px right 8px and margin left -8px right -8px as they do.

Another benefit of this would be the consumer doesn't have to add ugly override CSS like:

.col:not(:last-child) {
  margin-right: 24px;
}

and the cards just have nice inner gutters as you'd expect.

Additionally, besides having the feature of "opt in" gutters, the consumer also gets to curate the exact size of gutters they prefer which is also a nice thing.

from agnosticui.

Making progress on this but after iterating I think I want to change the strategy…

Instead of
.gutter-8,
.gutter-16

and so on, I think we should do this via css custom properties:

--agnosticui-default-gutter-desktop: 0,
--agnosticui-default-gutter-tablet: 0,
--agnosticui-default-gutter-phone: 0

Essentially, by default, you haven't opted in for gutters so it simply adds these with zero values e.g. margin-left: 0 etc.

This allows consumers to override via top-level stylesheet, and thus "opt-in" by simply declaring:

--agnosticui-gutter-desktop: 24px,
--agnosticui-gutter-tablet: 16px,
--agnosticui-gutter-phone: 8px
/* or whatever makes sense to them */

from agnosticui.

CSS and Vue packages are refactored. Need to update svelte/react ones.

from agnosticui.