webdev4u.info
Guide de style
Cette page décrit les styles et les normes actuels pour le site web webdev4u.info.
Colors
Un aperçu des couleurs de la marque sur ce site.
Action
Action
Ultra léger
Light
Moyen
Dark
Ultra foncé
Comp
Primaire
Primaire
Ultra léger
Light
Moyen
Dark
Ultra foncé
Comp
Secondaire
Secondaire
Ultra léger
Light
Moyen
Dark
Ultra foncé
Comp
Accent
Accent
Ultra léger
Light
Moyen
Dark
Ultra foncé
Comp
Base
Base
Ultra léger
Light
Moyen
Dark
Ultra foncé
Comp
Ombre
Ombre
Ultra léger
Light
Moyen
Dark
Ultra foncé
Action
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Primaire
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Secondaire
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Accent
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Base
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Ombre
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Success
Success
Success Light
Success Dark
Success Hover
Danger
Danger
Danger Light
Danger Dark
Danger Hover
Avertissement
Avertissement
Lumière d'avertissement
Warning Dark
Avertissement survol
info
Info
Info Light
Info Dark
Info Hover
Boutons
Les boutons solides et les boutons de contour sont disponibles dans tous les jeux de couleurs, y compris le noir et le blanc.
Typographie
Ci-dessous, un aperçu des tailles et des poids de typographie responsive pour ce site. Celles-ci sont calculées à partir d'une taille de base et d'une échelle mathématique.
Headings
H1 (--xxl)
Heading 1 Regular
Heading 1 moyen
Heading 1 Bold
H2 (--xl)
Heading 2 Regular
Heading 2 Moyen
Heading 2 Bold
H3 (--l)
Heading 3 Regular
Heading 3 Moyen
Heading 3 Bold
H4 (--m)
Heading 4 Regular
Heading 4 Moyen
Heading 4 Bold
H5 (--s)
Heading 5 Regular
Heading 5 Moyen
Heading 5 Bold
H6 (--xs)
Heading 6 Regular
Heading 6 Moyen
Heading 6 Bold
Texte du corps
BODY TEXT (--m)
Texte m Regular
Texte m Médium
Texte m Bold
SMALL TEXT (--s)
Texte s Regular
Texte s Média
Texte s Bold
XTRA SMALL TEXT (--xs)
Texte xs Regular
Texte xs Moyen
Texte xs Bold
Exemples
Tête 1 (H1)
This is large text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 2 (H2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Tête 3 (H3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Tête 4 (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Tête 5 (H5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Tête 6 (H6)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Largeurs
Il y a six valeurs que vous pouvez utiliser pour contrôler la largeur des éléments. Ils sont automatiquement réactifs.
Padding de section
Le padding pour les sections est réactif et basé sur un multiplicateur du système d'espacement du noyau.
Espacement
Il existe six niveaux d'espacement de réponse calculés à partir d'une taille de base et d'une échelle mathématique. Cela garantit que la marge, le remplissage et les espaces correspondent tous parfaitement.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl
Élément Padding
Voici les six niveaux d'espacement visualisés sous forme de padding.
Carte
This is a card with XS padding. Son contenu est assez proche des bords.
Carte
This is a card with S padding. Il a un rembourrage un peu plus serré.
Carte
This is a card with M padding. Il dispose d'un espace de respiration standard.
Carte
This is a card with L padding. Il dispose d'un espace de respiration supplémentaire.
Carte
This is a card with XL padding. Il dispose d'un espace de respiration significatif.
Carte
This is a card with XXL padding. Évitez de l'utiliser dans un espace confiné.
Shadows
Il y a trois ombres de boîte multi-couches à choisir.
Box shadow M
Box shadow L
Box shadow XL
Rayon de courbure
Il existe six valeurs de rayon de la frontière calculées à partir d'une taille de base et d'une échelle mathématique.
Rounded XS
Rounded S
Rounded M
Rounded L
Rounded XL
Rounded XXL
