Styleguide
Éléments de charte graphique et composants du site
Couleurs
Les couleurs du thème sont organisés en trois couples, avec une couleur principale (utilisée pour les fonds notamment) et son accent (utilisée pour les boutons) :
- FLOWER (principale) et ABYSS (accent),
- SUN (principale) et MIST (accent),
- LAGOON (principale) et GROUND (accent).
Les noms sont inventés et ne correspondent pas à des valeurs standards.
En plus de ça il existe deux couleurs techniques : light et dark.
FLOWER
FLOWERABYSS
ABYSSSUN
SUNMIST
MISTLAGOON
LAGOONGROUND
GROUNDLIGHT
LIGHTDARK
DARKPolices
Sur le site, il y a deux polices différentes :
- Rubik Regular, utilisée pour le texte de base,
- Roboto Slab Light pour les titres, les citations (composant Quote) et les noms de composants.
Layout
Contient les éléments structurels communs à toutes les pages du site.
Il inclut :
Back to top
Un bouton flottant pour remonter en haut de la page.
Row
Une section de page : un titre et un id optionnel et surtout du contenu.
Le composant peut accueillir optionellement une liste de mots-clés, affiché par une Badges list
Spécialisations
Le composant peut être encapsulé et pré-configuré en d'autres composants de la même échelle, plus spécialisés.
Pour l'instant, la seule spécialisation est PageHeader.
PageHeader
Affiche les titre et sous-titre de la page sous la forme d'une bannière, étendue sur l'intégralité de la largeur de la page.
Peut contenir les composants pré-réglés :
Un PageHeader tout simple
Juste le titre et le sous-titre
Quote
Met en valeur un texte et, si applicable, affiche son auteur et sa source.
Ceci est une simple citation.
Ceci est une citation avec auteur et source- Source optionnelle,Auteur optionnel
Project
Présente les grandes lignes d'un projet, avec : sa stack, sa date, son contenu.
Affiché dans le Carousel.
Titre du projet
full-stacktag 1tag 222 juin 2022
Articles list
Sur la page Blog, affiche la liste des articles du site.
Motifs list
Sur la page Motifs de conception, affiche la liste des articles du site.
| Nom du motif | Description | Synonymes |
|---|
Badges list
Affiche une liste inline de badges pilules.
La couleur des badges peut être paramétrée individuellement au besoin.
Badge 1Badge 2