Classes

Faites évoluer votre site Web sans développeurs et donnez à votre équipe de marketing les moyens de commercialiser votre marque. Une dénomination des classes CSS qu'une grand-mère peut comprendre. Pas d'abréviations, pas de sténographie, pas de confusion. Lisez le nom d'une classe et sachez ce qu'elle fait.

Structure

Nous avons défini les bases essentielles pour que vous puissiez construire le complexe avec moins d'efforts.

Structures de base et largeur maximale

Utilisez cette structure pour créer la plupart des pages :

.page-wrapper

.section

.conteneur

.page-padding

...(par exemple, grille, mises en page, composants, etc.)

.conteneur

.max-800

.max-600

.max-500

.max-400

.max-200

Rembourrage global

Classe parentale externe pour créer un espacement horizontal global à l'échelle du site

.page-padding

CERTAINES DE CES CLASSES UTILITAIRES DEVRAIENT ÊTRE DÉPLACÉES. Quelque chose comme clickable n'a pas besoin d'être aussi haut dans la liste des classes
.

Classes utilitaires

.z-1 - Rapproche un élément sur l'indice z. Définit le z-index à 1.

.z-2 - Rapproche un élément sur le z-index. Définit le z-index à 2.

.full-size - Pas de largeur maximale sur un .container. Définit max-width à none.

.full-size-tablet - .full-size sur tablette. Définit la largeur maximale à none sur les tablettes.

.full-size-mobile - .full-size sur mobile. Définit la largeur maximale à none sur les mobiles.

.align-center - Centre un conteneur . sur l'écran. Définit les marges gauche et droite sur auto.

.div-square - Crée et maintient une dimension 1:1 d'un div. Magie CSS.

.layer - Ajouté à un div pour qu'il s'étende sur toute la taille de l'élément parent. Assurez-vous que l'élément div parent a une "position : relative".

.clickable-off - Empêche toute interaction par clic et survol avec un élément. Définit les événements de pointeur à aucun.

.clickable-on - Active toutes les interactions de clic et de survol avec un élément. Définit les événements du pointeur sur auto.

.crop - Empêche le débordement d'un .container. Définit le débordement comme étant caché.

.sticky-on-page - Ajout obligatoire à .page-wrapper lorsque 'position : sticky' est sur une page. Définit le débordement sur visible.

Grilles

Construisez n'importe quelle mise en page avec des grilles. Utilisez-la lorsque vous avez besoin de colonnes et de lignes.

Colonnes de la grille

.grid-1-col

.grid-2-col

.grid-3-col

.grid-4-col

Lignes de la grille

.grid-row

article

Compléments à "Lignes de la grille".

Ajoutez ces classes en plus des classes "Lignes de la grille" ci-dessus.

.écart-10

article

.gap-40

article

.gap-60

article

Ligne et colonne simples

.row

article

.col

article

Espacement

Système d'espacement qui maintient un espacement vertical et horizontal global sur votre site web.

Espacement - horizontal

margin-left et margin-right

Espace à gauche

.espace-gauche-xsmall

.espace-gauche-petit

.espace-gauche-moyen

.space-left-large

.space-left-xlarge

Espace droit

.espace-droit-xsmall

élément

.espace-droit-petit

élément

.espace-droit-moyen

élément

.space-right-large

élément

.espace-droit-xlarge

élément

Espacement - vertical

margin-bottom et margin-top

Fond de l'espace

.space-bottom-xsmall

.space-bottom-small

.space-bottom-medium

.space-bottom-large

.space-bottom-xlarge

Sommet de l'espace

.espace-top-xsmall

.espace-top-small

.space-top-medium

.espace-top-large

.espace-top-xlarge

Espacement - espacement intérieur égal pour les sections

Espacement - égal gauche droite

padding-left et padding-right

.section-espace-horizontal-20-20-20

.section-espace-horizontal-40-40

.section-espace-horizontal-60-60

Espacement - égal en haut et en bas

padding-top et padding-bottom

.section-espace-vertical-20-20

.section-espace-vertical-40-40

.section-espace-vertical-80-80

Supprimer tout espacement des composants Webflow par défaut

.space-clean

Typographie

L'organisation de la typographie permet à votre marque de rester professionnelle. Utilisation correcte de H1, H2, H3 pour le référencement.

Balises d'en-tête

Utilisez toujours les balises pour déterminer les titres.

La page ne doit avoir qu'un seul H1 - exigence SEO. Ajoutez la classe .style-heading-large à h2, h3, etc. si vous avez besoin de plus d'un titre avec le même style que H1.

