DSFR for Drupal

The DSFR for Drupal base theme provides a full set of reusable DSFR components using the Single Directory Components (SDC) approach.
This base theme must be extended by a sub-theme. The theme DSFR for Drupal can easily be integrated in your website, and is compatible with any site building strategy.

DSFR for Drupal also includes a complete DSFR configuration settings, including: Marianne logo label, light and dark themes, mourning mode, menu display (standard or mega-menu)…

DSFR for Drupal base theme can be used both on an existing site (with a gradual DSFR components integration strategy) or on a new site (full DSFR design building).

Legal Considerations

The use of the DSFR is strictly reserved for French State administration and operators only.

Please read the following page for more information: Scope of DSFR use (in French).

Requirements

This theme requires the following modules:

• Inline form error (asked by DSFR maintainers)
• Single directory component (included since Drupal 10.1 ; moved to core since Drupal 10.3.0, no module install needed)

Components

The DSFR for Drupal theme contains more than 50 single directory components, including the full list of official DSFR components.

If you would like to know more about the French Design System, please read: Full DSFR components list (in French).

More information about Single Directory Components.

Utilities

Breakpoints

Native DSFR breakpoints list (mainly for responsive images).

Layout

Native DSFR layouts with ready to use grid system for Layout Builder.

How to install

Manual installation

1. Download the library from https://github.com/GouvernementFR/dsfr
2. Place the library in the root libraries folder (/libraries/dsfr).

Finally, enable and set as default "DSFR for Drupal" theme in the Drupal theme list.

Composer-based installation

Method 1 - using composer-merge-plugin (recommended for versions 2.x of the theme)

This method has the advantage of placing the maintenance of the plugin version on the hands of the module maintainers. To add the composer-merge-plugin, run
composer require wikimedia/composer-merge-plugin.

Then, update the extra section of the root composer.json file as follows:

    "extra": {
        "merge-plugin": {
            "include": [
                "[web-root]/themes/contrib/dsfr4drupal/composer.libraries.json"
            ]
        }
    }

Replace [web-root] with the value of your web root folder (usually web).
Run composer require drupal/dsfr4drupal gouv/dsfr,
the DSFR library will be installed to the libraries folder automatically.

Method 2 - using a custom repository

Copy the following into the root composer.json file's repository key.

    "repositories": [
        {
            "type": "package",
            "package": {
                "name": "gouv/dsfr",
                "version": "1.15.1",
                "type": "drupal-library",
                "dist": {
                    "url": "https://registry.npmjs.org/@gouvfr/dsfr/-/dsfr-1.15.1.tgz",
                    "type": "tar"
                },
                "require": {
                  "composer/installers": "~1.0 || ~2.0"
                }
            }
        }
    ]

Run composer require drupal/dsfr4drupal gouv/dsfr, the DSFR library will be installed to the libraries folder automatically as well.

Configuration

Several configurations options are listed in the theme settings.
Go to the appearance settings page to customize your theme.

Release management

• The 1.6.x releases include DSFR up to version 1.15.1.
  This project version is in minimal maintenance mode and will only receive corrective releases; it will not receive DSFR version upgrades.
• The 2.x releases incorporate the new object-oriented hook implementations. Consequently, they are not compatible with Drupal core versions earlier than 11.3. Only this project version will continue to be actively maintained.

Relative Modules

For a better experience, we invite you to use these modules in addition to the theme DSFR for Drupal:

• DSFR for Drupal - Colors : Add a new field type to select DSFR colors.
• DSFR for Drupal - Editor : Add DSFR behaviors to rich text editor.
• DSFR for Drupal - Links : Include DSFR recommendations for external links.
• DSFR for Drupal - Picker : Add new field types to select DSFR icons and pictograms.

Sponsors