Spacing of components and other DOM elements

[joetm]

It seems that Carbon Components for Svelte does not apply any spacing. For example, there is no padding/margin around the components or any other DOM elements, such as headings.

The documentation on the carbon design system contains info about spacing: https://www.carbondesignsystem.com/guidelines/spacing/overview/

My question is whether there is something in carbon-components-svelte that I can use to apply this spacing? And if so, how?

[metonym]

Great question.

Carbon offers a @carbon/layout package, which ships layout tokens for both CSS-in-JS and SCSS.

Personally, I prefer using the pre-compiled css/all.css StyleSheet, which uses CSS variables.

That way, I can access and apply any of the variables:

h1 {
  margin-bottom: var(--cds-spacing-09);
}

[brunnerh]

I use a preprocessor to generate utility classes for all available spacings, e.g. mt8 for margin-top: 8px, same for padding. This approach could of course be modified to use numbering like the variables in all.css, but I find that using the values makes it easier to pick a spacing because it lacks the additional abstraction.

Also, using flexbox and row-gap/column-gap it is fairly easy to implement wrapper components to lay out many elements with consistent spacing. For these components I supply the spacing directly as a prop, e.g. gap="16px" (at first I used only numeric pixel values but later needed the flexibility to use rem/em).

[joetm]

I have added some padding manually now. I want to follow the design recommendations, but I am completely lost what padding to apply where.

Also, it leads to undesired styling out of the box. An example: The UIShell has a menu bar on top. This bar overlaps the content of the page. I had to add a padding/margin at the top of the content to make the content fully visible.

I really think the all components should be padded by default, with an option to manually override, if needed.

[metonym]

The UIShell has a menu bar on top. This bar overlaps the content of the page. I had to add a padding/margin at the top of the content to make the content fully visible.

I would recommend using the Content component, which accounts for the UIShell offset.

[brunnerh]

You currently may also want to override the background of that component to transparent/none when using dark themes. See https://github.com/carbon-design-system/carbon/issues/9877

[rdela]

@metonym it would be good to document these two great bits of advice…

1. all.css for CSS vars

Personally, I prefer using the pre-compiled css/all.css StyleSheet, which uses CSS variables.

(I was using g100.css and stumped by this. Ended up at the same page joetm linked, scratching my head.)

2. Content component for safe area/margins

I would recommend using the Content component, which accounts for the UIShell offset.

…where do you think is the best place to mention these on the current site?

[brunnerh]

The documentation for the UI Shell already always uses Content in the examples.