### Serve DSFR Example Pages Locally Source: https://github.com/gouvernementfr/dsfr/blob/main/README.md Installs browser-sync and serves the DSFR example pages locally. This allows for easy visualization of components and page templates. ```bash npm install browser-sync cd node_modules/@gouvfr/dsfr/ npm run serve ``` -------------------------------- ### JavaScript Installation Source: https://github.com/gouvernementfr/dsfr/blob/main/src/dsfr/component/transcription/_part/doc/code/index.md Instructions for importing the necessary JavaScript files for DSFR components. It recommends importing them before the closing `` tag and using minified files. It also lists JS dependencies and provides examples for both modern and legacy (Internet Explorer 11) browsers. ```APIDOC ## JavaScript Installation ### Description Instructions for importing the necessary JavaScript files for DSFR components. It recommends importing them before the closing `` tag and using minified files. It also lists JS dependencies and provides examples for both modern and legacy (Internet Explorer 11) browsers. ### Dependencies - Core (Required) - Modal (Required) - Transcription (Required) ### Example Imports (Modern) ```html ``` ### Example Imports (Legacy - IE11) ```html ``` ### Global JS Import It is also possible to import the global DSFR JS: `dsfr.module.min.js`. ``` -------------------------------- ### Run Full Project Build (dist, examples, tests) Source: https://github.com/gouvernementfr/dsfr/blob/main/CONTRIBUTING.md Executes the complete project build process, generating distribution files, examples, and running all tests. This command is typically used for releases. ```shell yarn release ``` -------------------------------- ### Conventional Commit examples Source: https://github.com/gouvernementfr/dsfr/blob/main/CONTRIBUTING.md Examples of standard commit messages, including a simple feature addition and a fix with a breaking change footer. ```text feat: ajout du composant Alerte ``` ```text fix(core): maj mixin: ancien-nom devient nouveau-nom BREAKING CHANGE: nouveau nom pour la mixin .... ``` -------------------------------- ### Install DSFR using Yarn Source: https://github.com/gouvernementfr/dsfr/blob/main/README.md Installs the DSFR package using Yarn. Requires Node.js and a package.json file. The package contains all necessary components. ```bash yarn add @gouvfr/dsfr ``` -------------------------------- ### Install DSFR using NPM Source: https://github.com/gouvernementfr/dsfr/blob/main/README.md Installs the DSFR package using npm. Requires Node.js and a package.json file. The package contains all necessary components. ```bash npm install @gouvfr/dsfr ``` -------------------------------- ### Configure Grid Containers and Gutters Source: https://github.com/gouvernementfr/dsfr/blob/main/src/dsfr/core/_part/doc/grid/index.md Examples of setting up grid containers with or without external margins and gutters. Use 'fr-container' for standard margins and 'fr-container--fluid' for full-width layouts. ```HTML

``` ```HTML

