Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translate CSS #16

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Translate CSS #16

wants to merge 1 commit into from

Conversation

LoriKarikari
Copy link
Collaborator

No description provided.

@LoriKarikari LoriKarikari mentioned this pull request Mar 6, 2021
92 tasks

## Adding a Global Stylesheet {#adding-a-global-stylesheet}
## Een globaal stylesheet toevoegen {#adding-a-global-stylesheet}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## Een globaal stylesheet toevoegen {#adding-a-global-stylesheet}
## Een globale stylesheet toevoegen {#adding-a-global-stylesheet}


In production, all CSS files will be automatically concatenated into a single minified `.css` file.
In productie zullen alle CSS-bestanden automatisch worden samengevoegd tot één verkleind `.css` bestand.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Houden we hier minified of toch verkleind? Ik ben dat laatste nog niet veel tegengekomen.

This behavior makes CSS Modules the ideal way to include component-level CSS.
CSS Module files **can be imported anywhere in your application**.
Dit gedrag maakt CSS Modules de ideale manier om CSS op componentniveau toe te voegen.
CSS Module-bestanden **kunnen overal in uw applicatie worden geïmporteerd**.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
CSS Module-bestanden **kunnen overal in uw applicatie worden geïmporteerd**.
CSS Module-bestanden **kunnen overal in je applicatie worden geïmporteerd**.


First, create `app/components/Button.module.css` with the following content:
Neem bijvoorbeeld het herbruikbare `Button` component in de`components/` map:
Copy link
Collaborator

@dylankiss dylankiss Mar 6, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Neem bijvoorbeeld het herbruikbare `Button` component in de`components/` map:
Neem bijvoorbeeld een herbruikbare `Button` component in de `components/` map:

CSS Modules are an _optional feature_ and are **only enabled for files with the `.module.css` extension**.
Regular `<link>` stylesheets and global CSS files are still supported.
CSS Modules is een _optionele feature_ en wordt **enkel ingeschakeld voor bestanden met de `.module.css` extensie**.
Gewone `<link>` stylesheets en globale CSS bestanden worden nog steeds ondersteund.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Gewone `<link>` stylesheets en globale CSS bestanden worden nog steeds ondersteund.
Gewone `<link>` stylesheets en globale CSS-bestanden worden nog steeds ondersteund.

Voor consistentie met de rest


In production, all CSS Module files will be automatically concatenated into **many minified and code-split** `.css` files.
These `.css` files represent hot execution paths in your application, ensuring the minimal amount of CSS is loaded for your application to paint.
In productie zullen alle CSS Module-bestanden automatisch worden samengevoegd tot **vele verkleinde en code-split** `.css` bestanden.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Zelfde vraag over minified ...

In production, all CSS Module files will be automatically concatenated into **many minified and code-split** `.css` files.
These `.css` files represent hot execution paths in your application, ensuring the minimal amount of CSS is loaded for your application to paint.
In productie zullen alle CSS Module-bestanden automatisch worden samengevoegd tot **vele verkleinde en code-split** `.css` bestanden.
Deze `.css` bestanden vertegenwoordigen hot execution paths in je applicatie, en zorgen ervoor dat de minimale hoeveelheid CSS wordt geladen om je applicatie weer te geven.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Deze `.css` bestanden vertegenwoordigen hot execution paths in je applicatie, en zorgen ervoor dat de minimale hoeveelheid CSS wordt geladen om je applicatie weer te geven.
Deze `.css` bestanden stellen hot execution paths voor in je applicatie, en zorgen ervoor dat de minimale hoeveelheid CSS wordt geladen om je applicatie weer te geven.

Blitz allows you to import Sass using both the `.scss` and `.sass` extensions.
You can use component-level Sass via CSS Modules and the `.module.scss` or `.module.sass` extension.
Met Blitz kan je zowel via de `.scss` als `.sass` extensies Sass importeren.
Je kan Sass op componentniveau gebruiken via CSS-modules en via een van de twee beschikbare extensies.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Je gebruikt hier CSS-modules en bij de rest CSS Modules. We moeten er één kiezen. Mijn voorkeur gaat uit naar CSS-modules.

Blitz allows you to import Sass using both the `.scss` and `.sass` extensions.
You can use component-level Sass via CSS Modules and the `.module.scss` or `.module.sass` extension.
Met Blitz kan je zowel via de `.scss` als `.sass` extensies Sass importeren.
Je kan Sass op componentniveau gebruiken via CSS-modules en via een van de twee beschikbare extensies.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Je kan Sass op componentniveau gebruiken via CSS-modules en via een van de twee beschikbare extensies.
Je kan Sass op componentniveau gebruiken via CSS-modules en via één van de twee beschikbare extensies.


- [@vercel/next-less](https://github.com/vercel/next-plugins/tree/master/packages/next-less)
- [@vercel/next-stylus](https://github.com/vercel/next-plugins/tree/master/packages/next-stylus)

If using the less plugin, don't forget to add a dependency on less as well, otherwise you'll see an error like:
Als je de less plugin gebruikt vergeet dan niet om ook een dependency van less toe te voegen, anders krijg je een foutmelding zoals:
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Als je de less plugin gebruikt vergeet dan niet om ook een dependency van less toe te voegen, anders krijg je een foutmelding zoals:
Als je de less plugin gebruikt, vergeet dan niet om ook een dependency op less toe te voegen, anders krijg je een foutmelding zoals:

Copy link
Collaborator

@dylankiss dylankiss left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Zie comments

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants