Bienvenue sur le kit
MGPui
Cette documentation est à l'intention des
développeurs et intégrateurs des sites MGP.
Breakpoints
Le MGPui est composé en mobile first, l'ensemble de la grille est donc monté pour le mobile puis
ajoute les variations tablette, desktop, desktop large.
| Nom |
Largeur |
Périphériques cibles |
|
> 540px |
Mobile portrait |
| $sm |
< 540px |
Grands mobiles portrait ou mobile paysage |
| $md |
< 769px |
Tablettes portrait |
| $lg |
< 1064px |
Tablettes paysage et petits desktop |
| $xl |
< 1290px |
Desktop |
| $xxl |
< 1680px |
Grand desktop |
Grille
La grille MGP sur laquelle repose la structure du site se compose en 12 colonnes contrôlées par la
variable
--grid-col, les goutières sont contrôlées par la variable
--grid-gutter.
L'ensemble de la grille va se modifier par rapport à la largeur de l'écran via les
$-wd
| Breakpoint |
Largeur d'écran |
Largeur de container |
Marges exterieures |
Nombre de colonnes |
Goutières |
| - |
> 540px |
510px |
30px |
3 |
30px |
| $sm-wd |
< 540px |
≈ 500px |
1.25rem |
6 |
2.820vw |
| $lg-wd |
< 1064px |
89vw - largeur de scrollbar |
Automatique |
12 |
2.326vw |
| $xl-wd |
< 1290px |
89vw - largeur de scrollbar |
Automatique |
12 |
1.786vw |
| $xxl-wd |
< 1680px |
1520px - largeur de scrollbar |
Automatique |
12 |
entre 1.786vw et maximum 30px |
Le MGPui vous propose un système de ligne ouvrant sur les colonnes, le concept est similaire à celui
de bootstrap. Afin de tenir une maquette relativement complexe nous avons préféré le
display: grid;. Cela rend l'intégration plus rapide et plus facile. Ce
système nous permet également de construire plus facilement des variations complexes suivant les
breakpoints.
L'alignement se fait grâce à des class utilitaires col-start-,
col-end-,
col-. Attention avec display grid l'incrémentation des colonnes est de i
+ 1. Donc pour placer un bloc entre la colonne 2 et 11 il faudra mettre
.col-start-2 .col-end-12, le bloc va donc s'arrêter au début de la
colonne 12.
| Class |
Breakpoint |
Nombre |
Comportement |
| col- |
$sizes-list |
x : de 1 à
--grid-col-number |
Donne une largeur de x, à partir du breakpoint renseigné |
| col-start- |
$sizes-list |
x : de 1 à
--grid-col-number |
Fait commencer à partir de x colonne, à partir du breakpoint renseigné |
| col-end- |
$sizes-list |
x : de 1 à
--grid-col-number |
Termine avant la x colonne, à partir du breakpoint renseigné |
Pour les besoins des blocs comportant des éléments dynamiques dont la quantité est variable, nous
avons monté un second système de grille avec
display: flex;. Les alignements sont rendus impossibles mais vous avez
accès aux largeurs des colonnes ainsi qu'aux variations des largeurs suivant les breakpoints. Les
éléments dans le container sont centrés dans celui‐ci et retournent à la ligne si ils n'ont plus de
place.
| Class |
Breakpoint |
Nombre |
Comportement |
| col-width- |
$sizes-list |
x : de 1 à
--grid-col-number |
Donne une largeur de x, à partir du breakpoint renseigné |
Certaines class utilitaires utilisables sur tous les éléments flex ou
grid
| Class |
Comportement |
| .va-center |
Centrage vertical |
| .jc-left .jc-start |
Justification du/des enfants à gauche |
| .jc-right .jc-end |
Justification du/des enfants à droite |
| .jc-center |
Justification du/des enfants au centre |
| .jc-space-between |
Espacement des enfants par le centre |
| .jc-space-evenly |
Espacement des enfants entre eux et par rapport aux côtés |
| .jc-space-around |
Espacement des enfants par rapport aux côtés |
| .jc-stretch |
Étire le/les enfants pour occuper toute la place disponible |
Polices de caractère web
Le caractère typographique de la MGP est le Graphik. Voir les graisses utilisées plus
bas.
Graphik
Christian Schwartz
—
Commercial Type
2009
Typographie
L'ensemble des tailles du site sont soumises à la largeur de la fenêtre du navigateur
grâce à la propriété css
clamp() située dans scss/global/_root.scss
| Largeur |
Minimum |
Normal |
Maximum |
| > 1680px |
14px |
16px |
0.952vw |
| < 1680px |
- |
16px |
- |
Le
clamp() va nous permettre de gérer les tailles en essayant toujours de
garder la taille normale. En dessous de 1680px de largeur de fenêtre, il va ajuster les tailles pour
essayer d'être le plus proche de 16px, en ne descendant pas en dessous de 14px et en ne dépassant
pas 0.9vw. Ce système nous permet de conserver les harmonies d'espacements et des corps
typographiques sur une plus grande majorités de supports. Pour hériter du
clamp(), utiliser l'unité rem
De nombreuse tailles sont disponible en
.class utilitaires avec .fz-$size
| Exemple |
Nom |
Class |
Taille (rem/px) |
Interlignage (ratio) |
Protéger |
XXL |
.fz-xxl |
3rem/48px |
1.25 |
Protéger |
XL |
.fz-xl |
2.25rem/36px |
1.28 |
Protéger |
LG |
.fz-lg |
1.25rem/20px |
1.4 |
Protéger |
X Normal |
.fz-x-normal |
1.125rem/18px |
1.55 |
Protéger |
Normal |
.fz-normal |
1rem/16px |
1.5 |
Protéger |
SM |
.fz-sm |
0.875rem/14px |
1.43 |
Protéger |
XS |
.fz-xs |
0.75rem/12px |
1.333 |
De nombreuse tailles sont disponibles en
.class utilitaires avec .fw-$weight
| Exemple |
Nom |
Class |
Graisse |
Code |
Protéger |
Black |
.fw-black |
Black |
900 |
Protéger |
Bold |
.fw-bold |
Bold |
700 ou 'bold' |
Protéger |
Medium |
.fw-medium |
Medium |
500 |
Protéger |
Normal |
.fw-regular |
Regular |
400 |
| Exemple |
Class |
Taille |
Graisse |
Style |
Usage fréquent |
Protéger |
.page-title |
$fz-xxl |
$fw-regular |
- |
Titre de page sur H1 |
Protéger |
.title |
$fz-xl |
$fw-regular |
- |
Titre des bloc sur H2 |
Protéger |
.card-title |
$fz-lg |
$fw-bold |
- |
Titre des cards ou sous-titre H3 |
Protéger |
.chapo |
$fz-x-normal |
$fw-medium |
Capitales
et chasse |
Sur titre des blocs |
Ferré à gauche
Centré
Ferré à droite
Haut de casse
Bas de casse
Souligné
Couleurs
Les couleurs MGP sont utilisables dans toutes les entités
html via des
class utilitaires pour changer la couleur du texte, du fond d'un élément,
d'un bloc ou encore d'une bordure
| Couleur |
Hexadecimal |
Nom |
class |
|
#144196 |
Bleu |
.bleu |
|
#2C69DC |
Bleu medium |
.bleu-medium |
|
#08AFDC |
Bleu clair |
.bleu-clair |
|
#00AAA0 |
Menthe |
.menthe |
|
#A0C846 |
Vert |
.vert |
|
#821446 |
Bordeau |
.bordeau |
|
#DC0055 |
Fushia |
.fushia |
|
#F08214 |
Orange |
.orange |
|
#000 |
Noir |
.noir |
|
#4D4D4D |
Gris |
.gris |
|
#EFF2F8 |
Glace |
.glace |
|
#ffffff |
Blanc |
.blanc |
Disponible uniquement avec les backgrounds, applique une transparence de 0 à 100 avec un
pas de 5
Disponible via la class
.shadow-$color dans toutes les couleurs, sur MGP.fr nous avons fait le
choix de n'utiliser que la version
$bleu
L'ensemble de l'outil permet d'utiliser les mêmes tailles pour l'ensemble du projet.
| Nom |
Largeur (rem) |
Équivalence pixel
pour une largeur d'écran de 1440px |
Usage fréquent |
| $xl |
5rem |
80px |
Padding ou margin haut et bas entre les blocs |
| $xlg |
2.5rem |
40px |
Padding ou margin gauche et droite entre les éléments |
| $lg |
1.875rem |
30px |
Largeur des gouttières |
| $xmd |
1.563rem |
25px |
Margin haut et bas entre les titres et les textes |
| $md |
1.25rem |
20px |
Margin haut et bas entre les textes |
| $sm |
0.938rem |
15px |
Padding latéraux pour les boutons |
| $xs |
0.625rem |
10px |
Padding haut et bas pour les boutons |
Un ensemble de
class est disponible afin d'espacer rapidement des éléments. Construit
sur
$sp-list, vous pouvez utiliser les paddings et margin dans toutes les
directions
t, r, b,
l ainsi que les paires horizontales
x ou verticales y.
| Proprietés |
Directions |
Largeurs |
| m |
Margin |
t |
Haut (top) |
-xl |
$xl |
| p |
Padding |
r |
Droite (right) |
-xlg |
$xlg |
|
|
b |
Bas (bottom) |
-lg |
$lg |
|
|
-l |
Gauche (left) |
-md |
$md |
|
|
-x |
Horizontal (gauche et droit) |
-sm |
$sm |
|
|
-y |
Verticale (haut et bas) |
-xs |
$xs |
|
|
|
Toutes directions |
|
|
Toutes directions
Verticale
MGP Icons
Cette webfonts sur mesure vous permet d'utiliser la totalités des icones MGP via des
class utilitaires renseignées comme suit :
.icon-nom_de_l_icone.
Elle est disponible en .ttf .woff
.woff2 .eot .svg
Une fois la class renseignée, vous pouvez y attacher une taille
$size-list ainsi qu'une couleur $color-list
Call to action
Plusieurs type de CTA vous sont proposés, activables avec la classe
.cta, vous pouvez les appliquer sur les éléments
a, button
L'ensemble des icones de $icon-list pour l'ensemble des
.cta en chargeant le style
mgp-icons.css ainsi que la webfont
mgp-icons.ttf
Apparence spéciale pour les CTA sans fond de couleurs. Existe dans toutes les couleurs
des
.cta plus haut mais n'est pas disponible avec icones.
Cas de figure pour les CTA devant être placés l'un à côté de l'autre
Cas de figure pour les CTA à icone dans un carré
Affichage des liens hypertexte. Disponible dans toutes les couleurs de
$color-list ainsi que avec toutes les icons de
$icon-list
MGP Images
Pour les besoins graphiques, nous avons construit un style spécifique aux images de présentation.
L'ensemble est déjà stylisé, animé et coloré. Vous pouvez changer l'alignement des éléments
.mgp-image-$direction ou encore les couleurs des éléments.
Modifier la couleur de l'ombre
.mgp-image-back-$color-list ainsi que la bordure traversante supérieure
.mgp-border-$color-list
Liste
Plusieurs types de listes sont disponibles
Liste à point disponible dans toutes les couleurs $color-list
Liste à incrément disponible dans toutes les couleurs
$color-list
Liste en ligne centrée avec séparateur en point, disponible dans toutes les couleurs
$color-list
Liste avec icone, disponible dans toutes les couleurs
$color-list
Bordures
Plusieurs type de bordures (ou tirets) sont utilisables dans toutes les couleurs
$colors-list
Tableaux
Plusieurs styles de tableaux vous sont proposés
| Col |
Col |
Col |
| - |
- |
- |
| - |
- |
- |
| 0 |
0 |
0 |
Message d'alerte
Alerte message
Plusieurs type de messages d'alerte en bandeau sont disponible dans toutes les couleurs $color-list
Fermeture exceptionnelle de votre centre relation client
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam
amet aspernatur commodi cupiditate, dolore dolorum enim excepturi, itaque maxime minus
molestiae molestias nam natus necessitatibus obcaecati reprehenderit suscipit unde
velit?
Alerte boutons
Plusieurs type de boutons d'alerte sont disponible
Error
Success
Normal
Disable
Error
Success
Normal
Disable
Error
Success
Normal
Disable
Error
Success
Normal
Disable
Error
Success
Normal
Disable
Error
Success
Normal
Disable
Alerte modale
Error
Success
Normal
Disable
