Charte graphique
Des couleurs...
#3d4752Secondary
#3d4752
Des Typographies...
Corps de Texte : Roboto Slab
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris himenaeos.
Here goes your text ... Select any part of your text to access the formatting toolbar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris himenaeos. Fusce nec tellus sed augue semper porta. Vestibulum lacinia arcu eget nulla per conubia. Class aptent taciti sociosqu ad litora torquent.
Pour les titres : Patrick Hand
Titres h2 avec la classe gg-titre-h2
Pour les icones, choisir la catégorie Fontawesome solid
Assigner les classe gg-icone-rouge, gg-icone-bleu, gg-icone-gris
Des boutons
On utilise les propriétés de boutons de base, taille large
Les boutons pleine largeur sont des Composants
>> accessibles en ajoutant un élément (bouton + en haut à gauche), onglet "composants".
La couleur se change avec les variants.
L'avantage du composant : tu ne touches pas au design, tu ne fais que remplir le titre et le lien du bouton.
Bouton flèche rouge (composant)
Bouton flèche bleu (composant)
La disposition : Section, colonnes, conteneurs
La section
utilisée pour appliquer un fond particulier, elle prend toute la largeur de l’écran.
Pour les section, la majorité des réglages se fait sur l’arrière plan (4eme icone tout à gauche). On peut y appliquer :
- une image de fond
- une couleur de fond
J’ai créé une classe pour un léger dégradé pour passer d’une section à une autre (comme sur celle-ci) : appliquer la classe gg-section-bg-degrade sur la section
Le conteneur
C’est lui qui gère la disposition du contenu (centré, milieu, à gauche…), il fait 100% de largeur et peut gérer la disposition en colonne.
Il y en a 2 types :
- flex : par exemple pour ajouter une succession de blocs dont le nombre peut varier. Cela permet un retour à la ligne (« wrap ») quand la largeur est trop grande, et il n’y a pas d’autre réglages à faire pour les petits écrans, cela s’adapte à toutes les tailles.
- grid : pour gérer les colonnes, on peut faire un agencement de colonnes assez sophistiqué, mais il faut ensuite veiller à les adapter sur les petites tailles d’écran.
Le div
c’est juste un élément hmtl qui permet de regrouper les éléments entre eux et de leur assigner des styles à ce niveau
Le texte du div est bleu, pour tous les styles de textes.
Par contre ce deuxième élément est rouge, le style prend le dessus sur celui du div.
Il n'y a pas d'autre style paramétré sur un div.
Le bloc
C’est un élément div sur lequel on a appliqué le style « flex ».
La direction est en colonne, par défaut.
On voit que les espacements sont gérés un peu plus que sur un div : largeur 100%, espacement (gap) entre les lignes et les colonnes…
Colonne "flex"
La galerie de logos est une colonne flex. Elle a pour classe gg-galerie-logos.
En plus d'être flex, elle permet de gérer la couleur des logos à l'intérieur avec un petit bout de code.
Colonnes "grid"
Deux colonnes, 2/3 - 1/3
Appliquer la classe .gg-container-col-2-1 sur le conteneur parent.
Ajouter des blocs ensuite, qui regroupent les différents éléments en colonne.
Pour une disposition 1/3 - 2/3, ce sera la classe .gg-container-col-1-2
2 ou 3 colonnes
appliquer la classe .gg-container-col-2ou .gg-container-col-3
Sur Mobile, les colonnes s'empileront.
Bloc encadré Bleu
Le bloc encadré par défaut a un filet rouge, un fond blanc, des titres rouges. C’est pas mal de les mettre sur une section dégradé ou avec un fond pour plus de contraste.
- Bloc par défaut : gg-bloc-encadre
- Bloc bleu :
- appliquer le bloc par défaut, puis la classe spécifique pour la couleur bleue.
- gg-bloc-encadre-bleu
- Le titre (h3) se mettra aussi à la bonne couleur.
La hauteur est 100 % : elle s’adapte au bloc le plus grand. Les boutons par exempl sont repoussés tout en bas.
La vision
- Nous voyons l’argent comme un outil au service de l’Humain au sein d’une économie réelle, libérée des marchés financiers.
- Nous considérons que la monnaie doit contribuer à l’harmonie entre l’Humain et la Nature.
- Nous croyons à l’émergence de l’abondance à travers les échanges, vraie source de richesses.
- Nous souhaitons vivre une expérience collective portée par La Gonette qui donnera un sens réel à l’économie.
Titre bouton
Ce bloc encadré est quand même intégré dans une colonne avec la classe.gg-container-col-1
Pour que les espacements sur les côtés soient les mêmes que pour les colonnes multiples.
Je like et/ou je partage les publications de La Gonette sur les réseaux sociaux.
HelloAsso
Je fais un don ponctuel ou récurrent à La Gonette via HelloAsso ou en gonettes via mon compte numérique !
helloasso.com
ElementS Accordéon
Des accordéons
Ajouter un élément Accordion (pas nestable !), et lui affecter la classe ".gg-accordeon-bleu" ou ".gg-accordeon-rouge"
La monnaie Quésako ?
Here goes your text … Select any part of your text to access the formatting toolbar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris himenaeos. Fusce nec tellus sed augue semper porta. Vestibulum lacinia arcu eget nulla per conubia. Class aptent taciti sociosqu ad litora torquent.
Un autre accordéon
Here goes your text … Select any part of your text to access the formatting toolbar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris himenaeos. Fusce nec tellus sed augue semper porta. Vestibulum lacinia arcu eget nulla per conubia. Class aptent taciti sociosqu ad litora torquent.
La monnaie Quésako ?
Here goes your text … Select any part of your text to access the formatting toolbar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris himenaeos. Fusce nec tellus sed augue semper porta. Vestibulum lacinia arcu eget nulla per conubia. Class aptent taciti sociosqu ad litora torquent.
Un autre accordéon
Here goes your text … Select any part of your text to access the formatting toolbar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris himenaeos. Fusce nec tellus sed augue semper porta. Vestibulum lacinia arcu eget nulla per conubia. Class aptent taciti sociosqu ad litora torquent.
Boutons de téléchargement
Payer en Gonettes... Rien de plus simple !
Texte rouge sur fond bleu
Ca marche aussi avec du texte simple : ajouter la classe .gg-texte-rouge-fond-bleu
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero uctus non, massa. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris himenaeos. Fusce nec tellus sed augue semper porta. Vestibulum lacinia arcu eget nulla per conubia. Class aptent taciti sociosqu ad litora torquent.
Nous soutenir en un clic !
Je like et/ou je partage les publications de La Gonette sur les réseaux sociaux.
HelloAsso
Je fais un don ponctuel ou récurrent à La Gonette via HelloAsso ou en gonettes via mon compte numérique !
helloasso.com