Actualité

La checklist Pidila rejoint DesignGouv

14 juin 2022

Refonte et migration technique de la checklist Pidila qui est désormais disponible sur design.numerique.gouv.fr

Scampi-Twig 0.6

12 mai 2020

  • mise à jour du package npm
  • passage à gulp 4
  • mise à jour de Scampi (v1)
  • le script anchor-focus.js comme un script par défaut dans tous les projets

Scampi 1.0 et Bloc-marque

10 avril 2020

Ajout du référentiel Bloc Marque dont l'objectif est d’identifier clairement là où l’État est présent, agit et finance.

La bibliothèque de composant passe en version 1.0.

  • Nouveau modules/marianne ou comment intégrer la nouvelle marque de l'État en respectant le RGAA
  • modules/select-a11y : correction d’anomalie dans la navigation au clavier (conflit entre les touches entrée et espace)
  • modules/block_link : précision dans la documentation

Checklist 2.0 - la suite

20 mars 2020

Les critères RGAA4 sont bien pris en compte dans la checklist PiDILA et relus.

Par ailleurs, nous échangeons avec la Cnil (Commission nationale de l'informatique et des libertés) sur l'intégration de critères de e-privacy.

Et nous n'oublions pas la Marque de l'État (gouvernement.fr)...

Scampi 0.9

15 octobre 2019

Gestion des vieux navigateurs modifiée : on ne gère plus les cas où la version d'ie est strictement inférieure à 10.

  • modules/block-link : Nouveau nom du module
  • modules/blockquote : Moins de variables de personnalisation de la police et des bordures
  • modules/svg-icons : Ajout de l'attribut download pour les fichiers en téléchargement
  • modules/collapse : Moins de contraintes sur la structure html de l'élément à déplier

Checklist 2.0

8 octobre 2019

Prise en compte des critères RGAA4 dans la checklist PiDILA.

Scampi 0.8

2 septembre 2019

modules/menu-simple : Identification de l'item actif autrement que par les css seules, avec ajout de texte caché.

Nouveau modules/skip-content : composant permettant d'afficher à la tabulation - et à la tabulation seulement - des liens pour éviter un contenu problématique (piège clavier, utilisation peu confortable pour les aides techniques, etc.)

modules/collapse Moins de contraintes sur la structure html de l'élément à déplier et amélioration des règles d'impression

Checklist 1.13

28 juin 2019

Ajout d'un nouveau référentiel : Plusieurs critères étaient liés au Référentiel général d'interopérabilité sans le citer ou indirectement. C'est désormais clarifié et précisé à travers les critères Pi-319, Pi-374 et Pi-375.
La catégorie de filtres "Référentiels" permet de trier ces critères.

Scampi 0.7

14 mai 2019

Cette version sert de beta pour une version 1.0.0.

Changements majeurs

  • Plus aucun script ne nécessite jquery (concerne : anchor-focus, collapse, menu-simple, modal, skip-link, textarea-counter, u-comments, u-palette)
  • Les scripts des modules modal et collapse ont été réécrits

Nouveaux modules

  • select-a11y : qui transforme un select (simple ou multiple) en liste de suggestions avec champ de recherche.
  • block-link : nouveau module permettant de créer un lien composite accessible (ex. image, titre, chapeau)

Améliorations

  • buttons-color : correction des variations de couleurs qui présentaient des déclinaisons avec des contrastes insuffisants
  • collapse : modifications pour permettre d'ouvrir tout par zones (ou tous les collapses de toute la page)
  • forms-inline : amélioration de la présentation par défaut pour que les éléments ne soient pas tous collés les uns aux autres

Scampi 0.6.1

19 avril 2019

Scampi est désormais également disponible en tant que module npm.

$npm install @pidila/scampi --save-dev

Quelques modifications ont été apportées pour faciliter l'utilisation sous cette forme, en particulier le renommage des fichiers principaux (ex. @import modules/alert/alert devient @import modules/alert/index).

La doc d'utilisation a été mise à jour sur le site pidila.gitlab.io.

Scampi-Twig 0.5

10 janvier 2019

**Infra** - mise à jour du package npm - renommage _assets > assets - mise à jour de Scampi (v0.5) - normalisation du nommage des tâches Gulp - le build permet de choisir une url de base optionnelle définie dans config.json - la tâche par défaut "gulp" liste les tâches disponibles **Index** - création d'un template et d'une css spécifiques pour l'index de projet **Styleguide** - normalisation et actualisation des fragments pour le styleguide pour refléter les changements intervenus sur la dernière version de Scampi, notamment svg-icons, links, forms, buttons - ajout d'un lien de retour vers l'index du projet depuis le styleguide - ajout d'une class (.sg) sur le body du styleguide pour pouvoir cibler des styles spécifiques **Templates** - intégration par défaut dans les gabarits (et les css) des éléments correspondant aux obligations/recommandations de la checklist Pidila : liens d'évitement, sprite svg, breadcrumb, browsehappy - macros twig d'usage courant (liens, icônes) > dev/templates/common/macro-generic.twig - import dans le template de base de la feuille de style en fonction de l'environnement : en dev, la css simplement compilée ; en prod, la css compilée et minifiée - le bloc des liens d'accès rapide a été supprimé de la zone banner et placé en premier dans la source - en production, on importe le fichier minifié des css

Scampi 0.5

8 janvier 2019

Amélioration du Core et de divers modules, avec notamment la modularisation en module principal plus feuilles scss additionnelles du module buttons, la mise à jour des démos et de la documentation des modules forms et alerts. ### Core core/core-scampi-settings : - remplacement de la font-stack 'sans-serif' par les system font (cf. http://markdotto.com/2018/02/07/github-system-fonts/ et https://css-tricks.com/snippets/css/system-font-stack/). - ajout de la fonction color-yiq pour le calcul des contrastes - ajout de la variable $font-weight-normal pour réutilisation dans les modules ### Modules modules/buttons : - modularisation en module principal plus feuilles scss additionnelles pour maîtriser l'ajout de règles css en fonction du projet ; - documentation et exemples. - mise à jour du tableau des sous modules du module button modules/forms : - mise à jour du tableau des sous modules du module forms - démo des module et sous modules en français modules/alert : - mise à jour de la documentation et ajout d'exemple

Scampi 0.4

24 septembre 2018

Amélioration du Core et de divers modules, avec notamment le regroupement en sous-modules des éléments de formulaire. Suppression du répertoire _tests, qui n'était pas utilisé. Déplacement du fichier récapitulatif scampi.scss qui y était présent vers la racine du dépôt. ### Core core/helpers : - définition d'une variable spécifique pour les paddings applicables aux éléments de class .container - suppression du padding-top par défaut sur l'élément .main-container ### Modules modules/browsehappy : - un poil de décoration modules/collapse : - gestion d'un libellé sur deux lignes - meilleur alignement des symboles ouvrir/fermer - définitions de variables (gestion de la valeur, de la couleur, de la taille et du positionnement du picto, paddings du bouton et de la zone dépliable) modules/forms - regroupement de tous les modules dérivés et dépendants de forms dans modules/forms avec liste des partials à inclure en fonction du projet - mise à jour des fragments twig - mise à jour de la doc

Scampi 0.3

27 mars 2018

Beaucoup de changements et améliorations dans cette nouvelle version, notamment sur le plan de l'accessibilité. #### Modifications de cette version 0.3 **Général :** Suppression du speak:none appliqué à des sélecteurs css (notamment lors d'ajouts de contenus décoratifs via :after ou :before) car cette règle n'est pas toujours bien respectée par les aides techniques. Lesdits contenus décoratifs sont désormais encapsulés (avec ou sans :before / :after) dans un span aria-hidden true. **Modules :** - blockquote : fix typo dans le mixin qui empêchait la prise en compte du font-style par défaut - breadcrumb : - sémantique html, construction en ol/li - déplacement du séparateur sur un span aria-hidden true - buttons : - ajout de variables pour les styles par défaut des boutons (class .btn) - collapse : - restauration de l'outline au focus qui avait disparu - placement du symbole dans un span aria-hidden=true - mise à jour du script en v1.8.0 - forms : - ajout d'une class .form-duo pour des champs côte à côte - suppression de l'outline:none sur le focus des inputs - ajout de messages d'erreurs in situ - correction d'une variable érronée d'une media query - menu-simple : - attribut aria-expanded true|false sur le bouton "hamburger" - amélioration cosmétique quand le libellé passe sur plusieurs lignes - wrapper jquery autour du script pour éviter les conflits avec les autres scripts - déplacement du séparateur sur un span aria-hidden true - modal : - bugfix: suppression du aria-hidden="true" quand la modale est ouverte - suppression du mixin opacity (montée des versions IE compat) - pagination : - ajout d'un role="navigation" sur nav - remplacement de l'aria-label par un title pour "page précédente/suivante" - ajout d'un title explicite sur chaque numéro de page ("page 1" ...) - site-banner-simple : - alt vide sur le logo - ajout d'une baseline - gestion du responsive des 3 éléments (logo, titre, baseline) - svg-icons : - ajout de l'attribut focusable false pour correction de bug IE11 - réglage à 1em de la taille par défaut - trois icônes livrées par défaut (lien externe, courriel, lien téléchargement) assorties de leur sprite - textarea-counter : - amélioration de la restitution du décompte par les aides techniques - u-comments : - attribut aria-expanded true|false sur le bouton déclencheur - ajout d'un effet au focus et au hover sur le bouton déclencheur - u-debug : - simplification de l'affichage du rythme vertical ### Dépendances : Suppression du fichier jquery.min.js ; c'est désormais à l'utilisateur de choisir la version qui lui convient et de l'importer dans son projet. La documentation reflète ce nouveau process. ### Documentation : - Liens dans modules/readme vers les pages de doc/démo sur le site du PiDILA - Actualisation et rafraîchissement des fichiers md de presque chaque module - Création de doc pour des modules qui en manquaient

