@betagouv/ngx-dsfr
Advanced tools
This library aims to enable developers to use the [DSFR](https://gouvfr.atlassian.net/wiki/spaces/DB/overview?homepageId=145359476) in their Angular application 😊
This library aims to enable developers to use the DSFR in their Angular application 😊
The DSFR is the official Design System to be used in any web app linked to the French 🇫🇷 government.
This project is built on top of the @gouvfr/dsfr package and currently uses the version 1.7.2.
npm update @gouvfr/dsfr --save
libs/ngx-dsfr/assets/fonts~/@gouvfr/dsfr/dist/icons into libs/ngx-dsfr/assets/icons.min version ), from ~/@gouvfr/dsfr/dist/utility/icons into each associated folder in libs/ngx-dsfr/assets/icons :
for instance, put ~/@gouvfr/dsfr/dist/utility/icons/icons-buildings/icons-buildings.min.css into libs/ngx-dsfr/assets/icons/buildings~/@gouvfr/dsfr/dist/core/core.min.css into libs/ngx-dsfr/assets/styling/core-styling.cssngx-dsfr library
nx build ngx-dsfr
playground app
npm link # Inside dist/libs/ngx-dsfr
npm link @betagouv/ngx-dsfr # Inside the root of this workspace
First things first, in order to properly display anything provided by this library, you need to add to your app the required stylesheets.
angular.json file.project.json file.Then add this:
"node_modules/@betagouv/ngx-dsfr/assets/styling/core-styling.css",
"node_modules/@betagouv/ngx-dsfr/assets/icons/system/icons-system.min.css",
into the styles property of your build target:
"targets": {
"build": {
"executor": "@angular-devkit/build-angular:browser",
...,
"options": {
...,
"styles": [
...,
"node_modules/@betagouv/ngx-dsfr/assets/styling/core-styling.css",
"node_modules/@betagouv/ngx-dsfr/assets/icons/system/icons-system.min.css",
...
],
...
},
Just like @angular/material, this library has secondary entry-points to make sure you don't need to take the whole project with you when you're bundling an app that relies on only a few parts of it.
For instance, maybe your app only needs the link and header modules and not the rest of the library. In that case,
instead of having to embark with you the whole weight of ngx-dsfr, you just have to:
import { DsfrLinkModule } from '@betagouv/ngx-dsfr/link';
import { DsfrHeaderModule } from '@betagouv/ngx-dsfr/header';
And only the files enabling these features will be bundled into your built app 😃
Please refer to the associated README file for each module in this project to get further details on how to use it 😉
With the same goal to enable you to make your reliance on this library as lightweight as possible, you'll need to add a specific CSS file to your app's configuration for each icon category described in the DSFR's doc.
For instance, if you need to use the ancient-gate-fill icon, you'll first need to add
"node_modules/@betagouv/ngx-dsfr/assets/icons/buildings/icons-buildings.min.css"
to your angular.json or project.json, just like stated in the Pre-requisites section.
This library was generated with Nx.
🔎 Smart, Fast and Extensible Build System
Run nx build ngx-dsfr to build the project. The build artifacts will be stored in the dist/libs/ngx-dsfr directory.
The build phase actually goes through 3 steps:
package executor
of the @nx/angular Nx plugin. It uses ng-packagr
under the hood@gouvfr/dsfr project to match the new project structure. The adapt-css-paths executor
from our own @ngx-dsfr/architect Nx plugin is used herecore-styling.scss file is compiled into CSS, thanks to the sass packageRun nx test ngx-dsfr to execute the unit tests.
FAQs
This library aims to enable developers to use the [DSFR](https://gouvfr.atlassian.net/wiki/spaces/DB/overview?homepageId=145359476) in their Angular application 😊
We found that @betagouv/ngx-dsfr demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Research
A malicious npm campaign is targeting Ethereum developers by impersonating Hardhat plugins and the Nomic Foundation, stealing sensitive data like private keys.