Documentation

Documentation - Dimensions.

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

Documentation - Dimensions. +

Démarrage

Concepts de base

Utilitaires

Composants

Dimensions

Les propriétés de dimensions permettent de contrôler la taille des éléments sur votre page. Marssel offre une syntaxe flexible pour définir les largeurs (width), hauteurs (height), ainsi que leurs valeurs minimales et maximales. Toutes ces propriétés supportent différentes unités (px, %, rem, vh, vw) et peuvent être combinées avec des breakpoints pour un design responsive.

Width

Aperçu

100px

25%

10rem

50vw

100% → 75% → 50%

<!-- Pixels -->
<div class="w-[100px] h-[50px] bg-[e0e0e0] mb-[10px]">
    100px
</div>
<!-- Pourcentages -->
<div class="w-[25%] h-[50px] bg-[0B63F3] c-[fff] mb-[10px] d-[flex] items-[center] justify-[center]">
    25%
</div>
<!-- REM (relatif à la taille de police root) -->
<div class="w-[10rem] h-[50px] bg-[e0e0e0] mb-[10px]">
    10rem
</div>
<!-- Viewport width -->
<div class="w-[50vw] h-[50px] bg-[10b981] c-[fff] mb-[10px] d-[flex] items-[center] justify-[center]">
    50vw
</div>
<!-- Largeur adaptative selon breakpoint -->
<div class="w-[100%] md--w-[75%] lg--w-[50%] h-[60px] bg-[0B63F3] c-[fff] d-[flex] items-[center] justify-[center]">
    100% → 75% → 50%
</div>

Height

Aperçu

50px

25%

50vh (50% de la hauteur du viewport)

100px → 200px → 300px

<!-- Hauteurs différentes -->
<div class="w-[100px] h-[50px] bg-[e0e0e0] d-[flex] items-[center] justify-[center]">
    50px
</div>
<!-- Hauteurs en pourcentage -->
<div class="w-[100px] h-[25%] bg-[0B63F3] c-[fff] d-[flex] items-[center] justify-[center]">
    25%
</div>
<!-- Viewport height -->
<div class="w-[100%] h-[50vh] bg-[10b981] c-[fff] d-[flex] items-[center] justify-[center] mb-[10px]">
    50vh (50% de la hauteur du viewport)
</div>
<!-- Hauteur adaptative -->
<div class="w-[100%] h-[100px] md--h-[200px] lg--h-[300px] bg-[0B63F3] c-[fff] d-[flex] items-[center] justify-[center]">
    100px → 200px → 300px
</div>

Min-Width

Aperçu

min-w-[200px] (ne peut pas être plus petit)

<!-- Largeur minimale -->
<div class="min-w-[200px] h-[60px] bg-[e0e0e0] mb-[10px] d-[flex] items-[center] justify-[center]">
    min-w-[200px] (ne peut pas être plus petit)
</div>

Max-Width

Aperçu

max-w-[300px] (ne peut pas être plus large)

Container centré

Ce conteneur a une largeur maximale de 800px et est centré horizontalement grâce à mx-[auto].

<!-- Largeur maximale -->
<div class="max-w-[300px] h-[60px] bg-[e0e0e0] mb-[10px] d-[flex] items-[center] justify-[center]">
    max-w-[300px] (ne peut pas être plus large)
</div>
<!-- Container centré avec max-width -->
<div class="max-w-[800px] mx-[auto] bg-[f5f5f5] p-[24px] rounded-[8px]">
    <h3 class="m-[0] mb-[16px]">Container centré</h3>
    <p class="m-[0] c-[666]">
        Ce conteneur a une largeur maximale de 800px et est centré horizontalement grâce à mx-[auto].
    </p>
</div>

Min-Height

Aperçu

min-h-[150px]
Peu de contenu

min-h-[150px]
Beaucoup de contenu qui dépasse la hauteur minimale.
La div s'étend automatiquement.
Pour contenir tout le texte.

<div class="d-[flex] gap-[10px]">
    <!-- Hauteur minimale avec peu de contenu -->
    <div class="w-[200px] min-h-[150px] bg-[e0e0e0] p-[10px]">
        min-h-[150px]
        <br>Peu de contenu
    </div>

    <!-- Hauteur minimale avec beaucoup de contenu -->
    <div class="w-[200px] min-h-[150px] bg-[e0e0e0] p-[10px]">
        min-h-[150px]
        <br>Beaucoup de contenu qui dépasse la hauteur minimale.
        <br>La div s'étend automatiquement.
        <br>Pour contenir tout le texte.
    </div>
</div>

Max-Height

Aperçu

max-h-[100px] avec scroll:

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.

max-h-[150px] avec overflow hidden:

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. Le texte est coupé.

<!-- Hauteur maximale avec overflow -->
<div class="max-h-[100px] bg-[e0e0e0] p-[10px] overflow-[auto] mb-[10px]">
    <strong>max-h-[100px] avec scroll:</strong>
    <p>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.</p>
</div>

<div class="max-h-[150px] bg-[e0e0e0] p-[10px] overflow-[hidden]">
    <strong>max-h-[150px] avec overflow hidden:</strong>
    <p>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. Le texte est coupé.</p>
</div>

Combinaisons min/max

Aperçu

min-w-[300px] + max-w-[600px]
Largeur flexible entre 300px et 600px

min-h-[100px] + max-h-[200px]
Hauteur flexible entre 100px et 200px
Avec scroll si le contenu dépasse

<!-- Min et max width ensemble -->
<div class="min-w-[300px] max-w-[600px] bg-[0B63F3] c-[fff] p-[20px] mb-[10px]">
    min-w-[300px] + max-w-[600px]
    <br>Largeur flexible entre 300px et 600px
