Charte graphique

Palette de couleurs
Gris (g7)
#616161
RGB : 97,97,97
HSV : 0,0,38
Violet (f5)
#6A5687
RGB : 106,86,135
HSV : 264,36,53
Bleu (b9)
#0C5B7A
RGB : 12,91,122
HSV : 197,90,48
Vert (v5)
#8e9c48
RGB : 142,156,72
HSV : 70,54,61
Orange (o5)
#eb7239
RGB : 235,114,57
HSV : 19,76,92
Rouge (r5)
#cc2d18
RGB : 204,45,24
HSV : 7,88,80
Marron (m5)
#A1887f
RGB : 161,136,127
HSV : 16,21,63
Jaune (j5/j6)
#C48A1B
RGB : 196,168,27
HSV : 39,86,77
#fafafa #EDE6F5 #E1F8FC #F4F7E9 #FAEBE8 #fde0dc #efebe9 #FFF8E3
#f5f5f5 #D3C5E8 #B2D5DB #E3EBC7 #EBD1C5 #f9bdbb #d7ccc8 #FFEBB5
#eeeeee #B49CD9Valide - texte noir #83C9D6 #D2E0A6 #EBB69D #f9bdbbValide - texte noir #bcaaa4Valide - texte noir #FFDD82
#e0e0e0 #9876CC #58C3D6 #C0D481 #EB9B76 #f36c60 #a1887f #FFCF4F
#bdbdbdValide - texte noir #8157C2Valide - texte blanc #38BED6Valide - texte noir #B3CC66Valide - texte noir #EB8657Valide - texte noir #e84e40 #8d6e63Valide - texte blanc #FFC529Valide - texte noir
#949494 #6A5687Framatitre #18B7D4 #8E9C48Framatitre #EB7239Framatitre #CC2D18Valide - texte blanc #795548 #DBA306
#757575Valide - texte blanc #635182 #16A7C4 #7D8C3F #DE6933 #C42D16 #6d4c41 #C48A1BFramatitre
#616161Framatitre #574778 #1290B0 #677835Valide - texte blanc #D1602C #B82E12 #5d4037 #C47E1B
#666666 #4E4070 #11809EValide - texte blanc #52632A #C05827Valide - texte blanc #AB2A0E #4e342e #BA5D17Valide - texte blanc
#333333 #3E3363 #0C5B7AFramatitre #304219 #A8491D #AB2909 #3e2723 #A15014

h1 : font-family: DejaVu Sans, Verdana, Geneva, sans-serif;

h2-h6 : font-family: PTSansCaption,GillSans,sans-serif;

hr.trait : background-color: #EEE; height: 11px;

body : font-family: "DejaVu Sans",Verdana,Geneva,sans-serif;color: #333; background-color: #EEE;

.ombre : background-color: #FFF; box-shadow: box-shadow: 0px 3px 4px rgba(50, 50, 50, 0.2);

a/.btn-link : color: #0C5B7A; text-decoration: underline; text-decoration-style: dotted;

a:hover/.btn-link:hover : color: #635182; text-decoration-style: solid;

.signature : color: #795548;

Feuille de style

La feuille de style se trouve sur ce dépôt ou bien ici même

Le thème s’appuie sur Bootstrap 3.3.5, il contient donc les même classes.

Il contient en plus les anciennes classes spécifiques à Framasoft :

  • .frama/.violet, .soft/.orange, .logiciel/.bleu, .culture/.rouge, .services/.vert, .vrac/.jaune pour colorier le texte
  • .fond-frama, .fond-soft, .fond-logiciel, .fond-culture, .fond-services, .fond-vrac pour utiliser la couleur de titre en arrière plan

et également les nouvelles classes qui correspondent à la palette ci-dessus.

Les classes sont construites avec un prefix fb_ (b = background) ou fc_ (c = color) suivi de la lettre de la couleur (g = gris, b = bleu, v = vert, o = orange, r = rouge, m = marron, j = jaune, f = fiolet :P) et de son rang dans le tableau (de 0 à 9).
Exemple : pour utiliser le framaviolet #6A5687 comme couleur d’arrière-plan, la classe est fb_f5.

