Documentation

Documentation - Responsive Design.

Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.

Documentation - Responsive. +

Démarrage

Concepts de base

Utilitaires

Composants

Responsive design

Marssel intègre un système de responsive design complet basé sur des breakpoints préfinis. Préfixez simplement vos classes avec le breakpoint souhaité pour adapter vos styles à différentes tailles d'écran, avec support des ranges min-max et de la syntaxe compacte.

Breakpoints

Marssel utilise 6 breakpoints prédéfinis pour gérer le responsive design :

xs:  320px
sm:  576px
md:  768px
lg:  992px
xl:  1200px
xxl: 1400px

Syntaxe

Préfixez vos classes avec un ou plusieurs breakpoints séparés par -- :

<!-- Simple breakpoint -->
<div class="md--w-[500px]">...</div>

<!-- Breakpoints multiples -->
<div class="sm--md--w-[300px]">...</div>

Syntaxe compacte

Utilisez --- pour appliquer plusieurs styles à un composant avec breakpoint :

<div class="md--card---[bg-[ffffff]+p-[20px]+rounded-[8px]]">...</div>

Max-width

Utilisez m devant le breakpoint pour un max-width :

<!-- Masquer sur mobile -->
<div class="mmd--d-[none]">Visible uniquement sur desktop</div>

Ordre de priorité

Les breakpoints suivent un ordre de priorité qui dépend du type de media query :

Pour min-width (breakpoints standards)

L'ordre est croissant : du plus petit au plus grand breakpoint.

<!-- Ordre CSS généré -->
.col-\[12\] { ... }                    /* Base : 100% */

@media (min-width: 768px) {
    .md--col-\[6\] { ... }             /* md et plus : 50% */
}

@media (min-width: 992px) {
    .lg--col-\[4\] { ... }             /* lg et plus : 33.33% ✅ PRIORITAIRE */
}

Pour max-width (préfixe 'm')

L'ordre est décroissant : du plus grand au plus petit breakpoint.

<!-- Ordre CSS généré -->
.col-\[12\] { ... }                    /* Base : 100% */

@media (max-width: 991px) {
    .mlg--col-\[8\] { ... }            /* lg et moins : 66.67% */
}

@media (max-width: 575px) {
    .msm--col-\[10\] { ... }           /* sm et moins : 83.33% ✅ PRIORITAIRE */
}

💡 Astuce : Plus le breakpoint est grand (lg > md > sm), plus il a de priorité avec min-width. C'est l'inverse avec max-width où les petits breakpoints (msm) écrasent les grands (mlg).

Exemple de priorité

Cet élément change de largeur selon la taille de l'écran :

Aperçu

Responsive width
Grand écran : 33.33% Moyen écran : 50% Petit écran : 100%

<!-- ≥ 992px → 33.33% (lg prioritaire) -->
<!-- 768px - 991px → 50% (md prioritaire) -->
<!-- &lt; 768px → 100% (base prioritaire) -->
<div class="lg--col-[4] md--col-[6] col-[12]">
    Contenu responsive
</div>

Range

Combinez min et max pour cibler une plage précise :

<!-- Visible uniquement entre sm et md -->
<div class="sm--md--d-[block]">...</div>

Exemples pratiques