</div>

<!-- Min et max height ensemble -->
<div class="w-[100%] min-h-[100px] max-h-[200px] bg-[10b981] c-[fff] p-[20px] overflow-[auto]">
    min-h-[100px] + max-h-[200px]
    <br>Hauteur flexible entre 100px et 200px
    <br>Avec scroll si le contenu dépasse
</div>

Dimensions responsive complètes

Aperçu

Card responsive

Cette card adapte sa largeur selon la taille d'écran :

Mobile : 100% de largeur
Small : 90% de largeur
Medium : 600px fixe
Large : 800px fixe

<!-- Card responsive avec dimensions adaptatives -->
<div class="w-[100%] sm--w-[90%] md--w-[600px] lg--w-[800px] mx-[auto] min-h-[200px] bg-[fff] rounded-[12px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] p-[20px] md--p-[32px]">
    <h3 class="m-[0] mb-[16px]">Card responsive</h3>
    <p class="m-[0] c-[666] mb-[16px]">
        Cette card adapte sa largeur selon la taille d'écran :
    </p>
    <ul class="pl-[20px] c-[666]">
        <li>Mobile : 100% de largeur</li>
        <li>Small : 90% de largeur</li>
        <li>Medium : 600px fixe</li>
        <li>Large : 800px fixe</li>
    </ul>
</div>

Container full-width

Aperçu

Container full-width avec contenu limité

Le fond s'étend sur toute la largeur, mais le contenu est limité à 1200px

<!-- Container pleine largeur -->
<div class="w-[100vw] h-[300px] bg-[f5f5f5] d-[flex] items-[center] justify-[center]">
    <div class="max-w-[1200px] w-[100%] px-[20px]">
        <h2>Container full-width avec contenu limité</h2>
        <p>Le fond s'étend sur toute la largeur, mais le contenu est limité à 1200px</p>
    </div>
</div>

Sidebar + Content

Aperçu

Contenu principal

Prend l'espace restant (flex-[1])

<div class="d-[flex] gap-[20px] h-[400px]">
    <!-- Sidebar fixe -->
    <aside class="w-[250px] bg-[f5f5f5] p-[20px]">
        <h4 class="m-[0] mb-[16px]">Sidebar</h4>
        <p class="m-[0] font-size-[14px] c-[666]">Largeur fixe de 250px</p>
    </aside>

    <!-- Contenu flexible -->
    <main class="flex-[1] bg-[fff] p-[20px] border-[1px_solid_e0e0e0] rounded-[8px]">
        <h4 class="m-[0] mb-[16px]">Contenu principal</h4>
        <p class="m-[0] c-[666]">Prend l'espace restant (flex-[1])</p>
    </main>
</div>

Grid avec dimensions fixes

Aperçu

Card 1

Card 2

Card 3

<div class="d-[grid] grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-[20px]">
    <div class="h-[150px] bg-[0B63F3] c-[fff] d-[flex] items-[center] justify-[center] rounded-[8px]">
        Card 1
    </div>
    <div class="h-[150px] bg-[8b5cf6] c-[fff] d-[flex] items-[center] justify-[center] rounded-[8px]">
        Card 2
    </div>
    <div class="h-[150px] bg-[10b981] c-[fff] d-[flex] items-[center] justify-[center] rounded-[8px]">
        Card 3
    </div>
</div>

Aspect Ratio (via padding-top)

Aperçu

16:9 Ratio

4:3 Ratio

1:1 Ratio

<!-- Ratio 16:9 -->
<div class="w-[100%] pos-[relative] pt-[56%] bg-[e0e0e0] rounded-[8px] overflow-[hidden] mb-[10px]">
    <div class="pos-[absolute] top-[0] left-[0] w-[100%] h-[100%] d-[flex] items-[center] justify-[center]">
        16:9 Ratio
    </div>
</div>

<!-- Ratio 4:3 -->
<div class="w-[100%] pos-[relative] pt-[75%] bg-[e0e0e0] rounded-[8px] overflow-[hidden] mb-[10px]">
    <div class="pos-[absolute] top-[0] left-[0] w-[100%] h-[100%] d-[flex] items-[center] justify-[center]">
        4:3 Ratio
    </div>
</div>

<!-- Ratio 1:1 (carré) -->
<div class="w-[100%] pos-[relative] pt-[100%] bg-[e0e0e0] rounded-[8px] overflow-[hidden]">
    <div class="pos-[absolute] top-[0] left-[0] w-[100%] h-[100%] d-[flex] items-[center] justify-[center]">
        1:1 Ratio
    </div>
</div>

Propriétés disponibles

Propriété | CSS équivalent | Unités supportées            | Exemple
---------------------|---------------------------|-----------------------------------------|-------------------------
w                    | width                     | px, %, rem, em, vw                      | w-[300px]
h                    | height                    | px, %, rem, em, vh                      | h-[200px]
min-w                | min-width                 | px, %, rem, em, vw                      | min-w-[200px]
max-w                | max-width                 | px, %, rem, em, vw                      | max-w-[800px]
min-h                | min-height                | px, %, rem, em, vh                      | min-h-[100px]
max-h                | max-height                | px, %, rem, em, vh                      | max-h-[500px]

← Précédent Borders

Suivant → Effects

Documentation - Dimensions.

Démarrage

Concepts de base

Utilitaires

Composants

Dimensions

Width

Height

Min-Width

Max-Width

Container centré

Min-Height

Max-Height

Combinaisons min/max

Dimensions responsive complètes

Card responsive

Container full-width

Container full-width avec contenu limité

Sidebar + Content

Contenu principal

Grid avec dimensions fixes

Aspect Ratio (via padding-top)

Propriétés disponibles

Réglages des cookies