search

carbon-design-system / carbon-components-svelte

Svelte implementation of the Carbon Design System
https://svelte.carbondesignsystem.com
Apache License 2.0
2.7k stars 262 forks source link

Basic question about text formatting #934

Open wvhulle opened 2 years ago

wvhulle commented 2 years ago

I'm sorry for this basic question about Carbon Design, but I couldn't find any info on it.

When I use the standard HTML tags such as h1 and p, there is no padding between the elements. But in the example vercel site there's nice padding everywhere. How is this accomplished without editing too much css? I come from Tailwind and would like to have a simple way to set styles. Is the only way to wrap everything inside , and ?

metonym commented 2 years ago

The documentation site uses CSS variables and taps into Carbon's layout tokens for margin/padding.

If you are using CSS variables, you can write the following:

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

Other examples in the docs site: https://github.com/carbon-design-system/carbon-components-svelte/blob/3cadf2c00132ef4dbcdd5e7eb8e6de5f02387991/docs/src/layouts/ComponentLayout.svelte#L176

If you are not using CSS variables, you will need to use SCSS or manually hardcode the spacing values.

stsdc commented 2 years ago

More info about spacings: https://www.carbondesignsystem.com/guidelines/spacing/overview/

Honestly I thought, that those variables are coming with a theme and are already applied to basic components. If that's intended, than would be nice to display some infobox :sweat_smile:

BTW thanks for the docs, a lot of examples, easy to read and apply :rocket: