Note

Cette documentation est en cours de redaction. Pour toutes questions n’hésitez pas à nous envoyer un email sur community@risefor.org

Cheat Sheet - Balises pour personnaliser vos actions

Comme vous avez pu le remarquer vous avez la possibilité d’entrer des balises HTML dans certains champs, comme la description d’une action/consultation/appel à soutiens

Ci dessous vous pourrez retrouver les balises les plus fréquemment utilisés

Astuce

Vous pouvez utilisez toutes les classes mise à disposition par Bulma

Il vous suffi d’ajouter une balise div, p, ou span autour des éléments que vous souhaitez personnaliser et d’y intégrer la/les class que vous voulez.

Exemple :

  • mettre un sous titre : <p class="subtitle is-3">Mon soutitre</p>

  • souligner un contenu : <p class="underline">Je serais souligné</p>

Envie de cumuler des class ?

Si vous souhaitez accumuler des class, par exemple avoir un texte souligné et centré, regroupez les dans la meme balise.

pour illustrer :

🚫 <p class="is-flex is-flex-justify-content-center"> <p class="underline"> Je serais souligné </p></p>

✅ <p class="is-flex is-flex-justify-content-center underline "> Je serais souligné et centré </p>

Choisir quelle balise utiliser

Prudence

Vous n’êtes pas obligé d’ajouter une balise p ou div au début de chaque ligne. Etant dans la section admin, le contenu sera « transformé » en html lors de l’affichage.
Vous pouvez très bien ajouter des balises « imbriqué » ( span, strong ou em) au milieu d’un texte sans p ou div
⚠️ ceci n’est pas valable pour les autres balises, l’html doit être valide

Exemple:
✅ je suis un text du coté admin et je veux <span class="bold"> un peu de gras </span>, mais pas trop
🚫 je suis un text du coté admin et je veux <p class="bold"> un peu de gras </p>, mais pas trop

Balise

Explication Rapide

Exemple

div
un regroupement d’éléments :
Par exemple pour regrouper plusieurs
titres et paragraphes ensemble

Par exemple, plusieurs paragraphe centré

<div class='is-flex is-flex-justify-content-center'>
  <h3 class='subtitle is-3 bold'>Un sous titre en gras</h3>
  <p class='italic'>un paragraphe en italic</p>
  <p class='underline bold'>un paragraphe souligné et gras</span></p>
  <p class='bold'>Du gras et <span class='text-color_main'>une autre
  couleur ici</span></p>
</div>

p
Paragraphe :
Vous pouvez utiliser cette balise
quand vous voulez appliquer un style
à tout un paragraphe

<p class='mes class'> mon texte </p>

span
Si vous souhaiter appliquer un style
à des éléments au sein d’un texte

<p> Un début de phrase <span class='bold text-color_third'> un contenu gras et d’une autre couleur </span> puis le reste de ma phrase </p>

Améliorer le style de mon contenu

Trop d’espace entre les
lignes?
Assurez vous de ne pas avoir trop de retour à la ligne.
Chaque retour dans la section admin est répercuté.

Texte en gras
<strong> votre texte </strong>
ou l’utilisation de la class bold

Text italic
<em> votre texte </em>
ou l’utilisation de la class italic

Souligner un texte

<p class="underline"> Je serais souligné </p>

Intégrer un lien

<a href="votre lien"> le texte visible </a>
Intégrer un lien qui
ouvre dans un nouvel onglet

<a href="votre lien" target="_blank"> le texte visible </a>

Center une phrase

<p class="is-flex is-flex-justify-content-center"> le texte centré </p>

Une liste à puce

 
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
⚠️ Pour éviter d’avoir des espaces trop important entre chaque élément.
Il est préférable d’enlever tous les retours à la ligne sur l’éditeur.
Ce qui donnerait :
<ul>
<li>Element 1</li><li>Element 2</li><li>Element 3</li>
</ul>

Une liste numéroté

 
<ol>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ol>

Meme conseil que les listes à puces

Mettre un sous titre

<h3 class="subtitle is-3"> le sous titre </h3>

Vous pouvez mettre is-3, is-4, is-5, is-6 pour gérer la hiérarchie

Class Risefor à votre disposition

Plusieurs class Risefor sont à votre disposition pour personnaliser rapidement votre texte

Type

Class & Variations

Exemple

Couleurs de texte
text-color__ +
main
second
third
gray-dark
highlight

class="text-color__third"

Largeur d’un élément
width- + 25 / 50 / 80
ou width- + numero + px
ou width-mobile + numero + px
width-25 = 25% de largeur
width-250px = 250px de largeur
width-mobile-150px = 150px de largeur pour les mobiles
Padding des éléments
en rem
Global : p- + 1/2/…/6
Top : pt- + 1/2/…/6
Bottom pb- + 1/2/…/6
<p class="p-4"> Un padding tout autour </p>
<p class="pt-2 pb-4"> Un padding en haut et bas </p>
Padding des éléments
en px
Global : p- + 1/2…/200 + px
Top : pt- + 1/2…/200 + px
Bottom pb- + 1/2…/200 + px
Left pl- + 1/2…/200 + px
Right pr- + 1/2…/200 + px
<p class="p-50px"> Un padding tout autour </p>
<p class="pt-15px pb-40px"> Un padding en haut et bas </p>
<p class="p-15px pl-40px"> Padding global + précision à gauche </p>
Margin des éléments
en rem
Global : m- + 1/2/…/6
Top : mt- + 1/2/…/6
Bottom mb- + 1/2/…/6
<p class="m-4"> Un margin tout autour </p>
<p class="mt-2 mb-4"> Un margin en haut et bas </p>
Margin des éléments
en px
Global : m- + 1/2…/200 + px
Top : mt- + 1/2…/200 + px
Bottom mb- + 1/2…/200 + px
Left ml- + 1/2…/200 + px
Right mr- + 1/2…/200 + px
Auto m-auto pour center un élément avec une width à moins de 100%
<p class="m-50px"> Un margin tout autour </p>
<p class="mt-15px mb-40px"> Un margin en haut et bas </p>
<p class="mt-15px ml-40px"> Un margin en haut et gauche </p>

Faire un bouton
cta-3 ou cta-light
+ main-color ou second-color ou third-color
⚠️ Les classes doivent être appliqué sur une balise
parente du texte visible
<div class="cta-3 third-color width-25 m-auto">
  <a href="#un lien" target="_brank">Mon bouton</a>
</div>

<div class="cta-3 third-color width-25">
  <p>Mon bouton</p>
</div>