Qu'est-ce que c'est ?
Le Frame Styleguide sert de guide de marque numérique pour la création de sites web et d'expériences. L'objectif d'un guide de style est d'améliorer la cohérence, la qualité et la communication au sein de l'interface utilisateur, en rendant le processus de conception et de développement plus efficace et plus ciblé.
Ce guide de style vise à établir un vocabulaire partagé entre les concepteurs et les développeurs, et à fournir des conseils clairs et faciles à découvrir sur les meilleures pratiques de conception et de développement.
Plus d'informations sur l'importance des systèmes de conception.
Pour qui est-ce ?
Toute personne qui conçoit ou développe un nouveau site web à l'aide de Frame. Même si vous n'avez pas besoin d'utiliser ces composants directement, le style de base et la documentation devraient être une référence utile pour savoir comment nous avons fait les choses ailleurs et pour réduire la duplication du travail et la contamination des feuilles de style.
Comment l'utiliser ?
Consultez la section Démarrer sur Slite pour savoir comment intégrer ce thème dans votre projet et comment modifier le style de base de votre thème.
La couleur donne vie à un dessin. La couleur est polyvalente ; elle est utilisée pour exprimer une émotion et un ton, ainsi que pour mettre l'accent et créer des associations.
rgb(0, 0, 0)
$COLOR_PRIMARY
rgb(99, 115, 129)
$COLOR_SECONDARY
rgb(244, 241, 232)
$COLOR_SAND
rgb(139, 0, 0)
$COLOR_RED
rgb(79, 44, 29)
$COLOR_DARK_BROWN
rgb(0, 0, 0)
$COLOR_TEXT_PRIMARY
rgb(81, 81, 81)
$COLOR_TEXT_SECONDARY
rgb(148, 148, 148)
$COLOR_TEXT_LIGHT
rgb(255, 255, 255)
$COLOR_TEXT_INVERSE
rgb(0, 0, 0)
$COLOR_BACKGROUND_DARK
rgb(249, 248, 243)
$COLOR_BACKGROUND_LIGHT
rgb(255, 255, 255)
$COLOR_BACKGROUND_WHITE
rgb(245, 245, 245)
$COLOR_BACKGROUND_GREY
rgb(229, 229, 229)
$COLOR_BORDER_LIGHT
rgb(204, 204, 204)
$COLOR_BORDER_DARK
rgb(127, 85, 28)
$COLOR_LINK
rgb(0, 0, 0)
$COLOR_LINK_HOVER
rgb(127, 85, 28)
$COLOR_BUTTON
rgb(0, 0, 0)
$COLOR_BUTTON_HOVER
rgb(0, 0, 0)
INFORMATIONS SUR LE SOUTIEN AUX COULEURS
rgb(0, 170, 0)
$COLOR_SUPPORT_SUCCÈS
rgb(230, 87, 34)
$COLOR_SUPPORT_WARNING
rgb(139, 0, 0) ;
$COLOR_SUPPORT_ERROR
rgb(94, 158, 214)
$COLOR_SUPPORT_FOCUS
Styles de boutons personnalisés pour les actions dans les formulaires, les dialogues et autres, avec prise en charge de plusieurs tailles, états et autres.
.button--primary.button--outlined
.bouton--outliné,
.bouton--secondaire .bouton--secondaire-lumière
Exemples et directives d'utilisation des styles de contrôle de formulaires, des options de mise en page et des composants personnalisés pour la création d'une grande variété de formulaires.
Le système de grille Frame offre un système d'agencement flexible, mobile d'abord, qui permet de diagnostiquer les appareils. Il dispose de fonctions permettant de contrôler l'alignement, l'ordre, le débit et les gouttières.
Le système de grille est basé sur le site materialize.css.
Colonnes standard
Bureau 12 / Tablette 6 / Mobile 4
Bureau 12 / Tablette 6 / Mobile 4 (Pas de gouttières)
Les icônes sont conçues pour être simples, modernes, conviviales et parfois excentriques. Chaque icône est réduite à sa forme minimale, exprimant des caractéristiques essentielles pour remplacer ou accompagner les étiquettes.
Les variables d'espacement sont utilisées pour appliquer de manière cohérente la marge et le rembourrage entre les composantes et les IU. Le fait d'avoir une échelle d'espacement fixe donne un rythme au produit et crée un flux naturel et familier d'une page à l'autre.
$SPACING_3XS
$SPACING_2XS
$SPACING_XS
$SPACING_S
$SPACING_M
$SPACING_L
$SPACING_XL
$SPACING_2XL
$SPACING_3XL
$LAYOUT_2XS
$LAYOUT_XS
$LAYOUT_S
$LAYOUT_M
$LAYOUT_L
$LAYOUT_XL
$LAYOUT_2XL
La typographie est utilisée pour créer des hiérarchies claires, des organisations utiles et des alignements ciblés qui guident les utilisateurs à travers le produit et l'expérience. C'est la structure de base de toute interface bien conçue.
Affichage 1
Affichage 2
Affichage 3
Rubrique 1
Rubrique 2
Rubrique 3
Rubrique 4
Rubrique 5
Rubrique 6
Sous-titre 1
Sous-titre 2
Corps 1
Corps 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- Liste ordonnée niveau 1
- Liste ordonnée niveau 2
- Liste ordonnée niveau 2
- Liste ordonnée niveau 1
- Liste ordonnée niveau 1
- Liste non ordonnée niveau 1
- Liste non ordonnée niveau 2
- Liste non ordonnée niveau 2
- Liste non ordonnée niveau 1
- Liste non ordonnée niveau 1
Vous pouvez utiliser la balise de marquage pour souligner texte.
Cette ligne de texte est censée être traitée comme du texte supprimé.
Cette ligne de texte est censée être traitée comme n'étant plus exacte.
Cette ligne de texte est censée être traitée comme un ajout au document.
Cette ligne de texte rendra comme souligné
Cette ligne de texte est censée être traitée comme des petits caractères.
Cette ligne est en gras.
Cette ligne est en italique.
L'apparition d'icônes de paiement contribue à renforcer le sentiment de sécurité sur le site. Il s'agit des options de paiement actuellement activées définies dans les paramètres de la boutique.
Les fiches produits sont un élément de taille moyenne qui contient des informations clés sur les produits, telles qu'une vignette, un titre et un prix. Ces fiches produits sont partagées sur l'ensemble du thème et constituent l'un des composants les plus réutilisables qui existent.