H1

H2

H3

H4

H5

H6

Taille de police unique

.style-heading-huge

.style-heading-large

.style-heading-medium

Contenu

Texte du paragraphe - 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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.style-text-large

.style-texte-petit

.style-text-tiny

Lien texte

Citation de bloc

.style-text-strikethrough

Texte enrichi

L'élément de texte riche vous permet de créer et de mettre en forme des titres, des paragraphes, des citations, des images et des vidéos en un seul endroit, au lieu de devoir les ajouter et les mettre en forme individuellement. Il suffit de double-cliquer et de créer facilement du contenu.

Nous avons créé une classe spéciale .rich-text avec un formatage particulier pour chaque composant.

h1

h2

h3

h4

h5

h6

citation

lien

élément de liste
élément de liste
‍

Texte du paragraphe

Poids de la police

.style-text-bold

.style-text-normal

Alignement du texte

.style-texte-gauche

.style-texte-centre

.style-texte-droit

Couleurs

L'organisation de la typographie permet à votre marque de rester professionnelle. Utilisation correcte de H1, H2, H3 pour le référencement.

Couleur du texte

Ajoutez aux sections, conteneurs et éléments pour modifier la couleur d'arrière-plan.

.style-text-color-white

.style-text-color-grey

.style-text-color-black

.style-text-muted - ajoute de l'opacité au texte

Compléments de couleur d'arrière-plan

Ajoutez aux sections, conteneurs et éléments pour modifier la couleur d'arrière-plan.

.style-background-white

.style-background-grey

.stylebackground-black

Une visibilité réactive

Une expérience unique sur chaque appareil.

Afficher et masquer les éléments en fonction de la taille de l'écran

.hide - cacher sur tous les appareils

.hide-tablet - cacher à partir de la résolution de la tablette

.hide-landscape - cacher à partir de la résolution paysage

.hide-mobile - cacher à partir de la résolution mobile

.show-tablet - afficher à partir de la résolution de la tablette

.show-landscape - afficher à partir de la résolution paysage

.show-mobile - afficher à partir de la résolution mobile

Composants

Composants de formulaire, boutons, liste déroulante, onglets, curseur, et plus encore.

Boutons

Conseil : utilisez .grid-row .gap-small/medium/large comme enveloppe pour mettre l'espace entre deux boutons.

.bouton

.bouton-secondaire

.button-text

Utilisez la classe d'extension .invert-colors lorsque vous placez un bouton sur un fond sombre.

.bouton

.bouton-secondaire

.button-text

Formulaires

Éléments de formulaire natifs de Webflow

Merci ! Votre soumission a été reçue !

Oups ! Quelque chose s'est mal passé lors de l'envoi du formulaire.

Glissière

Il s'agit d'un texte à l'intérieur d'un bloc div.

Onglets

Il s'agit d'un texte à l'intérieur d'un bloc div.

Icônes

Classes d'icônes

.icône-16

.icône-30

.icône-40

.icône-60

.icône-80

.icône-1x1-xsmall

.icon-1x1-small

.icon-1x1-medium

.icon-1x1-large

.icon-1x1-xlarge

Icônes SVG en ligne

Find more icons here https://simpleicons.org and add property fill='currentColor' inside of <svg> tag to control color of the icon through font color style.</svg>

Classes

Structure

Structures de base et largeur maximale

Rembourrage global

Classes utilitaires

Grilles

Colonnes de la grille

Lignes de la grille

Compléments à "Lignes de la grille".

Ligne et colonne simples

Espacement

Espacement - horizontal

Espace à gauche

Espace droit

Espacement - vertical

Fond de l'espace

Sommet de l'espace

Espacement - espacement intérieur égal pour les sections

Espacement - égal gauche droite

Espacement - égal en haut et en bas

Supprimer tout espacement des composants Webflow par défaut

Typographie

Balises d'en-tête

H1

H2

H3

H4

H5

H6

Taille de police unique

Contenu

Texte enrichi

h1

h2

h3

h4

h5

h6

Poids de la police

Alignement du texte

Couleurs

Couleur du texte

Compléments de couleur d'arrière-plan

Une visibilité réactive

Afficher et masquer les éléments en fonction de la taille de l'écran

Composants

Navigation

Boutons

Formulaires

Glissière

Onglets

Dropdown

Boîte à lumière

Recherche

Icônes

Classes d'icônes

Icônes SVG en ligne