Code du travail - Templates HTML et CSS

Notes sur les outils utilisés pour le développement CSS

PostCSS est utilisé pour le développement CSS.

Il permet de transformer le code CSS à l'aide de plug-ins JavaScript (voir le fichier postcss.config.js) :

• postcss-preset-env configuré pour tourner en stage 0
• postcss-import pour inliner les @imports CSS et mettre en place un système d'importation de partials (à la SASS ou Stylus)
• cssnano

Usage

<link rel="stylesheet" href="https://unpkg.com/@socialgouv/code-du-travail-css@latest/docs/bundle.css"/>

ou avec npm :

require("@socialgouv/code-du-travail-css");

Conseils pour contribuer

• Le résultat doit respecter les critères RGAA du référentiel du S.I. de l'État
• Le HTML doit être valide

Installation de l'environnement de développement

npm install

Puis, pour développer, lancez :

# - le watcher qui va générer le fichier `bundle.css`
npm run dev
# - un serveur web local pour servir le répertoire `docs/`
cd docs/ && python -m SimpleHTTPServer

Le serveur web local permet de contourner les limitations CORS des navigateurs pour servir correctement les @font-face par exemple.

Autres façons de lancer un serveur web local :

# JavaScript
npm install http-server
http-server . -p 8000

# Python 3.x
python -m http.server

Pourquoi les sources dans un répertoire docs/ ?

C'est une petite astuce pour utiliser GitHub Pages depuis la branche master.

Organisation du code CSS

docs/
    ├── css/
    │   ├── components/         # Style des composants de l'interface
    │   │   ├── _alerts.css
    │   │   ├── ...
    │   │   └── _header.css
    │   ├── elements/           # Style des éléments HTML de base
    │   │   ├── _table.css
    │   │   ├── ...
    │   │   └── _link.css
    │   ├── global/
    │   │   ├── _classes.css    # Classes pouvant être affectées à plusieurs éléments
    │   │   ├── _conf.css       # Configuration : @font-face, @custom-media, variables
    │   │   └── _layout.css     # Système de mise en page
    │   └── styles.css          # Fichier principal utilisé par le watcher pour générer bundle.css
    └── bundle.css              # Fichier généré à la volée utilisable en production

Icônes

Les icônes proviennent de flaticon.com :

• https://www.flaticon.com/packs/interview-5
• https://www.flaticon.com/packs/miscellaneous-elements
• https://www.flaticon.com/packs/startups-16
• https://www.flaticon.com/packs/money-37

Lorsqu'un nouveau pack d'icônes est utilisé, on ajoute son répertoire dans docs/assets/icons_source/ et on optimise son contenu avec svgo :

./node_modules/.bin/svgo -f docs/assets/icons_source/money-37/

On change la couleur principale des icônes à la main dans les fichiers SVG :

fill="#4c5467"
<svg xmlns="http://www.w3.org/2000/svg" ... fill="#4c5467">

Quand on veut utiliser une icône, on la copie depuis docs/assets/icons_source/ vers docs/assets/icons/.

Ça nous permet de :

• pouvoir facilement retrouver la provenance d'une icône
• pouvoir supprimer les icônes inutilisées par l'interface dans docs/assets/icons/