Template pour les sites d’unité

Les Scouts asbl met ce template à la disposition de ses membres pour mettre en forme les sites des unités.
Cette page te présente les différents éléments contenus dans le template pour ton site d’unité.

Le template repose sur la bibliothèque Bootstrap qui offre une vaste gamme de fonctionnalités pour mettre en page un site web aisément.

Tu trouveras ci-dessous la documentation des fonctionnalités que nous avons ajoutées à Bootstrap. Elles s’ajoutent à toutes les fonctionnalités de Bootstrap, que tu peux aussi utiliser.

L’univers visuel de la fédération Les Scouts est composé d’éléments graphiques tels que des lignes, des cercles, des carrés et des traces. Ils peuvent être utilisés en gros format, tout petits, coupés et dans la couleur correspondant à la branche qu’ils représentent. Ces éléments accroissent la visibilité de la marque et son impact. Ils doivent donc être utilisés de façon adéquate.

La bibliothèque Bootstrap a été créée par Twitter. Nous te conseillons vivement de commencer par découvrir le fonctionnement de Bootstrap avant de te pencher sur la documentation ci-dessous.

Pour te donner une idée de ce qu’il est possible de créer, voici quelques exemples de pages :

• Page d’accueil
• Formulaire de demande d’inscription
• Formulaire de contact

Les polices recommandées dans notre charte graphique sont activées dans le template. La police principale (Muli) s’applique par défaut. Utilise les classes ci-dessous pour personnaliser le contenu.

En tant que membre de la fédération, tu peux utiliser nos logos sur le site de ton unité.

Les logos ci-dessous devraient répondre à la plupart des besoins.

Logo en couleurs, avec ou sans baseline

Le logo en couleurs sur fond blanc avec la baseline est à privilégier. Si le logo est plus petit (baseline peu lisible), utilise alors la version sans baseline.

Logo monochrome

Et si tu souhaites l’afficher sur un fond d’une couleur particulière, choisis plutôt une version monochrome du logo sans fond. Choisis la couleur qui ressort le mieux suivant le fond.

Logos des branches

Comme tu l’as vu plus haut, tu peux appliquer des fonds de couleur aux blocs de ta page. Mais tu peux aussi combiner ces fonds de couleur avec un décor en fond qui vient s’ajouter par-dessus.

Branche	Décoration	Classe CSS
Fédération		bg-topping-federation raccourci : bg-topping-f
Baladins		bg-topping-baladins raccourci : bg-topping-b
Louveteaux		bg-topping-louveteaux raccourci : bg-topping-l
Éclaireurs		bg-topping-eclaireurs raccourci : bg-topping-e
Pionniers		bg-topping-pionniers raccourci : bg-topping-p

Attention
Si tu utilises un fond avec une décoration, place le contenu dans un bloc avec la classe bg-content.

<div class="bg-ls-vert-base bg-topping-federation">
    <div class="bg-content">
        …
    </div>
</div>
                        

L’opacité de la décoration est exprimée en pourcentage de 10% à 100% par pas de 10%. Pour modifier le niveau d’opacité, applique une classe entre bg-topping-opacity-10 et bg-topping-opacity-90 (par défaut, l’opacité est à 100%).

Exemples :

<div class="bg-ls-baladins bg-topping-baladins bg-topping-opacity-10">
    <div class="bg-content">
        …
    </div>
</div>
                        

<div class="bg-dark bg-topping-federation bg-topping-opacity-60">
    <div class="bg-content">
        …
    </div>
</div>
                        

Comme pour les décorations, tu peux aussi utiliser un décor de fond en grande taille en ajoutant la classe bg-topping-large.

Combiner une photo en fond avec la décoration

Les fonds décorés peuvent aussi s’appliquer par-dessus une image.

Dans l’exemple ci-dessous, on ajoute la photo comme image de fond puis la décoration se superpose. À toi de jouer pour donner une apparence sympa à l’ensemble.

Astuce : Nous avons ajouté la classe bg-dark pour basculer le texte du bloc dans une couleur claire. En effet, les CSS ne connaissent pas la couleur de l’image de fond que tu ajoutes.
Si ton image de fond est plutôt claire, ajoute la classe bg-light ou une autre classe de couleur.