Guidelines Component

Component for generating a preview of the project configurations. Provides a detailed view of the design guidelines by reading the custom-properties present in the :root selector. The guidelines are presented divided into the following sections:

Grid: This section displays a sample grid based on the value of the dataGridCols prop. Developers can see how a grid is displayed across different breakpoints.

Spacings: Displays the different available spacing classes.

Palette: Lists the various color custom-properties used in the application, showing both the property name and the color value.

Shadow: Displays various shadow styles that can be applied to elements.

Typography: Shows the different available typographic classes.

Breakpoints: Provides details about the different breakpoints used in the application and about the utilities associated with these breakpoints by showing the responsive value of these utilities at different breakpoints.

These guidelines can be used by developers and designers to ensure consistency and standardization within the project.

Componente per la generazione di un'anteprima delle configurazioni di progetto. Fornisce una visualizzazione dettagliata delle linee guida di design leggendo le custom-properties presenti nel selettore :root. Le linee guida vengo presentate suddivise per le seguenti sezioni:

Grid: Questa sezione mostra una griglia di esempio basata sul valore della props dataGridCols. Gli sviluppatori possono visualizzare come viene mostrata una griglia in base ai diversi breakpoints.

Spacings: Mostra le diverse classi di spaziatura disponibili.

Palette: Elenca le varie custom-properties dei colori utilizzate nell'applicazione, mostrando sia il nome della proprietà che il valore del colore.

Shadow: Mostra diversi stili di ombreggiatura che possono essere applicati agli elementi.

Typography: Mostra le diverse classi tipografiche disponibili.

Breakpoints: Fornisce dettagli sui diversi breakpoints utilizzati nell'applicazione e sulle utility associate a tali breakpoints mostrando il valore responsivo di queste utility ai diversi breakpoints.

Queste linee guida possono essere utilizzate dagli sviluppatori e dai designer per garantire coerenza e standardizzazione all'interno del progetto.

API Reference

Props

| Name | Type | Description | |:-----------------|:---------|:-----------------------------------------------------------------------------------------| | data-grid-cols | number | Number of the grid columns. A different value at different step breakpoints is expected. |

CSS variables

| Name | default | Description | |:--------------------------|:---------|:-----------------------------------------------------------------------------------------------------------------------| | --grid-overlay-bg-color | violet | The background color of the grid overlay. This takes effect only if the class .grid-overlay is present on tag body |

Usage/Examples

<guidelines-cmp />