
Research
Malicious npm Packages Impersonate Flashbots SDKs, Targeting Ethereum Wallet Credentials
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
@cdssnc/gcds-components
Advanced tools
Use GC Design System web components directly in HTML. These components are framework-agnostic and behave similarly to native HTML elements.
Use this option for:
If you’re using React, Angular, or Vue frameworks, browse the installation page for framework-specific options.
You can find the full documentation for GC Design System Components on https://design-system.alpha.canada.ca/.
Navigate to your project’s root folder and run the following command:
npm install @cdssnc/gcds-components
Add the following link
tags inside the head
tag of your HTML
files to load GC Design System:
<!-- GC Design System -->
<link
rel="stylesheet"
href="/node_modules/@cdssnc/gcds-components/dist/gcds/gcds.css"
/>
<script
type="module"
src="/node_modules/@cdssnc/gcds-components/dist/gcds/gcds.esm.js"
></script>
Once you've installed the design system, start building! Browse our available components and templates to pull the code you need into your project.
You have two options to receive updates from the CDN:
It’s highly recommended to use this option to ensure stability and predictability in your project.
Add the following code to the head
tag of your HTML
files to load GC Design System. Make sure the current version is listed.
<!-- GC Design System -->
<link
rel="stylesheet"
href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@<version-number>/dist/gcds/gcds.css"
/>
<script
type="module"
src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@<version-number>/dist/gcds/gcds.esm.js"
></script>
Note: <script type="module">
requires a server to load properly. If developing locally, use <script nomodule>
.
The code will remain unchanged until you manually update the version in the CDN URLs. This is ideal for production environments.
Check for new GC Design System versions regularly to update the latest pinned version.
@latest
versionUse the @latest
tag to pull the most recent version of GC Design System into your project. Put this tag in place of the version number.
While it removes the need to manually update versions, it adds the risk of introducing breaking changes to the codebase as new versions are automatically applied.
Once you've installed the design system, start building! Browse our available components and templates to pull the code you need into your project.
The gcds-component library works in multiple frameworks.
Please reference GC Design System Components – React
Please reference GC Design System Components – Angular
Please reference GC Design System Components – Vue
If you are interested in contributing to GC Design System Components, please read our contributing guidelines.
Code released under the MIT License.
Utilisez les composants Web de Système de design GC directement dans un projet HTML. Ces composants s’adaptent à tout cadriciel et ont un comportement similaire aux éléments HTML natifs.
Utilisez cette option pour les situations suivantes :
Si vous utilisez les cadres React, Angular ou Vue, consultez la page d’installation pour connaître les options propres à chaque cadre.
Toute la documentation sur les composants de Système de design GC est accessible à l’adresse https://systeme-design.alpha.canada.ca/.
Naviguez vers le dossier racine de votre projet et exécutez la commande suivante :
npm install @cdssnc/gcds-components
Ajoutez les balises link
suivantes à l’intérieur de la balise head
de vos fichiers HTML
pour charger Système de design GC :
<!-- GC Design System -->
<link
rel="stylesheet"
href="/node_modules/@cdssnc/gcds-components/dist/gcds/gcds.css"
/>
<script
type="module"
src="/node_modules/@cdssnc/gcds-components/dist/gcds/gcds.esm.js"
></script>
Une fois le système de design installé, commencez à créer! Parcourez nos composants et modèles pour y trouver le code dont vous avez besoin pour votre projet.
Vous avez deux options pour recevoir des mises à jour du CDN :
Il est fortement recommandé d’utiliser cette option pour garantir la stabilité et la prévisibilité de votre projet.
Ajoutez le code suivant à la balise head
de vos fichiers HTML
pour charger Système de design GC. Assurez-vous d’indiquer la version actuelle.
<!-- GC Système de design -->
<link
rel="stylesheet"
href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@<version-number>/dist/gcds/gcds.css"
/>
<script
type="module"
src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@<version-number>/dist/gcds/gcds.esm.js"
></script>
Remarque : <script type="module">
doit être chargé depuis un serveur. Pour le développement local, utilisez <script nomodule>
.
Le code restera inchangé jusqu’à ce que vous mettiez à jour manuellement la version dans les URL CDN, ce qui est idéal pour les environnements de production.
Vérifiez régulièrement s’il y a des nouvelles versions de Système de design GC afin de mettre à jour la dernière version épinglée.
@latest
(la dernière version)Utilisez la balise @latest
pour insérer la plus récente version de Système de design GC dans votre projet. Remplacez le numéro de version par cette balise.
Bien que cette approche vous évite la mise à jour manuelle des versions, elle court le risque d’introduire des modifications qui entraînent une rupture de compatibilité avec le code base à mesure que les nouvelles versions sont automatiquement appliquées.
Une fois le système de design installé, commencez à créer! Parcourez nos composants et modèles pour y trouver le code dont vous avez besoin pour votre projet.
La bibliothèque gcds-components fonctionne sous plusieurs cadres d'application.
Veuillez faire référence Composants de Système de design GC – React
Veuillez faire référence Composants de Système de design GC – Angular
Veuillez faire référence Composants de Système de design GC – Vue
Si vous souhaitez contribuer aux unités de style de Système de design GC, veuillez lire nos lignes directrices sur la contribution.
Code publié en vertu de la licence MIT (en anglais).
FAQs
Web components for the GCDS
The npm package @cdssnc/gcds-components receives a total of 669 weekly downloads. As such, @cdssnc/gcds-components popularity was classified as not popular.
We found that @cdssnc/gcds-components demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 9 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.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.