Styles
Cette page à présenter les styles des page standard tels que la typographie, les éléments de formulaire et les icônes. Ceux-ci sont codés en dur dans un fichier page alternatif, nommé page.styles.liquid.
Typographie
Première rubrique
Rubrique 2
Troisième rubrique
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 un black mort, 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 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 de silver. En regardant le golfe sombre en contrebas, j'ai pu voir une lumière rougeâtre s'échapper d'une fissure dans les nuages.
Recevez notre lettre d'information et découvrez nos histoires, nos collections et nos surprises.
- Nouveau
- Soldes et offres spéciales
- Femmes
- Hommes
- Chaussures
- Sacs et accessoires
- Grandes marques
- Lookbook
- Lorem ipsum dolor sit amet
- Conse ctetur adipisicing elit sed do
- Eiusmod temporaires
- 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% élasthanne
- Tissu 1 : 75% polyester, 20% viscose, 5% élasthanne
- Tissu 2 : 100% Polyester,Doublure : 100% Polyester
- Tissu 3 : 100% polyester
Rubriques RTE
Rubrique 1 de RTE
Rubrique 2 de RTE
Rubrique trois de RTE
Rubrique quatre de RTE
Rubrique cinq de RTE
Rubrique six de 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
- 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 nihil imperdiet doming id quod mazim placerat facer possim assum.
L'auteur de la citation
Listes
|
|
Puce numérique
|
|
Listes d'enfants (pour correspondre aux styles de RTE) |
|
Tableaux réactifs
| ORDER | DATE | ÉTAT DES PAIEMENTS | ÉTAT D'ACCOMPLISSEMENT | TOTAL |
|---|---|---|---|---|
| #1001 | 22 décembre 2015 | Autorisé | Unfulfilled | $43.03 |
| #1002 | 23 décembre 2015 | Autorisé | Unfulfilled | $44.03 |
| #1003 | 24 décembre 2015 | Autorisé | Unfulfilled | $45.03 |
| #1004 | 25 décembre 2015 | Autorisé | Unfulfilled | $46.03 |
| #1005 | 26 décembre 2015 | Autorisé | Unfulfilled | $47.03 |
| #1006 | 27 décembre 2015 | Autorisé | Unfulfilled | $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.
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
Aucun style de note n'existe dans Slate, mais ils sont couramment ajoutés 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 %}
Il s'agit d'un message d'erreur.
- Les puces permettent de mieux comprendre l'erreur.
Boutons
Bouton par défaut (pas de valeurs par défaut)
É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