Travaux en cours

10 mars 2018

Beaucoup de travaux en cours pour l'équipe en ce moment :

Refonte de la checklist

Il s'agit d'une refonte à la fois technique et rédactionnelle réalisée en collaboration avec la DINSIC. La nouvelle version offrira une interface plus agréable, une fonctionnalité de recherche, la possibilité d'enregistrer un lien vers une liste préfiltrée. Nous en profiterons pour relire l'ensemble des critères, les numéroter pour pouvoir y faire plus facilement référence et consoliderons les métadonnées de classement.

La nouvelle version intégrera les critères de la DINSIC pour la délivrance de l'homologation Cerfa des démarches en ligne.

Date de sortie : avant fin mars 2018.

Contenus et ergonomie du site

En parallèle des travaux sur la checklist, nous procédons à une série d’améliorations de l'ergonomie du site à la suite de retours utilisateurs.

La documentation de Scampi s'est enrichie de démonstrations de chaque module d'interface (attention, nous anticipons la mise à jour de Scampi, la documentation et les démos correspondent donc à cette future version).

Nous souhaitons aussi étoffer la rubrique Gestion de projet pour accompagner la maîtrise d'ouvrage le mieux possible.

Date de sortie : au fil de l'eau, en continu.

Nouvelle version de Scampi

