Étape 1 : Définissez vos balises
N'ajoutez pas de classes à ces éléments.
Dans cette section, vous souhaitez modifier directement les balises HTML, afin qu'elles affectent tous les éléments du site sans avoir à utiliser une classe.
Commencez par éditer votre corps
Ajoutez votre police, modifiez la couleur et la taille du texte
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Lorem ipsum dolor sit amet
Heading 1 default size
Heading 2 default size
Heading 3 default size
Heading 4 default size
Heading 5 default size
Heading 6 default size
Étape 2 : Définissez vos échantillons de couleurs
Qu'est-ce qu'un nuancier ?
Dans cette section, nous voulons enregistrer nos couleurs pour les utiliser sur notre projet plus tard.
Nous n'utiliserons pas la classe, mais les échantillons de couleurs définis.
Couleurs principales
Autres couleurs
Étape 3 : Classes réutilisables
Que sont les classes réutilisables ?
Dans cette section, les classes par défaut et les classes combo sont expliquées.
Voici toutes les classes que vous pourrez utiliser tout au long de votre projet.
Cette classe doit être appliquée sur l'élément section.
Les sections sont utilisées pour structurer votre contenu verticalement.
Propriétés
padding-top: 64px,
padding-bottom: 64px
The 100vh combo class makes your section fullheight according to the user's viewport dimensions.
Useful for heros or specific sections
Propriétés
padding-top: 64px,
padding-bottom: 64px,
+ height: 100vh
Remplace la couleur d'arrière-plan de la section par la couleur primaire définie dans vos nuances.
Propriétés
padding-top: 64px,
padding-bottom: 64px,
+ background-color: ??
Remplace la couleur d'arrière-plan de la section par la couleur secondaire définie dans vos nuances.
Propriétes
padding-top: 64px,
padding-bottom: 64px,
+ background-color: ??
Modifie la couleur d'arrière-plan de la section en une couleur grise définie dans vos échantillons.
Propriétés
padding-top: 64px,
padding-bottom: 64px,
+ background-color: ??
Cette classe doit être appliquée sur l'élément conteneur. Les conteneurs sont utilisés pour structurer votre contenu horizontalement.
Propriétés
padding-left: 32px,
padding-right: 32px,
max-width: 1280px
Cette classe combinée ajoute un affichage flexible à votre conteneur et centre son contenu horizontalement.
Propriétés
padding-left: 32px,
padding-right: 32px,
max-width: 1280px,
+ display: flex,
+ flex-direction: vertical,
+ align-items: center,
+ text-align: center
Cette classe combinée ajoute un affichage flexible à votre conteneur et centre son contenu verticalement. Peut être combinée avec la classe combinée centrée.
Propriétés
padding-left: 32px,
padding-right: 32px,
max-width: 1280px,
+ display: flex,
+ flex-direction: vertical,
+ justify-content: center
Cette classe fait croître votre conteneur à 100 % de la hauteur du parent. Utile pour les sections de 100 vh.
Propriétés
padding-left: 32px,
padding-right: 32px,
max-width: 1280px,
+ height: 100%
Ces classes peuvent être appliquées sur des éléments de grille. Les mises en page de grille sont utilisées pour structurer votre contenu. (Les classes combinées sont disponibles sur toutes les mises en page.)
Propriétés
gap: 32px,
width: 100%
La classe combo sans espace supprime l'espace horizontal et vertical.
Propriétés
- gap: 32px,
width: 100%,
+ gap: 0px
La classe combo gap-small réduit l'écart à 16 pixels.
Propriétés
- gap: 32px,
width: 100%,
+ gap: 16px
La classe combo gap-large agrandit l'écart à 64px.
Propriétés
- gap: 32px,
width: 100%,
+ gap: 64px
Ces classes peuvent être appliquées sur des éléments div. Ces classes sont utilisées pour modifier la mise en page de votre contenu.
Propriétés
display: flex,
flex-direction: vertical,
align-items: left,
justify-content: start
Cette classe combinée centre votre contenu.
Propriétés
display: flex,
flex-direction: vertical,
- align-items: left,
justify-content: start,
+ align-items: center,
+ text-align: center
Cette classe combinée centre votre contenu verticalement
Propriétés
display: flex,
flex-direction: vertical,
align-items: left,
- justify-content: start,
+ justify-content: center
Cette classe combo change la direction flexible de votre div.
Propriétés
display: flex,
- flex-direction: vertical,
align-items: left,
justify-content: start,
+ flex-direction: horizontal
Cette classe combo fait de votre div 100% de la taille du parent.
Propriétés
display: flex,
flex-direction: vertical,
align-items: left,
justify-content: start,
+ height: 100%
Ces classes peuvent être appliquées sur n'importe quel élément. "mb" signifie "margin-bottom", qui est utilisé pour séparer les éléments de votre site.
Propriétés
margin-bottom: ??px
Ces classes peuvent être appliquées sur des éléments de texte. Ces classes sont utilisées pour modifier le poids de votre texte.
Propriétés
font-weight: ??
Si vous avez besoin d'autres poids comme léger, moyen, semi-gras... vous pouvez les ajouter.
Propriétés
font-weight: ??
Ces classes peuvent être appliquées sur du texte ou des éléments wrapper. Ces classes sont utilisées pour modifier la couleur de votre texte.