Styles

Cette page est destinée à présenter les styles des éléments de page standard tels que la typographie, les éléments de formulaire et les icônes. Ces éléments sont codés en dur dans un fichier de modèle de page alternatif, nommé page.styles.liquide.

---

Typographie

Rubrique 1

Rubrique deux

Rubrique trois

Rubrique quatre

Rubrique cinq

Rubrique six

H1 HEADING

H2 HEADING

Titre H3

H4 Intitulé

H5 HEADING

H6 Intitulé

Apparemment, nous avions atteint une grande hauteur dans l'atmosphère, car le ciel était d'un noir mortel, et les étoiles avaient cessé de scintiller. Par la même illusion qui élève l'horizon de la mer au niveau du spectateur sur le flanc d'une colline, le nuage de sable en dessous était étalé, et la voiture semblait flotter au milieu d'une immense sphère sombre, dont la moitié supérieure était parsemée d'argent. En regardant dans le sombre golfe en contrebas, je pouvais voir une lumière rougeâtre filtrer à travers une faille dans les nuages.

Recevez notre newsletter et découvrez nos histoires, nos collections et nos surprises.

• Nouveau dans
• Ventes et offres spéciales
• Femmes
• Hommes
• Chaussures
• Sacs et accessoires
• Top Marques
• Lookbook

• Lorem ipsum dolor sit amet
• Conse ctetur adipisicing elit sed do
• Eiusmod temporel
• Incididunt ut labore et dolore magna
• Ut enim ad minim veniam

• Tissu 1 : 100% Polyester
• Tissu 2 : 100% Polyester,Doublure : 100% Polyester
• Tissu 3 : 75% Polyester, 20% Viscose, 5% Elasthanne

1. Tissu 1 : 75% Polyester, 20% Viscose, 5% Elasthanne
2. Tissu 2 : 100% Polyester,Doublure : 100% Polyester
3. Tissu 3 : 100% Polyester

Rubriques RTE

Paragraphes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Styles de type

• Fort
• Accent mis sur
• Lien en ligne
• Strike
• ^Sup

Citations en bloc

Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

L'auteur de la citation

Listes

---

Tableaux réactifs

---

Formulaires

Éléments de formulaire par défaut

Étiquette horizontale Étiquette horizontale 2 -- Choisissez... Option 1 Option 2 Option 3 Étiquette de la case à cocher

Étiquettes invisibles

Ajouter une classe de label-hidden à une étiquette pour la masquer visuellement, tout en la gardant accessible aux lecteurs d'écran. Utilisez le bouton placeholder comme étiquette visible.

Note : Le site placeholder ne fonctionne que dans IE10+. Les étiquettes invisibles sont donc désactivées dans IE9 et les versions inférieures.

Prénom Nom de famille Courriel :

---

Formulaires verticaux (client, contact, etc.)

Il n'existe pas de styles pour cela dans Slate, mais ils sont utilisés dans la plupart des thèmes. Style des éléments à l'intérieur d'un form/div avec la classe `form-vertical` pour voir vos styles ici.

Vous ne pouvez pas ajouter une classe directement à la plupart des éléments du formulaire liquide (ex. {% form 'contact' %}). À la place, intégrez le formulaire dans un div avec la classe .form-vertical pour obtenir le même effet.

Champ de texte Placeholder Champ désactivé Étiquette Champ de texte (erreur) Champ de texte (succès) Sélectionnez le champ -- Choisissez... Option 1 Option 2 Option 3

Cases à cocher

Champ de case à cocher
Champ de case à cocher
Champ de case à cocher

Radios

Option 1
Option 1
Option 1

Zone de texte Champ du fichier

Notes et erreurs de forme

Aucun style de note n'existe dans Slate, mais il est souvent ajouté pour gérer les erreurs de formulaire. Exemples de styles :

    .note {
      padding: 20px;
      border: 1px solid #ccc;
    }

    .note--success {
      border-color: green;
      background-color: lightgreen;
    }

    .note--error {
      border-color: red;
      background-color: lightred;
    }
  

Exemple d'utilisation :

    {% if form.posted_successfully? %}
    <p class="note note--success">Thanks for submitting the form</p>
    {% endif %}

    {% if form.errors %}
    <div class="note note--error">
    {{ form.errors | default_errors }}
    </div>
    {% endif %}
  

---

Boutons

Bouton par défaut

Bouton par défaut (aucune valeur par défaut)

Bouton désactivé

Bouton par défaut désactivé

Bouton large

Bouton large par défaut

---

Éléments divers

Règles horizontales

Il n'y a pas de défaut hr dans Slate, mais ce sont des styles courants à ajouter.

Défaut hr

---

Invisible hr.hr--clear

---