``` -------------------------------- ### Installer le package DSFR Source: https://context7.com/gouvernementfr/dsfr/llms.txt Commandes pour installer la bibliothèque DSFR dans un projet via les gestionnaires de paquets npm ou yarn. ```bash npm install @gouvfr/dsfr yarn add @gouvfr/dsfr ``` -------------------------------- ### DSFR JavaScript API Interaction Example Source: https://github.com/gouvernementfr/dsfr/blob/main/src/dsfr/component/tooltip/_part/doc/code/index.md Interact with DSFR component instances using the `window.dsfr()` method. This example demonstrates how to get a tooltip instance and call its `show()` method. The API allows control over component behavior. ```javascript const elem = document.getElementById('ID_TOOLTIP'); dsfr(elem).tooltip.show(); ``` -------------------------------- ### Integrate TarteAuCitron with CMP Source: https://github.com/gouvernementfr/dsfr/blob/main/src/dsfr/analytics/_part/doc/code/installation/cmp/index.md This method allows for the integration of TarteAuCitron with the Consent Manager Platform. It is equivalent to the initial setup step described in the Eulerian documentation for CMP installation. ```javascript window.dsfr.analytics.cmp.integrateTarteAuCitron() ``` -------------------------------- ### CSS Installation Source: https://github.com/gouvernementfr/dsfr/blob/main/src/dsfr/component/transcription/_part/doc/code/index.md Instructions for importing the necessary CSS files for DSFR components. It emphasizes importing them in the `` section before page content and suggests using minified files for better performance. It also details the CSS dependencies. ```APIDOC ## CSS Installation ### Description Instructions for importing the necessary CSS files for DSFR components. It emphasizes importing them in the `` section before page content and suggests using minified files for better performance. It also details the CSS dependencies. ### Dependencies - Core (Required) - Button (Required) - Modal (Required) - Transcription (Required) ### Example Imports ```html ``` ``` -------------------------------- ### Install DSFR JavaScript for Consent Manager (Modern Browsers) Source: https://github.com/gouvernementfr/dsfr/blob/main/src/dsfr/component/consent/_part/doc/code/index.md Include the necessary DSFR JavaScript files for the Consent Manager and its dependencies at the end of your HTML body, before the closing `` tag. This example shows the module imports for modern browsers. ```html ``` -------------------------------- ### Installation du JavaScript Core pour la Gestion des Ratios Source: https://github.com/gouvernementfr/dsfr/blob/main/src/dsfr/component/content/_part/doc/code/index.md Importe le fichier JavaScript principal du DSFR (`core.min.js`) en fin de page pour activer la gestion automatique des ratios des médias sur les navigateurs modernes. Ce script est nécessaire pour assurer la compatibilité des ratios. ```html ``` -------------------------------- ### Installation du JavaScript Core Legacy pour IE11 Source: https://github.com/gouvernementfr/dsfr/blob/main/src/dsfr/component/content/_part/doc/code/index.md Importe le fichier JavaScript legacy du DSFR (`core.legacy.min.js`) avec l'attribut `nomodule` pour assurer la compatibilité avec Internet Explorer 11. Ce script fournit un fallback pour les navigateurs ne supportant pas les fonctionnalités modernes. ```html ``` -------------------------------- ### DSFR Modal JavaScript Installation Source: https://github.com/gouvernementfr/dsfr/blob/main/src/dsfr/component/modal/_part/doc/code/index.md Instructions for installing the necessary JavaScript files for the modal component to function. ```APIDOC ## JavaScript Installation ### Description To enable the modal component's functionality, JavaScript is required. Each component with JavaScript dependencies needs its specific JS file and the core JS file. ### Method Import the following script files at the end of your page, before the closing `` tag. ### Endpoint N/A (Client-side JavaScript) ### Parameters N/A ### Request Example ```html ``` **Note:** You can also import the global DSFR JavaScript file: `dsfr.module.min.js`. For Internet Explorer 11 compatibility, import the legacy ES5 `nomodule` files: ```html ``` ### Response N/A ### Success Response (200) N/A ### Response Example N/A ``` -------------------------------- ### JavaScript Installation and Usage Source: https://github.com/gouvernementfr/dsfr/blob/main/src/dsfr/component/range/_part/doc/code/index.md Instructions for installing and using the JavaScript required for the range component, including core and specific component JS files. ```APIDOC ## JavaScript Installation and Usage ### Description This section details the JavaScript requirements for the DSFR range component. It explains how to import the necessary JS files (core and component-specific) and mentions the option to import a global JS file. It also covers the legacy support for Internet Explorer 11. ### Method JavaScript Import ### Endpoint N/A ### Parameters N/A ### Request Example ```html ``` ### Response N/A ### Notes - It is also possible to import the global DSFR JS: `dsfr.module.min.js`. - Once the JavaScript is loaded, the component functions automatically. ``` -------------------------------- ### Implement account creation step 1 with DSFR Source: https://github.com/gouvernementfr/dsfr/blob/main/src/dsfr/layout/page/register/_part/doc/index.md This HTML snippet demonstrates the layout for the first step of a registration process. It includes a progress stepper, a FranceConnect authentication button, and a standard input field for user identifiers. ```html

Création de compte sur [Nom de service-site]

Chapô — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.

Choisir un identifiant Étape 1 sur 3

Étape suivante : Renseigner une identité

Se créer un compte avec FranceConnect

FranceConnect est la solution proposée par l’État pour sécuriser et simplifier la connexion aux services en ligne.

Qu’est-ce que FranceConnect ?

Description — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sauf mention contraire, tous les champs sont obligatoires.

Identifiant Format attendu : nom@domaine.fr

``` -------------------------------- ### CSS Imports for Highlight Component Source: https://github.com/gouvernementfr/dsfr/blob/main/src/dsfr/component/highlight/_part/doc/code/index.md Shows how to import the necessary CSS files for the highlight component and its dependencies. The imports should be placed in the section of the HTML document, preferably using minified files for better performance. Core and Highlight CSS are mandatory. ```html ``` -------------------------------- ### DSFR Modal API Example Source: https://github.com/gouvernementfr/dsfr/blob/main/src/dsfr/component/modal/_part/doc/code/index.md This example illustrates how to interact with a DSFR modal instance using the JavaScript API. It retrieves the modal element and calls the `disclose` method. ```javascript const elem = document.getElementById('modal'); dsfr(elem).modal.disclose(); ``` -------------------------------- ### Run Development Build (CSS, JS, HTML only) Source: https://github.com/gouvernementfr/dsfr/blob/main/CONTRIBUTING.md Generates only CSS, JS, and HTML files for development purposes. This command is faster as it skips tests and compilation of certain file types like .map, .md, .min.css, and .nomodule.js. It supports recompiling specific packages using the -p flag. ```shell yarn build ``` -------------------------------- ### Implement Follow Component Structure with HTML Source: https://github.com/gouvernementfr/dsfr/blob/main/src/dsfr/component/follow/_part/doc/code/index.md This snippet demonstrates the full structure of the Follow component, including a newsletter subscription form with email input and a social media link group. It uses standard DSFR grid and utility classes to ensure responsive behavior. ```HTML

