Documentation ​

This documentation is developed using Vitepress with a custom configuration and our own modifications.

...

On the top (or using the shortcut Ctrl + K), you can use the documentation general search.

Components ​

The components are divided into different categories:

Each component will have three possible pages:

  • Development info: (default) ...
  • Guidelines: ...
  • Figma: ...

Status bar ​

...

For Figma:

  • Figma: ...
  • Figma plugin: ...

As Framework selectors:

For platforms:

Extensions

​

...

Parameters ​

...

Playground ​

...

Virtualization ​

When you use the Playground, the documentation is rendering the component with the actual target framework or approach. This allows to check the real behavior of the component but also using the framework DevTools to inspect what is going on. The DevTools based on the supported frameworks would be:

Configuration ​

If you go to the configuration page, you would be able to configure the documentation in order to adapt it to the needs you could have. Some of this configuration values are:

  • Root font size: since the whole design system is adapted to use rem CSS units, when you change the font-size value in the :root selector of CSS, all the UI will be scaled. Here you have a selector to chose this root size to preview everything with the corresponding scaling.

  • Root locale: the main locale of the site in defined bia the lang attribute of the <html> document tag. This is used in JS and CSS as the selector to adapt the components to the corresponding localization. Her's a selector to stablish ling language in the documentation to some other that is not en-US (default one).

  • Default framework: since the renderization and code examples of the components can be presented in several frameworks, even when you can change them in the documentation page of the component: you can stablish your preferred one in here and will be remembered between sessions.