Mise à jour de nombreux composants de Scampi et ajout de quelques nouveaux. Nous avons également procédé à une analyse très poussée de l'accessibilité des modules et procédé aux correctifs ou améliorations issus de cette analyse.

Date de sortie : avant fin avril 2018.

Nouvelle version de Scampi-Twig

Nous collectons nos retours d'expérience et ceux de nos utilisateurs sur la mise en œuvre de Scampi-Twig sur différents projets et nous procéderons à la réorganisation des fichiers et l'amélioration des scripts de tâches.

Date de sortie : avant fin juin 2018.

Mises à jour de Scampi et de Scampi-Twig

2 novembre 2017

Scampi passe en version 0.2 et offre de nouveaux modules :

  • input-group : réunir visuellement des boutons ou éléments de formulaires
  • menu-simple : composant minimal pour un menu horizontal rétractable en hamburger sur mobile
  • modal : fenêtre modale
  • pagination : groupe de boutons pour naviguer d’une page à l’autre, préc/suiv, début/fin
  • svg-icons : permet l’utilisation d’icônes svg réunies dans un sprite

Scampi-Twig version 0.3 suit cette évolution mais pas seulement : on a un peu modifié l’architecture pour que ce soit plus intuitif de savoir où trouver quoi.

Du neuf pour le design de ce site

4 mai 2017

Nous disposons désormais de jolis logos et illustrations pour notre équipe et nos outils. Retrouvez-les tous dans la page de notre guide de styles dans la section Identité visuelle/Logo et la section Identité visuelle/Icônes. La palette des couleurs a été adaptée à ces nouvelles images : elle figure dans la section Identité visuelle/Couleurs.

Publication de la checklist Pidila

20 mars 2017

Les 302 critères de la checklist Pidila sont enfin disponibles sur le web sous forme de checklist unique. Les critères sont filtrables par profil, référentiel, niveau ou thématique.
Découvrir la checklist Pidila.

Publication de Scampi-Twig en version 0.1 (beta)

15 novembre 2016

Scampi-Twig (actuellement en version 0.1-beta permet de générer des pages statiques avec Twig et Markdown et utiliser bien sûr Scampi pour les styles. Vous pouvez nous aider à améliorer cet outil en le testant et en ouvrant des bugs ou suggestions d’amélioration.

Publication de Scampi en version 0.1 (beta)

30 octobre 2016

Le dépôt de Scampi devient public. Il est actuellement présenté en version beta (0.1). Nous espérons pouvoir en sortir une version stable à la fin de l’année. Vous pouvez nous y aider en testant cet outil et en ouvrant des bugs ou suggestions d’amélioration.