Design System Grosfillex
Créé par Dedi.
Helpers
Les helpers sont destinés aux développeurs pour aider à la mise en place de nouvelles fonctionnalités. Ils peuvent ainsi toucher aux marges internes/externes, alignement des textes en quelques classes.
Espacement
Les classes suivantes vont vous permettre d'afficher facilement des marges internes/externes à vos éléments en fonction des résolutions.
| all | top : t | bottom : b | left : l | right : r | top + bottom : y | left + right : x | |
|---|---|---|---|---|---|---|---|
|
auto 0 px 10 px 20 px 30 px 40 px 50 px |
.m-auto .m-0 .m-1 .m-2 .m-3 .m-4 .m-5 |
.mt-auto .mt-0 .mt-1 .mt-2 .mt-3 .mt-4 .mt-5 |
.mb-auto .mb-0 .mb-1 .mb-2 .mb-3 .mb-4 .mb-5 |
.ml-auto .ml-0 .ml-1 .ml-2 .ml-3 .ml-4 .ml-5 |
.mr-auto .mr-0 .mr-1 .mr-2 .mr-3 .mr-4 .mr-5 |
.my-auto .my-0 .my-1 .my-2 .my-3 .my-4 .my-5 |
.mx-auto .mx-0 .mx-1 .mx-2 .mx-3 .mx-4 .mx-5 |
|
0 px 10 px 20 px 30 px 40 px 50 px |
.p-0 .p-1 .p-2 .p-3 .p-4 .p-5 |
.pt-0 .pt-1 .pt-2 .pt-3 .pt-4 .pt-5 |
.pb-0 .pb-1 .pb-2 .pb-3 .pb-4 .pb-5 |
.pl-0 .pl-1 .pl-2 .pl-3 .pl-4 .pl-5 |
.pr-0 .pr-1 .pr-2 .pr-3 .pr-4 .pr-5 |
.py-0 .py-1 .py-2 .py-3 .py-4 .py-5 |
.px-0 .px-1 .px-2 .px-3 .px-4 .px-5 |
|
sm md lg xl |
.p-sm-1 .p-md-1 .p-lg-1 .p-xl-1 |
.pt-sm-1 .pt-md-1 .pt-lg-1 .pt-xl-1 |
.pb-sm-1 .pb-md-1 .pb-lg-1 .pb-xl-1 |
.pl-sm-1 .pl-md-1 .pl-lg-1 .pl-xl-1 |
.pr-sm-1 .pr-md-1 .pr-lg-1 .pr-xl-1 |
.py-sm-1 .py-md-1 .py-lg-1 .py-xl-1 |
.px-sm-1 .px-md-1 .px-lg-1 .px-xl-1 |
Alignement
| left | center | right | justify | |
|---|---|---|---|---|
|
all sm md lg xl |
.text-left .text-sm-left .text-md-left .text-lg-left .text-xl-left |
.text-center .text-sm-center .text-md-center .text-lg-center .text-xl-center |
.text-right .text-sm-right .text-md-right .text-lg-right .text-xl-right |
.text-justify .text-sm-justify .text-md-justify .text-lg-justify .text-xl-justify |