Skip to content

Commit

Permalink
docs: paragraph-css
Browse files Browse the repository at this point in the history
- Use Dutch instead of English
- Add "Gebruik" and "API" sections
  • Loading branch information
matijs committed Dec 20, 2024
1 parent 6677707 commit 6e9fac0
Showing 1 changed file with 66 additions and 5 deletions.
71 changes: 66 additions & 5 deletions packages/components-css/paragraph-css/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,85 @@

# Paragraph

Shows a paragraph of text.
Toont een alinea aan tekst.

## Installation
## Installatie

Using npm
Met npm

```shell
npm install @nl-design-system-candidate/paragraph-css
```

Using pnpm
Met pnpm

```shell
pnpm add @nl-design-system-candidate/paragraph-css
```

Using yarn
Met yarn

```shell
yarn add @nl-design-system-candidate/paragraph-css
```

## API

### CSS

De volgende CSS classes kunnen gebruikt worden:

- `.nl-paragraph`: styles voor een alinea aan tekst.
- `.nl-paragraph--lead`: styles voor een alinea aan het begin van een artikel die een introductie geeft over het
onderwerp.
- `.nl-paragraph__lead`: styles voor het interne `b` element dat dient als fallback voor als er geen CSS geladen kon
worden.

### SCSS

De volgende SCSS mixins kunnen gebruikt worden:

- `nl-paragraph`: mixin met styles voor een alinea aan tekst.
- `nl-paragraph--lead`: mixin met de styles voor een alinea aan het begin van een artikel die een introductie geeft over
het onderwerp.
- `nl-paragraph__lead-scss-workaround`: mixin met styles voor het interne `b` element dat dient als fallback voor als er
geen CSS geladen kon worden. De suffix `-scss-workaround` wordt gebruikt omdat anders de mixin `nl-paragraph__lead`
(met underscores) de mixin `nl-paragraph--lead` (met hyphens) zou overschrijven omdat Sass geen onderscheid maakt
tussen hyphens en underscores.

## Gebruik

`@nl-design-system-candidate/paragraph-css` kan gebruikt worden als kant-en-klare CSS maar ook als broncode.

### Als CSS

Om de `.nl-paragraph`, `.nl-paragraph--lead`, en `nl-paragraph__lead` styling te kunnen gebruiken:

```CSS
@import '@nl-design-system-candidate/paragraph-css/paragraph.css';
```

Om de versie zonder CSS classes te kunnen gebruiken:

```CSS
@import '@nl-design-system-candidate/paragraph-css/html/paragraph.css';
```

Door deze versie te gebruiken krijgen alle `p` elementen de juiste styling.

### Als broncode

Voor de mixins `nl-paragraph`, `nl-paragraph--lead`, en `nl-paragraph__lead-scss-workaround`:

```SCSS
@import '@nl-design-system-candidate/paragraph-css/_mixin.scss';
```

Voor de versie zonder CSS classes:

```SCSS
@import '@nl-design-system-candidate/paragraph-css/html/_mixin.scss';
```

Afhankelijk van de gebruikte tools kan het nodig zijn om Sass te configureren met `loadPaths` zodat
`@nl-design-system-candidate/paragraph-css` gevonden kan worden in de `node_modules` folder.

0 comments on commit 6e9fac0

Please sign in to comment.