Living Design System for Paris Web's site and other communication formats
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.circleci
scripts
site
src
.babelrc
.eslintrc
.gitignore
.nvmrc
CONTRIBUTING.md
LICENSE
README.md
VICTOR_HUGO_LICENSE
docker-compose.yml
gulpfile.babel.js
package-lock.json
package.json
webpack.conf.js

README.md

Paris Web Design System

Accéder au Design System

Toute aide est la bienvenue, quelle qu'en soit la forme ! Remarques, remontées de bugs, PRs ou toute autre formes de contributions seront appréciées. Si vous ne savez pas par où commencer, les règles de contributions peuvent être un bon point de départ.

Concept

Le but de ce dépôt est d'implémenter et documenter les différents composants faisant partie du Design System de Paris Web.

C'est ici aussi que les fichiers CSS et JS sont générés pour le site de www.paris-web.fr.

Usage

Prerequisites

Il faut installer node et npm sur vos machines.

Ensuite, récupérez ce dépôt et installez les dépendances avec la commande suivante :

npm install

Development

Pour faire tourner une instance locale du site, executez la commande suivante :

npm start

Vous pouvez ensuite aller sur http://localhost:3000/ - à moins que votre navigateur ne se soit ouvert tout seul.

Static build

Pour compiler le site, executez la commande suivante :

npm run build

Les fichiers seront ensuite disponibles dans le dossier /dist.

Parmi ces fichiers, les fichiers app.js et css/main.css sont les fichiers qui pourront être utilisés directement sur le site de Paris Web.

Déploiement

Pour déployer le site exécuter le script ./scripts/deploy.sh.

Note : il faut avoir un accès SSH autorisé à la machine hébergeant le site. Voir https://wiki.paris-web.fr/display/association/Sites+web pour plus d'informations.

Cependant, cela ne devrait pas être utilisé au jour le jour. En effet, une intégration CricleCI a été mise en place et permet de déployer chaque commit. L'URL n'est pour l'instant pas publique, il faut que nous nous en occupions.

Structure

La brique utilisée pour générer le Design System est Hugo. C'est un générateur de site statique. Vous pourrez donc retrouver la même structure de fichier que sur tout autre site en Hugo. La seule différence est que les fichiers CSS et les fichiers JS sont mis à part afin d'ajouter une étape de compilation (PostCSS et Webpack).

|--site
|  |--content                  // Les pages du design system
|  |--layouts                  // Les templates utilisés pour afficher les pages
|  |  |--_default/single.html  // La structure de vos pages de design system
|  |--static                   // Les fichiers statiques nécessaires à la compilation
|--src                         // Sources des assets
|  |--css
|  |--js

Elements propres au Design System

Ce Design System permet au pôle design de discuter des évolutions de celui-ci et valider les implémentations réalisées. Cependant, il est aussi utile aux intégrateurs afin de voir quel HTML utiliser pour afficher tel ou tel composant.

Pour cela, nous avons mis en place le shortcode {{< example >}}. En le mettant autour d'un bout de HTML, vous permettez à celui qui visualise le styleguide d'afficher le code en cliquant sur le composant.

Cela a été implémenté dans la page Logo si vous voulez voir ce que cela donne.

{{< example >}}
<p>Le HTML de mon composant</p>
{{< /example >}}

Merci

Victor Hugo (cf. VICTOR_HUGO_LICENSE)