Consider adding a "Box" component

[d3dc]

With React, there are several frameworks that expose a Box component. This component serves to do simple style resets and such, as well as supplement a div that can access e.g. theme colors and sizes.

Coming from grommet, I've already been tripped up by box sizing. Here's their style reset:

    display: flex;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0px;
    min-height: 0px;
    outline: none;

~~If something like this does make it in, my vote would be for a default of display: flex~~. I like using flexbox everywhere and "just writing flexbox" in css is super nice. A flexbox component with some syntactic sugar to get going might be nice.

edit: Still learning svelte... I'm not so sure on the "reset" part now.

[rob-balfre]

Not sure what the benefit of this would be. Couldn't you just add a global css file with simple reset for box-sizing?

[d3dc]

@rob-balfre You can definitely do that. Coming from css-in-js, sometimes you don't have a root style sheet or at least its existence doesn't persist in my mental model.

I think there is some value to providing a set of sane defaults as a component. When I used Bootstrap, I would think of it as "having Reboot at the root" (and it included Reboot). Keeping the idea that a reset does exist in the programmer's mental model might be easier if the reset is in the component tree.

Box also exists as a layout primitive in grommet. It has lots of props related to aligning content.

I guess my thoughts there mostly relate to sharing e.g. a css variable for padding ala styled-system - which incidentally creates shows Box as:

import { typography, space, color } from 'styled-system'

const Box = styled('div')(
  typography,
  space,
  color
)

I'm not sure if this is something you're interested in adding or not. I think having a standardize "system" of variables would be great for component development. Tachyons et all aren't fully geared towards "just" variables...