Pour le texte, il y a 2 classes supplémentaires fc_dark (= #333) et fc_light (= #fff).

En pratique

Il faut utiliser le moins de couleurs possible.

L’important étant de respecter les thématiques propre à Framasoft (cohérence interne) et d’être logique par rapport au rôle fonctionnel lié aux classes de Bootstrap dont le sens est communément admis (cohérence externe) :

Logique des couleurs
Couleur Cohérence interne Cohérence externe
violet ce qui est générique et relatif à Framasoft élément primaire
bleu les logiciels libres (qui requièrent une installation) élément secondaire, info, lien
rouge la culture libre danger, erreur, pas ok…
orange ce qui est générique et relatif à Framasoft attention, important…
vert les services en ligne et les liens vers framacloud succès, validé, ok…
jaune les liens « Faire un don » et les outils « en vrac » (framacolibri, forum, en vente libre, wiki, etc)

Le marron ne devrait servir que comme couleur de texte alternative au noir/gris.

En théorie, pour une page web, une vidéo de démo, un diaporama… on ne devrait avoir besoin que de 2 couleurs : le violet + une autre marquée d’un Framatitre. Les autres couleurs du nuancier servent uniquement si on recherche un effet de contraste ou de profondeur donc en général c’est plutôt pour des éléments graphiques ponctuels.

Accessibilité

Les couleurs claires + texte noir sont valides du haut du tableau jusqu’au 1er Valide - texte noir.

Les couleurs foncées + texte blanc sont valides du 2ème Valide - texte blanc jusqu’à la fin.

Entre les deux, les couleurs peuvent être rendues accessibles :

  • en ajoutant un ombrage sur le texte (ex: text-shadow: 0 0 3px rgba(0, 0, 0, 0.7); si le texte est blanc). Ça ne passera pas à la validation mais ça améliore la lisibilité ; c’est ce qui est utilisé pour les boutons
  • en augmentant la taille du texte au delà de 24px. Ça passe à la validation ; c’est ce qui est utilisé pour les framatitres (marqués d’un Framatitre dans le tableau)

En règle générale, lorsqu’on veut distinguer plusieurs éléments similaires (par exemple des boutons), il vaut mieux utiliser des symboles plutôt que des couleurs (on peut aussi combiner les 2).

Pour que les lecteurs d’écran ne lisent pas les caractères unicodes correspondants aux icônes Font Awesome (ils sont incompréhensibles), il faut respecter cette syntaxe :

<i class="fa fa-fighter-jet" aria-hidden="true"></i>

De même, si l’icône est liée à une action (lien, bouton, etc), on applique la même logique qu’avec les images en fournissant un texte alternatif pour les lecteurs d’écran et/ou un title. Exemple avec ce bouton Framasoft

<a href="https://framasoft.org" class="btn btn-xs btn-default" title="se rendre sur Framasoft"><i class="fa fa-fighter-jet" aria-hidden="true"></i><span class="sr-only">Framasoft</span></a>

Typographie

  • Pensez à mettre des espaces insécables devant les signes de ponctuation double (:!? etc.) ou avec les guillemets français («»).
    Rappel : le code HTML de l’espace insécable est &nbsp;
  • Utilisez des apostrophes typographiques
    Rappel : le code HTML de l’apostrophe typographique est &rsquo;
  • Même si c’est tentant, on ne met pas de majuscule au milieu de Framasoft, Framapad… Une au début suffit.

 Framasoft

 Framalibre

 Framablog

 Framadate

 Framacolibri

Titre h1


Titre h2

Titre h3

Titre h4

Titre h5
Titre h6

Default Primary Success Info Warning Danger

Lien - Lien - Lien - Lien - Lien - Lien

Lien Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Lien Nullam id dolor id nibh ultricies vehicula ut id elit.

Lien Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Lien Maecenas sed diam eget risus varius blandit sit amet non magna.

Lien Etiam porta sem malesuada magna mollis euismod.

Lien Donec ullamcorper nulla non metus auctor fringilla.

Lien - Lien - Lien - Lien - Lien - Lien

Lien Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Lien Nullam id dolor id nibh ultricies vehicula ut id elit.

Lien Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Lien Maecenas sed diam eget risus varius blandit sit amet non magna.

Lien Etiam porta sem malesuada magna mollis euismod.

Lien Donec ullamcorper nulla non metus auctor fringilla.

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Images

Les sources de toutes ces images se trouvent dans ce fichier .svg. Les emblèmes sont créés à partir des icônes de Font Awesome pour les utiliser dans Inkscape, il faut ajouter le fichier .ttf dans votre dossier ~/.fonts (sous Linux).

Logo

Le logo est une œuvre de JosephK sous licence Creative Commons By-SA 4.0.
Il est inspiré de la mascotte initialement crée par LL de Mars.
(Framasoft a l’autorisation d’utiliser le logo sans avoir besoin de citer l’auteur).
Pour en savoir plus, lire le sujet sur Framacolibri.

Historiquement, les Pingouins de LL de Mars sont des manchots : ils ne peuvent pas voler.

Ce manchot (planche originale) a été choisi car il sort de sa condition en agissant différemment de ses congénères. Ça lui demande de gros efforts aussi bien physiquement que socialement et puis il a un air un peu cinglé aussi… un peu comme bien des libristes ;)

Icônes

Génériques

Apple Touch Icons

Favicons

Par service avec emblème Fork Awesome

Les icônes sont générées dynamiquement en javascript à partir d’un template SVG. Fork Awesome doit être installé sur le pc pour que les emblèmes apparaissent correctement.