Évier de cuisine

Cette page est destinée à présenter les styles des éléments de page standard tels que la typographie, les éléments de formulaire, etc.
Ceux-ci sont codés en dur dans un fichier de modèle de page alternatif, nommé page.styles.liquid.

Typographie

Rubriques

Première rubrique

Rubrique 2

Troisième rubrique

Rubrique quatre

Rubrique cinq

Rubrique six

Modèles types

Fort
Accentuation
Lien en ligne
Grève
^Sup

Blockquotes

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

Type d'éditeur de texte riche

Rubrique 1 de RTE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis non turpis a rhoncus. Morbi vel euismod felis. Quisque volutpat ipsum dolor. Nulla bibendum dignissim dignissim. Suspendisse et tincidunt orci, convallis accumsan massa. Aliquam aliquet fringilla vehicula. Les résultats de l'enquête ont été publiés dans le journal de l'Observatoire de l'Union européenne. Le résultat est une masse de matières premières, une masse d'eau et une masse d'air. L'eau de mer a été utilisée pour la fabrication de la pâte à papier et de la pâte à papier. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Le texte de l'article est disponible sur le site internet de la Commission européenne. Curabitur sit amet nisi porta, faucibus velit nec, ultrices nisi. Nullam et lorem rhoncus, dignissim elit id, consequat arcu. Ut eget magna cursus, eleifend elit id, aliquet quam. Phasellus a rutrum purus.

Suspendisse commodo lacinia lectus quis bibendum. Donec pulvinar pulvinar vulputate. Vivamus eget metus suscipit, tincidunt elit in, posuere ante. Proin pretium massa magna, at dapibus tortor mattis ac. Nunc mauris eros, pulvinar at est in, efficitur lacinia urna. Phasellus tempus eleifend volutpat. Praesent et molestie urna.

Rubrique 2 de RTE

Rubrique trois de RTE

Rubrique quatre de RTE

Rubrique cinq de RTE

Rubrique six de RTE

Listes

`ul` (par défaut)

Un
Deux
Trois
Quatre

Puce numérique `ol` (par défaut)

Un
Deux
Trois
Quatre

Listes d'enfants (pour correspondre aux styles de RTE)

Un
Deux
Trois, avec liste d'enfants
- Premier sous-poste
- Deuxième sous-poste
- Troisième sous-poste, avec liste d'enfants
  - Poste de troisième niveau
  - Autre élément de troisième niveau
Quatre

Tableaux réactifs

Commande	Date	État des paiements	État d'avancement	Total
#1001	22 décembre 2015	Autorisé	Inaccomplie	$43.03
#1002	23 décembre 2015	Autorisé	Inaccomplie	$44.03
#1003	24 décembre 2015	Autorisé	Inaccomplie	$45.03
#1004	25 décembre 2015	Autorisé	Inaccomplie	$46.03
#1005	26 décembre 2015	Autorisé	Inaccomplie	$47.03
#1006	27 décembre 2015	Autorisé	Inaccomplie	$48.03

Formulaires

Éléments du formulaire par défaut

Étiquettes invisibles

Ajouter une classe de étiquette-cachée à une étiquette pour la masquer visuellement, tout en la laissant accessible aux lecteurs d'écran. Utilisez l'option espace réservé comme étiquette visible.

Remarque : Les espace réservé 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 style pour cela dans Slate, mais il est utilisé dans la plupart des thèmes. Stylez les éléments à l'intérieur d'un form/div avec la classe `form-vertical` pour voir vos styles ici.

Il n'est pas possible d'ajouter une classe directement à la plupart des éléments du formulaire liquide (par exemple {% form 'contact' %}). Au lieu de cela, placez le formulaire dans une div avec la classe .form-vertical pour obtenir le même effet.

Notes et erreurs de forme

Il s'agit d'une note standard

Il s'agit d'un message de réussite

Il s'agit d'un message d'erreur.

Les puces permettent de mieux comprendre l'erreur.

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

Éléments divers

Règles horizontales

Il n'y a pas de valeur par défaut hr dans Slate, mais il s'agit là de styles courants à ajouter.

Défaut hr

Invisible hr.hr--clear

Petit hr.hr--small

Sections

Celles-ci peuvent parfois se briser, ou ne pas inclure nos dernières créations. Parlez-en à un développeur.

Diaporama

Héros

Ligne d'affichage

Image avec texte

Associez un texte de grande taille à une image pour mettre l'accent sur le produit, la collection ou l'article de blog de votre choix. Ajoutez des détails sur la disponibilité, le style ou même un commentaire.

Appel à l'action

Titre de la section

Cette section peut contenir un appel à l'action et un lien vers un produit ou une page à l'aide du bouton ci-dessous. Tous les éléments sont facultatifs.