Abonnez-vous à notre lettre d’information

Lorem ipsum (...) finibus et.

Suivez-nous
sur les réseaux sociaux

``` -------------------------------- ### DSFR Tabs JavaScript API Interaction Example Source: https://github.com/gouvernementfr/dsfr/blob/main/src/dsfr/component/tab/_part/doc/code/index.md Example of interacting with DSFR Tabs instances using the JavaScript API. The `dsfr(instance)` method from the core provides access to component methods and properties. ```JavaScript const elem = document.getElementById('ID_TAB'); dsfr(elem).tabsGroup.isEnabled; ``` -------------------------------- ### Imports CSS requis Source: https://github.com/gouvernementfr/dsfr/blob/main/src/dsfr/component/content/_part/doc/code/index.md Exemple d'importation des fichiers CSS nécessaires au fonctionnement du composant. Ces fichiers doivent être placés dans le du document. ```HTML ``` -------------------------------- ### CSS Installation for Breadcrumb Component Source: https://github.com/gouvernementfr/dsfr/blob/main/src/dsfr/component/breadcrumb/_part/doc/code/index.md Demonstrates how to install the necessary CSS files for the Breadcrumb component. It highlights the core and breadcrumb specific CSS files that need to be included in the HTML head for proper styling and functionality. ```html ``` -------------------------------- ### Sidemenu JavaScript Installation Source: https://github.com/gouvernementfr/dsfr/blob/main/src/dsfr/component/sidemenu/_part/doc/code/index.md Provides the necessary HTML script tags to install the Sidemenu JavaScript component, including core and component modules. Supports both modern module imports and legacy ES5 for Internet Explorer 11. ```HTML ``` ```HTML ``` -------------------------------- ### Install DSFR Modal JavaScript (Legacy ES5) Source: https://github.com/gouvernementfr/dsfr/blob/main/src/dsfr/component/modal/_part/doc/code/index.md This snippet demonstrates how to install the DSFR modal component's JavaScript for Internet Explorer 11 using legacy ES5 nomodule scripts. It includes the core, modal, and legacy modules. ```html ``` -------------------------------- ### Apply Heading Styles with Classes (HTML) Source: https://github.com/gouvernementfr/dsfr/blob/main/src/dsfr/core/_part/doc/typography/index.md Demonstrates how to apply graphical characteristics of one heading level to another using DSFR's `fr-h` classes. This allows for visual styling flexibility while maintaining semantic structure. For example, applying `fr-h1` to an `

` tag will make the `

` appear as an `

` visually. ```html

This h3 visually looks like an h1

``` -------------------------------- ### DSFR Tableau HTML Structure Example Source: https://github.com/gouvernementfr/dsfr/blob/main/src/dsfr/component/table/_part/doc/code/index.md Provides a complete HTML structure for the DSFR Tableau component. This example demonstrates the nested div structure with specific classes (`fr-table`, `fr-table__wrapper`, `fr-table__container`, `fr-table__content`) and the essential table elements (``, ``, ``, ``, `

`, `

`). ```html

Titre du tableau (caption)
th0	th1	th2	th3
Lorem [...] elit ut.	Lorem [...] elit ut.	Lorem [...] elit ut.	Lorem [...] elit ut.
Lorem [...] elit ut.	Lorem [...] elit ut.	Lorem [...] elit ut.	Lorem [...] elit ut.
Lorem [...] elit ut.	Lorem [...] elit ut.	Lorem [...] elit ut.	Lorem [...] elit ut.
Lorem [...] elit ut.	Lorem [...] elit ut.	Lorem [...] elit ut.	Lorem [...] elit ut.

``` -------------------------------- ### Install DSFR CSS Dependencies Source: https://github.com/gouvernementfr/dsfr/blob/main/src/dsfr/component/display/_part/doc/code/index.md Imports the necessary DSFR CSS files for the Display component and its dependencies. Core, Form, Modal, Radio, Scheme, and Display CSS are required. It's recommended to use minified files for better performance. ```html ```