@pidila/scampi

Scampi est un ensemble de composants sass/js/html accessibles et responsive développés à la DILA (Direction de l’information légale et administrative). Il vise à être utilisé en interne et par nos prestataires ou partenaires.

Usage no npm install needed!

<script type="module">
  import pidilaScampi from 'https://cdn.skypack.dev/@pidila/scampi';
</script>

README

Scampi

Scampi est un ensemble de composants sass/js/html accessibles et responsive développés à la DILA (Direction de l’information légale et administrative). Il vise à être utilisé en interne et par nos prestataires ou partenaires.

Documentation et démos

Table des matières

  1. Contenu du dépôt
  2. Dépendances
  3. Installation
  4. Documentation
  5. Contributions
  6. Ressources tierces
  7. Auteurs
  8. License

Contenu du dépôt

Répertoires de ce dépôt :

  • core/ : base sass pour tous les projets et sa documentation.
  • modules/ : composants additionnels (scss, js) et leur documentation.
  • le fichier scampi.scss présente un "sommaire" des fichiers de la bibliothèque
  • le présent README

Note : les modules préfixés '''u-''' sont destinés à la phase de développement et l’élaboration de styleguide.

Dépendances

Scampi est développé à l’aide du préprocesseur Sass. Il vous faudra donc disposer d’un outil de compilation. Le pôle internet utilise la version gulp-sass de nodejs mais vous pouvez utiliser tout compilateur de votre choix.

Dans le cas d'utilisation de gulp-sass, ne pas oublier de le configurer pour accepter l'import depuis node_modules :

.pipe(sass({
  ...
  includePaths: ['node_modules']
})

Installation

Il existe trois méthodes pour utiliser Scampi dans un projet :

En module npm ou yarn

Si votre projet comporte déjà des dépendances à des modules listés dans le fichier package.json.

  $ npm install @pidila/scampi

Remplacez la commande npm par yarn si vous le désirez.

En submodule git

Scampi peut également être utilisé en déclarant un submodule au sein de votre dépôt. Attention en ce cas à ajuster les chemins d'import des fichiers.

En téléchargeant Scampi

Téléchargez l’archive de Scampi et placez-la dans votre répertoire de styles. Cette méthode vous autorise à modifier ses fichiers pour votre propre usage mais en perdant l'opportunité de le mettre à jour automatiquement.

Documentation

Sauf mention précisée dans sa documentation, chaque module est utilisable sans dépendre d’aucun autre et ne nécessite que le chargement du core.

Un fichier markdown est présent dans chaque module pour documenter son but et son usage. Lire les principes d’utilisation et de personnalisation d’un module.

Contributions

Les contributions sont les bienvenues. La façon la plus simple est de forker ce dépôt puis de faire des pull request depuis celui-ci. Idéalement vous devriez consulter au préalable notre guide du contributeur.

Si vous détectez une anomalie ou souhaitez proposer une évolution vous pouvez également ouvrir un bug sur le tracker de notre dépôt.

Le projet est versionné selon la gestion sémantique de version.

Ressources et bibliothèques tierces parties utilisées

nom version licence url informations complémentaires
Adobe Blank v1.045 SIL OPEN FONT LICENSE Version 1.1 https://github.com/adobe-fonts/adobe-blank module adobe-blank
Debugging Sass Maps --- --- https://www.sitepoint.com/debugging-sass-maps/ module u-debug
Responsive-typography --- --- https://github.com/liquidlight/responsive-typography module rwd-utils
Bootstrap v4 MIT License https://github.com/twbs/bootstrap modules alert, blockquote, buttons, forms, tables
Svguse V1.2.4 MIT License https://github.com/Keyamoon/svgxuse
Feathericons dev MIT Licence https://github.com/feathericons/feather

Auteurs

Pidila (Pôle intégration HTML de la DILA).

Contact

pidila@dila.gouv.fr

Liste d’échanges et d’information :

S’abonner.

License

Scampi est distribué sous une double licence : MIT et CeCILL-B.

Vous pouvez utiliser Scampi avec l’une ou l’autre licence.

La documentation est sous licence Creative Commons CC BY-SA 3.0.

Note : cette page s’inspire de https://github.com/edx/ux-pattern-library