Design system et documentation

Gestion des largeurs et hauteurs accessibles

Il faut convertir les hauteurs et largeurs pixels en rem, et utiliser le système en cascade tout dimplement. La fonction calculateRem permet ça :

                    
                        $ma-largeur-en-px : 600px;
                        
                        width: $ma-largeur-en-px;
                        width: calculateRem($ma-largeur-en-px);
                    
                

Gestion des tailles de typo accessibles

Il faut convertir les tailles de typos en rem, et utiliser le système en cascade. Le mixin @include font-size() permet ça :

                    
                        $ma-typo-en-px : 25px;
                        
                        @include font-size($ma-typo-en-px);
                    
                

Gestion de l'opacité des couleurs

La fonction opacifyMe permet d'ajouter de la transparence à une couleur.

                    
                        $ma-couleur : #fff548;
                        color: opacifyMe($ma-couleur, 0.3);
                    
                

Gestion des alignements

En créant un conteneur .flex, il est possible de cumuler des classes d'alignement. Par défaut le conteneur flex est en colones

                    
                        .row {
                            flex-direction: row;
                        }
                        .justify-start {
                            justify-content: flex-start;
                        }
                        
                        .justify-center {
                            justify-content: center;
                        }
                        
                        .justify-end {
                            justify-content: flex-end;
                        }
                        
                        .space-between {
                            justify-content: space-between;
                        }
                        
                        .space-around {
                            justify-content: space-around;
                        }
                        .align-center {
                            align-items: center;
                        }
                    
                

Boutons

Le style est modifiable avec les classes .primary, .secondary, .tertiary, .quartenary

Normal

Valider Valider Suite

Désactivé

Valider Valider Suite

Survol

Valider Valider Suite

Actif

Valider Valider Suite

Tableaux

Attention les tableaux utilisent un script de détéction du scroll dans le fichier tables.js

Par défaut les éléments sont slignés à gauche. Ils peuvent etre modifés avec les helpers .text-right ou .text-center

Blocs avec fond

La couleur est mdofiable avec les valeurs .primary, .secondary, .tertiary, .quartenary

Les aires d'action de bas de page

Le positionnement est fixe sur l'écran, et la classe .left, .center ou .right positionnera l'ensemble du contenu au nom de sa classe.

Aire d'action gauche

Aire d'action centre

Aire d'action droite